Revert "v0.5.4 - Cleaning up and moving to canvasjs"

app/components/home/menu/index.jsx

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

app/components/home/menu/layout.jsx

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

app/components/home/menu/status.jsx

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

app/components/home/monitor/options.jsx

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

app/components/icons/bsTable.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const BsTable = ({ width, height }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 16 16"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path>
+  </svg>
+);
+
+BsTable.displayName = 'BsTable';
+
+BsTable.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default BsTable;

app/components/icons/faCheck.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaCheck = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+  </svg>
+);
+
+FaCheck.displayName = 'FaCheck';
+
+FaCheck.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaCheck;

app/components/icons/faChevronDown.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaChevronDown = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 448 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
+  </svg>
+);
+
+FaChevronDown.displayName = 'FaChevronDown';
+
+FaChevronDown.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaChevronDown;

app/components/icons/faChevronLeft.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaChevronLeft = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 320 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
+  </svg>
+);
+
+FaChevronLeft.displayName = 'FaChevronLeft';
+
+FaChevronLeft.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaChevronLeft;

app/components/icons/faChevronRight.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaChevronRight = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 320 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+  </svg>
+);
+
+FaChevronRight.displayName = 'FaChevronRight';
+
+FaChevronRight.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaChevronRight;

app/components/icons/faChevronUp.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaChevronUp = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 448 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
+  </svg>
+);
+
+FaChevronUp.displayName = 'FaChevronUp';
+
+FaChevronUp.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaChevronUp;

app/components/icons/faCircleCheck.jsx

@@ -0,0 +1,30 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaCircleCheck = ({ height, width, checkColor = 'white' }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241"></path>
+    <path
+      fill={checkColor}
+      d="M256 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+    ></path>
+  </svg>
+);
+
+FaCircleCheck.displayName = 'FaCircleCheck';
+
+FaCircleCheck.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  checkColor: PropTypes.string,
+};
+
+export default FaCircleCheck;

app/components/icons/faClose.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaClose = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path>
+  </svg>
+);
+
+FaClose.displayName = 'FaClose';
+
+FaClose.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaClose;

app/components/icons/faCog.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaCog = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
+  </svg>
+);
+
+FaCog.displayName = 'FaCog';
+
+FaCog.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaCog;