style: improved styling to match Swarm branding (#23)

* some stylistic changes

* a links now orange and readable

* better buttons, links and fonts

src/components/NavBar.tsx

@@ -12,7 +12,6 @@ const useStyles = makeStyles((theme: Theme) =>
     appBar: {
       width: `calc(100% - ${drawerWidth}px)`,
       marginLeft: drawerWidth,
-      background:'linear-gradient(35deg,#fb6340,#fbb140)!important'
     },
     network: {
 
@@ -31,7 +30,7 @@ export default function SideBar(props: any) {
     } else {
       localStorage.setItem('theme', darkMode ? 'dark' : 'light')
     }
-    
+
     toggleDarkMode(!darkMode)
     window.location.reload()
   }
@@ -40,21 +39,21 @@ export default function SideBar(props: any) {
 
   return (
     <div>
-      <AppBar position="fixed" className={classes.appBar}>
-        <Toolbar style={{display: 'flex'}}>
+      <div style={{ display: 'fixed' }} className={classes.appBar}>
+        <Toolbar style={{ display: 'flex' }}>
           <Chip
-          style={{ marginLeft: '7px'}}
-          size="small"
-          label='Goerli'
-          className={classes.network}
+            style={{ marginLeft: '7px' }}
+            size="small"
+            label='Goerli'
+            className={classes.network}
           />
-          <div style={{width:'100%'}}>
-            <div style={{float:'right'}} >
-              <IconButton style={{marginRight:'10px'}} aria-label="dark-mode" onClick={() => switchTheme()}>
+          <div style={{ width: '100%' }}>
+            <div style={{ float: 'right' }} >
+              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
                 {props.themeMode === 'dark' ?
-                <Moon />
-                :
-                <Sun />
+                  <Moon />
+                  :
+                  <Sun />
                 }
               </IconButton>
               {/* <Chip 
@@ -64,7 +63,7 @@ export default function SideBar(props: any) {
             </div>
           </div>
         </Toolbar>
-      </AppBar>
+      </div>
     </div>
   );
 }

src/components/SideBar.tsx

@@ -2,46 +2,47 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
-import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink} from '@material-ui/core';
+import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink, ListItemSecondaryAction } from '@material-ui/core';
 import { OpenInNewSharp } from '@material-ui/icons';
-import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather';
+import { Activity, FileText, DollarSign, Share2, Settings, AlignJustify } from 'react-feather';
 
 import SwarmLogo from '../assets/swarm-logo-2.svg';
+import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
 import SwarmLogoWhite from '../assets/swarm-logo-2-white.png';
 
 const drawerWidth = 240;
 
 const navBarItems = [
-    {
-        'label': 'Status',
-        'id': 'status',
-        'path': '/',
-        'icon': 'activity'
-    },
-    {
-        'label': 'Files',
-        'id': 'files',
-        'path': '/files/',
-        'icon': 'file-text'
-    },
-    {
-        'label': 'Accounting',
-        'id': 'accounting',
-        'path': '/accounting/',
-        'icon': 'dollar-sign'
-    },
-    {
-        'label': 'Peers',
-        'id': 'peers',
-        'path': '/peers/',
-        'icon': 'share-2'
-    },
-    {
-        'label': 'Settings',
-        'id': 'settings',
-        'path': '/settings/',
-        'icon': 'settings'
-    }  
+  {
+    'label': 'Status',
+    'id': 'status',
+    'path': '/',
+    'icon': 'activity'
+  },
+  {
+    'label': 'Files',
+    'id': 'files',
+    'path': '/files/',
+    'icon': 'file-text'
+  },
+  {
+    'label': 'Accounting',
+    'id': 'accounting',
+    'path': '/accounting/',
+    'icon': 'dollar-sign'
+  },
+  {
+    'label': 'Peers',
+    'id': 'peers',
+    'path': '/peers/',
+    'icon': 'share-2'
+  },
+  {
+    'label': 'Settings',
+    'id': 'settings',
+    'path': '/settings/',
+    'icon': 'settings'
+  }
 ]
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -52,7 +53,10 @@ const useStyles = makeStyles((theme: Theme) =>
     appBar: {
       width: `calc(100% - ${drawerWidth}px)`,
       marginLeft: drawerWidth,
-      backgroundColor:'#dd7200'
+    },
+    logo: {
+      padding: 1,
+      marginTop: 20,
     },
     drawer: {
       width: drawerWidth,
@@ -62,10 +66,10 @@ const useStyles = makeStyles((theme: Theme) =>
       width: drawerWidth,
     },
     activeSideBar: {
-      color: '#fb6340',
+      color: '#dd7700',
     },
     activeSideBarItem: {
-      borderLeft: '4px solid #fb6340',
+      borderLeft: '4px solid #dd7700',
     },
     toolbar: theme.mixins.toolbar,
   }),
@@ -74,15 +78,15 @@ const useStyles = makeStyles((theme: Theme) =>
 const getIcon = (iconPath: string) => {
   switch (iconPath) {
     case 'activity':
-      return <Activity style={{height: '20px'}} />
+      return <Activity style={{ height: '20px' }} />
     case 'file-text':
-      return <FileText style={{height: '20px'}}  />
+      return <FileText style={{ height: '20px' }} />
     case 'dollar-sign':
-      return <DollarSign style={{height: '20px'}} />
+      return <DollarSign style={{ height: '20px' }} />
     case 'share-2':
-      return <Share2 style={{height: '20px'}} />
+      return <Share2 style={{ height: '20px' }} />
     case 'settings':
-      return <Settings style={{height: '20px'}} />
+      return <Settings style={{ height: '20px' }} />
   }
 }
 
@@ -99,43 +103,42 @@ export default function SideBar(props: any) {
         }}
         anchor="left"
       >
-        <div className={classes.toolbar} style={{ textAlign:'center' }}>
-            <Link to='/'>
-                <img alt='swarm' src={props.themeMode === 'light' ? SwarmLogo : SwarmLogoWhite} style={{maxHeight: '60px', alignItems:'center'}} /> 
-            </Link>
+        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
+          <Link to='/'>
+            <img alt='swarm' className={classes.logo} src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange} style={{ maxHeight: '30px', alignItems: 'center' }} />
+          </Link>
         </div>
-        <Divider />
         <List>
-            {navBarItems.map(item => (
-                <Link to={item.path}  key={item.id} style={{ color:'inherit', textDecoration:'none'}}>
-                    <ListItem button selected={props.location.pathname === item.path} className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}>
-                        <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
-                            { getIcon(item.icon) }
-                        </ListItemIcon>
-                        <ListItemText primary={item.label} className={props.location.pathname === item.path ? classes.activeSideBar : ''} />
-                    </ListItem>
-                </Link>
-            ))}
+          {navBarItems.map(item => (
+            <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
+              <ListItem button selected={props.location.pathname === item.path} className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}>
+                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
+                  {getIcon(item.icon)}
+                </ListItemIcon>
+                <ListItemText primary={item.label} className={props.location.pathname === item.path ? classes.activeSideBar : ''} />
+              </ListItem>
+            </Link>
+          ))}
         </List>
         <Divider />
         <List>
-            <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{textDecoration:'none'}}>
-                <ListItem button>
-                    <ListItemText primary={'Docs'} />
-                    <OpenInNewSharp fontSize="small" />
-                </ListItem>
-            </MUILink>
+          <MUILink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" style={{ textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary={'Docs'} />
+              <OpenInNewSharp fontSize="small" />
+            </ListItem>
+          </MUILink>
         </List>
-        <div style={{position:'fixed', bottom: 0, width: 'inherit', padding: '10px'}}>
+        <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
           <ListItem>
-              <div style={{marginRight:'30px'}}>
-                  <div style={{backgroundColor: props.health ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px',width: '10px', borderRadius: '50%', display: 'inline-block'}} />
-                  <span>API</span>
-              </div>
-              <div>
-                  <div style={{backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px',width: '10px', borderRadius: '50%', display: 'inline-block'}} />
-                  <span>Debug API</span>
-              </div>
+            <div style={{ marginRight: '30px' }}>
+              <div style={{ backgroundColor: props.health ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px', width: '10px', borderRadius: '50%', display: 'inline-block' }} />
+              <span>API</span>
+            </div>
+            <div>
+              <div style={{ backgroundColor: props.nodeHealth?.status === 'ok' ? '#32c48d' : '#c9201f', marginRight: '7px', height: '10px', width: '10px', borderRadius: '50%', display: 'inline-block' }} />
+              <span>Debug API</span>
+            </div>
           </ListItem>
         </div>
       </Drawer>