feat: add updated sidebar icons (#407)

package-lock.json

@@ -41,6 +41,7 @@
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-syntax-highlighter": "15.4.4",
+        "remixicon-react": "^1.0.0",
         "semver": "7.3.5",
         "serve-handler": "6.1.3",
         "stream": "npm:stream-browserify",
@@ -17254,6 +17255,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/remixicon-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz",
+      "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==",
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -32959,6 +32968,12 @@
       "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
       "dev": true
     },
+    "remixicon-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/remixicon-react/-/remixicon-react-1.0.0.tgz",
+      "integrity": "sha512-KOXlc8EdKdujr2f/2idyFSQRjUB8p0HNiWZYBBzRsTRlTXFuSAFfnGq9culNjhCGmc92Jbtfr9OP0MXWvTMdsQ==",
+      "requires": {}
+    },
     "renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",

package.json

@@ -58,6 +58,7 @@
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
+    "remixicon-react": "^1.0.0",
     "semver": "7.3.5",
     "serve-handler": "6.1.3",
     "stream": "npm:stream-browserify",

src/components/SideBar.tsx

@@ -1,48 +1,44 @@
-import { BeeModes } from '@ethersphere/bee-js'
 import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { OpenInNewSharp } from '@material-ui/icons'
+import { ReactElement } from 'react'
-import { ReactElement, useContext } from 'react'
-import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
+import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
+import DocsIcon from 'remixicon-react/BookOpenLineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import HomeIcon from 'remixicon-react/Home3LineIcon'
+import SettingsIcon from 'remixicon-react/Settings2LineIcon'
+import AccountIcon from 'remixicon-react/Wallet3LineIcon'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { config } from '../config'
 import { useIsBeeDesktop } from '../hooks/apiHooks'
-import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
+import Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
-import Feedback from './Feedback'
 
 const navBarItems = [
   {
     label: 'Info',
     path: ROUTES.INFO,
-    icon: Home,
+    icon: HomeIcon,
   },
   {
     label: 'Files',
     path: ROUTES.UPLOAD,
-    icon: FileText,
+    icon: FilesIcon,
     pathMatcherSubstring: '/files/',
   },
   {
     label: 'Account',
     path: ROUTES.ACCOUNT_WALLET,
-    icon: Briefcase,
+    icon: AccountIcon,
     pathMatcherSubstring: '/account/',
   },
-  {
-    label: 'Top Up',
-    path: ROUTES.WALLET,
-    icon: DollarSign,
-    requiresMode: BeeModes.ULTRA_LIGHT,
-  },
   {
     label: 'Settings',
     path: ROUTES.SETTINGS,
-    icon: Settings,
+    icon: SettingsIcon,
   },
 ]
 
@@ -72,9 +68,6 @@ const useStyles = makeStyles((theme: Theme) =>
     icon: {
       height: theme.spacing(4),
     },
-    iconSmall: {
-      height: theme.spacing(2),
-    },
     divider: {
       backgroundColor: '#2c2c2c',
       marginLeft: theme.spacing(4),
@@ -97,7 +90,6 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
-  const { nodeInfo } = useContext(Context)
   const { isBeeDesktop } = useIsBeeDesktop()
 
   return (
@@ -110,9 +102,7 @@ export default function SideBar(): ReactElement {
         </Grid>
         <Grid>
           <List>
-            {navBarItems
+            {navBarItems.map(p => (
-              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
-              .map(p => (
               <Link to={p.path} key={p.path} className={classes.link}>
                 <SideBarItem
                   key={p.path}
@@ -128,8 +118,8 @@ export default function SideBar(): ReactElement {
           <List>
             <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
               <SideBarItem
-                iconStart={<BookOpen className={classes.icon} />}
+                iconStart={<DocsIcon className={classes.icon} />}
-                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
+                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
                 label={<span>Docs</span>}
               />
             </MUILink>