feat: add account tabs (#378)

* feat: add account tabs

* chore: bump

* refactor: change network tab for old accounting

* feat: new fonts and text transformation, chequebook tab

* feat: polishing

src/components/SideBar.tsx

@@ -1,11 +1,13 @@
+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 type { ReactElement } from 'react'
-import { Bookmark, BookOpen, Briefcase, DollarSign, FileText, Gift, Home, Layers, Settings } from 'react-feather'
+import { ReactElement, useContext } from 'react'
+import { BookOpen, Briefcase, DollarSign, FileText, Home, Settings } from 'react-feather'
 import { Link } from 'react-router-dom'
 import Logo from '../assets/logo.svg'
 import { config } from '../config'
+import { Context } from '../providers/Bee'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
@@ -22,35 +24,22 @@ const navBarItems = [
     icon: FileText,
   },
   {
-    label: 'Feeds',
-    path: ROUTES.FEEDS,
-    icon: Bookmark,
+    label: 'Account',
+    path: ROUTES.ACCOUNT_WALLET,
+    icon: Briefcase,
+    pathMatcherSubstring: '/account/',
   },
   {
-    label: 'Stamps',
-    path: ROUTES.STAMPS,
-    icon: Layers,
-  },
-  {
-    label: 'Accounting',
-    path: ROUTES.ACCOUNTING,
+    label: 'Top Up',
+    path: ROUTES.WALLET,
     icon: DollarSign,
+    requiresMode: BeeModes.ULTRA_LIGHT,
   },
   {
     label: 'Settings',
     path: ROUTES.SETTINGS,
     icon: Settings,
   },
-  {
-    label: 'Account',
-    path: ROUTES.WALLET,
-    icon: Briefcase,
-  },
-  {
-    label: 'Gift Wallets',
-    path: ROUTES.GIFT_CODES,
-    icon: Gift,
-  },
 ]
 
 const drawerWidth = 300
@@ -103,6 +92,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
+  const { nodeInfo } = useContext(Context)
 
   return (
     <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
@@ -114,16 +104,19 @@ export default function SideBar(): ReactElement {
         </Grid>
         <Grid>
           <List>
-            {navBarItems.map(p => (
-              <Link to={p.path} key={p.path} className={classes.link}>
-                <SideBarItem
-                  key={p.path}
-                  iconStart={<p.icon className={classes.icon} />}
-                  path={p.path}
-                  label={p.label}
-                />
-              </Link>
-            ))}
+            {navBarItems
+              .filter(p => !p.requiresMode || nodeInfo?.beeMode === p.requiresMode)
+              .map(p => (
+                <Link to={p.path} key={p.path} className={classes.link}>
+                  <SideBarItem
+                    key={p.path}
+                    iconStart={<p.icon className={classes.icon} />}
+                    path={p.path}
+                    pathMatcherSubstring={p.pathMatcherSubstring}
+                    label={p.label}
+                  />
+                </Link>
+              ))}
           </List>
           <Divider className={classes.divider} />
           <List>

src/components/SideBarItem.tsx

@@ -1,8 +1,7 @@
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
 import type { ReactElement, ReactNode } from 'react'
-import { useLocation, matchPath } from 'react-router-dom'
-
-import { createStyles, Theme, makeStyles, withStyles } from '@material-ui/core/styles'
-import { ListItemText, ListItemIcon, ListItem } from '@material-ui/core'
+import { matchPath, useLocation } from 'react-router-dom'
 
 const StyledListItem = withStyles((theme: Theme) => ({
   root: {
@@ -45,12 +44,15 @@ interface Props {
   iconEnd?: ReactNode
   path?: string
   label: ReactNode
+  pathMatcherSubstring?: string
 }
 
-export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
+export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
   const classes = useStyles()
   const location = useLocation()
-  const isSelected = Boolean(path && matchPath(location.pathname, path))
+  const isSelected = pathMatcherSubstring
+    ? location.pathname.startsWith(pathMatcherSubstring)
+    : Boolean(path && matchPath(location.pathname, path))
 
   return (
     <StyledListItem button selected={isSelected} disableRipple>

src/components/SwarmButton.tsx

@@ -16,7 +16,7 @@ interface Props {
 const useStyles = makeStyles(() =>
   createStyles({
     button: {
-      height: '52px',
+      height: '42px',
       position: 'relative',
       whiteSpace: 'nowrap',
       color: '#242424',