Merge pull request #48 from KSJaay/v0.5.4

v0.5.4 - Cleaning up and moving to canvasjs

app/components/home/menu/index.jsx

@@ -6,10 +6,7 @@ import { observer } from 'mobx-react-lite';
 
 // import local files
 import Button from '../../ui/button';
-
-// import icons
-import FaPlus from '../../icons/faPlus';
-import FaReload from '../../icons/faReload';
+import { FaPlus, IoReload } from '../../icons';
 import MenuLayoutDropdown from './layout';
 import MenuStatusDropdown from './status';
 import SearchBar from '../../ui/searchBar';
@@ -30,7 +27,7 @@ const HomeMenu = ({ handleReset, search, setSearch }) => {
 
       <div className="home-menu-buttons">
         <Button
-          iconLeft={<FaReload width={20} height={20} />}
+          iconLeft={<IoReload style={{ width: '20px', height: '20px' }} />}
           onClick={handleReset}
         />
 
@@ -49,7 +46,7 @@ const HomeMenu = ({ handleReset, search, setSearch }) => {
                 false
               )
             }
-            iconLeft={<FaPlus width={20} height={20} />}
+            iconLeft={<FaPlus style={{ width: '20px', height: '20px' }} />}
             color={'primary'}
           >
             New

app/components/home/menu/layout.jsx

@@ -2,29 +2,24 @@
 import useDropdown from '../../../hooks/useDropdown';
 import Dropdown from '../../ui/dropdown';
 import Button from '../../ui/button';
-
-// import icons
-import BsTable from '../../icons/bsTable';
-import IoGrid from '../../icons/ioGrid';
-import PiListFill from '../../icons/piListFill';
-import FiLayout from '../../icons/fiLayout';
+import { BsTable, IoGrid, FaBars, FiLayout } from '../../icons';
 import useLocalStorageContext from '../../../hooks/useLocalstorage';
 
 const views = [
   {
     text: 'Cards',
     id: 'cards',
-    icon: <IoGrid width={20} height={20} />,
+    icon: <IoGrid style={{ width: '20px', height: '20px' }} />,
   },
   {
     text: 'List',
     id: 'list',
-    icon: <BsTable width={20} height={20} />,
+    icon: <BsTable style={{ width: '20px', height: '20px' }} />,
   },
   {
     text: 'Compact',
     id: 'compact',
-    icon: <PiListFill width={20} height={20} />,
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
   },
 ];
 
@@ -56,7 +51,11 @@ const MenuLayoutDropdown = () => {
       id="home-menu-layout"
     >
       <Dropdown.Trigger isOpen={dropdownIsOpen} toggleDropdown={toggleDropdown}>
-        <Button iconLeft={<FiLayout width={20} height={20} />}>Layout</Button>
+        <Button
+          iconLeft={<FiLayout style={{ width: '20px', height: '20px' }} />}
+        >
+          Layout
+        </Button>
       </Dropdown.Trigger>
       <Dropdown.List isOpen={dropdownIsOpen}>{dropdownItems}</Dropdown.List>
     </Dropdown.Container>

app/components/home/menu/mobile.jsx

@@ -23,7 +23,7 @@ const HomeMenuMobile = ({ handleReset }) => {
         toggleDropdown={toggleDropdown}
         style={{ height: '45px' }}
       >
-        <FaEllipsisVertical height={30} width={30} />
+        <FaEllipsisVertical style={{ width: '30px', height: '30px' }} />
       </Dropdown.Trigger>
       <Dropdown.List isOpen={dropdownIsOpen}>
         <Dropdown.Item

app/components/home/menu/status.jsx

@@ -2,28 +2,24 @@
 import useDropdown from '../../../hooks/useDropdown';
 import Dropdown from '../../ui/dropdown';
 import Button from '../../ui/button';
-
-// import icons
-import HiStatusOffline from '../../icons/hiStatusOffline';
-import HiStatusOnline from '../../icons/hiStatusOnline';
-import PiListFill from '../../icons/piListFill';
+import { HiStatusOffline, HiStatusOnline, FaBars } from '../../icons';
 import useLocalStorageContext from '../../../hooks/useLocalstorage';
 
 const statusOptions = [
   {
     text: 'All',
     id: 'all',
-    icon: <PiListFill width={20} height={20} />,
+    icon: <FaBars style={{ width: '20px', height: '20px' }} />,
   },
   {
     text: 'Up',
     id: 'up',
-    icon: <HiStatusOnline width={20} height={20} />,
+    icon: <HiStatusOnline style={{ width: '20px', height: '20px' }} />,
   },
   {
     text: 'Down',
     id: 'down',
-    icon: <HiStatusOffline width={20} height={20} />,
+    icon: <HiStatusOffline style={{ width: '20px', height: '20px' }} />,
   },
 ];
 
@@ -54,7 +50,11 @@ const MenuStatusDropdown = () => {
       id="home-menu-status"
     >
       <Dropdown.Trigger isOpen={dropdownIsOpen} toggleDropdown={toggleDropdown}>
-        <Button iconLeft={<HiStatusOnline width={20} height={20} />}>
+        <Button
+          iconLeft={
+            <HiStatusOnline style={{ width: '20px', height: '20px' }} />
+          }
+        >
           Status
         </Button>
       </Dropdown.Trigger>

app/components/home/monitor/options.jsx

@@ -8,12 +8,10 @@ import { toast } from 'react-toastify';
 import MonitorModal from '../../modal/monitor/delete';
 import Dropdown from '../../ui/dropdown/index';
 import useContextStore from '../../../context';
-import { createGetRequest } from '../../../services/axios';
-
-// import icons
-import FaEllipsisVertical from '../../icons/faEllipsisVertical';
 import useDropdown from '../../../hooks/useDropdown';
+import { createGetRequest } from '../../../services/axios';
 import MonitorConfigureModal from '../../modal/monitor/configure';
+import { FaEllipsisVertical } from '../../icons';
 
 const MonitorOptions = ({ monitorId }) => {
   const {
@@ -77,7 +75,7 @@ const MonitorOptions = ({ monitorId }) => {
       toggleDropdown={toggleDropdown}
     >
       <Dropdown.Trigger toggleDropdown={toggleDropdown} isOpen={dropdownIsOpen}>
-        <FaEllipsisVertical width={20} height={20} />
+        <FaEllipsisVertical style={{ width: '20px', height: '20px' }} />
       </Dropdown.Trigger>
       <Dropdown.List isOpen={dropdownIsOpen}>
         <Dropdown.Item onClick={handleOpen}>Open</Dropdown.Item>