Changed: use color icons in sidebar (experimental)

package.json

@@ -32,7 +32,7 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
+    "@babel/runtime": "^7.9.6",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
     "@sentry/browser": "^5.15.0",
     "chart.js": "^2.9.2",
@@ -50,32 +50,33 @@
     "react": "0.0.0-experimental-241c4467e",
     "react-dom": "0.0.0-experimental-241c4467e",
     "react-feather": "^2.0.3",
+    "react-icons": "^3.10.0",
     "react-modal": "^3.11.1",
     "react-router": "^6.0.0-alpha.1",
     "react-router-dom": "^6.0.0-alpha.1",
     "react-switch": "^5.0.1",
     "react-table": "7.0.0-rc.15",
     "react-tabs": "^3.1.0",
-    "react-tiny-fab": "^3.4.0",
+    "react-tiny-fab": "^3.4.1",
     "react-window": "^1.8.5",
     "regenerator-runtime": "^0.13.2",
     "reselect": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-proposal-do-expressions": "^7.7.4",
     "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.7.4",
     "@babel/preset-react": "^7.7.4",
     "@hsjs/react-refresh-webpack-plugin": "^0.1.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0",
     "@types/jest": "^25.2.1",
     "@types/react": "^16.9.34",
-    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "2.x",
+    "@typescript-eslint/parser": "^2.30.0",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "10.x",
     "babel-loader": "^8.0.5",
@@ -95,9 +96,9 @@
     "file-loader": "^6.0.0",
     "fork-ts-checker-notifier-webpack-plugin": "^2.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
-    "html-webpack-plugin": "^4.2.0",
+    "html-webpack-plugin": "^4.2.1",
     "husky": "^4.0.0",
-    "lint-staged": "^10.0.7",
+    "lint-staged": "^10.2.1",
     "mini-css-extract-plugin": "^0.9.0",
     "postcss-custom-media": "^7.0.8",
     "postcss-extend-rule": "^3.0.0",
@@ -108,9 +109,9 @@
     "prettier": "^2.0.4",
     "react-refresh": "^0.8.1",
     "resize-observer-polyfill": "^1.5.1",
-    "style-loader": "^1.1.2",
+    "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^2.3.1",
-    "ts-loader": "^7.0.1",
+    "ts-loader": "^7.0.2",
     "typescript": "^3.8.3",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",

src/components/SideBar.js

@@ -3,7 +3,15 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { motion } from 'framer-motion';
 import { Link, useLocation } from 'react-router-dom';
-import { Command, Activity, Globe, Link2, Settings, File } from 'react-feather';
+// import { Command, Activity, Globe, Link2, Settings, File } from 'react-feather';
+import {
+  FcAreaChart,
+  FcGlobe,
+  FcRuler,
+  FcDocument,
+  FcSettings,
+  FcLink,
+} from 'react-icons/fc';
 
 import { connect } from './StateProvider';
 import { getTheme, switchTheme } from '../store/app';
@@ -13,20 +21,31 @@ import s from './SideBar.module.css';
 
 const { useCallback } = React;
 
+// testing color icons
+
+// const icons = {
+//   activity: Activity,
+//   globe: Globe,
+//   command: Command,
+//   file: File,
+//   settings: Settings,
+//   link: Link2
+// };
+
 const icons = {
-  activity: Activity,
+  activity: FcAreaChart,
-  globe: Globe,
+  globe: FcGlobe,
-  command: Command,
+  command: FcRuler,
-  file: File,
+  file: FcDocument,
-  settings: Settings,
+  settings: FcSettings,
-  link: Link2
+  link: FcLink,
 };
 
 const SideBarRow = React.memo(function SideBarRow({
   isActive,
   to,
   iconId,
-  labelText
+  labelText,
 }) {
   const Comp = icons[iconId];
   const className = cx(s.row, isActive ? s.rowActive : null);
@@ -42,40 +61,40 @@ SideBarRow.propTypes = {
   isActive: PropTypes.bool.isRequired,
   to: PropTypes.string.isRequired,
   iconId: PropTypes.string,
-  labelText: PropTypes.string
+  labelText: PropTypes.string,
 };
 
 const pages = [
   {
     to: '/',
     iconId: 'activity',
-    labelText: 'Overview'
+    labelText: 'Overview',
   },
   {
     to: '/proxies',
     iconId: 'globe',
-    labelText: 'Proxies'
+    labelText: 'Proxies',
   },
   {
     to: '/rules',
     iconId: 'command',
-    labelText: 'Rules'
+    labelText: 'Rules',
   },
   {
     to: '/connections',
     iconId: 'link',
-    labelText: 'Conns'
+    labelText: 'Conns',
   },
   {
     to: '/configs',
     iconId: 'settings',
-    labelText: 'Config'
+    labelText: 'Config',
   },
   {
     to: '/logs',
     iconId: 'file',
-    labelText: 'Logs'
+    labelText: 'Logs',
-  }
+  },
 ];
 
 function SideBar({ dispatch, theme }) {
@@ -169,5 +188,5 @@ function Sun() {
   );
 }
 
-const mapState = s => ({ theme: getTheme(s) });
+const mapState = (s) => ({ theme: getTheme(s) });
 export default connect(mapState)(SideBar);