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

* some stylistic changes

* a links now orange and readable

* better buttons, links and fonts

src/App.css

@@ -1,3 +1,34 @@
+@font-face {
+  font-family: "IBMPlexMono500";
+  src: url(assets/fonts/IBMPlexMono500.ttf) format('truetype');
+  font-weight: 500;
+}
+@font-face {
+  font-family: "IBMPlexMono600";
+  src: url(assets/fonts/IBMPlexMono600.ttf) format('truetype');
+  font-weight: 600;
+}
+@font-face {
+  font-family: "IBMPlexMonoregular";
+  src: url(assets/fonts/IBMPlexMonoregular.ttf) format('truetype');
+  font-weight: 300;
+}
+@font-face {
+  font-family: "WorkSans-Italic-VariableFont_wght";
+  src: url(assets/fonts/WorkSans-Italic-VariableFont_wght.ttf) format('truetype');
+  font-weight: 700;
+}
+@font-face {
+  font-family: "WorkSans-VariableFont_wght";
+  src: url(assets/fonts/WorkSans-VariableFont_wght.ttf) format('truetype');
+  font-weight: 400;
+}
+
 .App {
   font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
 }
+
+a, button {  
+  font-family: "IBMPlexMono500" !important;
+  color: #dd7700;
+}

src/App.tsx

@@ -17,8 +17,21 @@ declare global {
 }
 
 const lightTheme = createMuiTheme({
+  palette: {
+    type: "light",
+    background: {
+      default: '#fafafa',
+    },
+    primary: {
+      main: '#6a6a6a',
+    },
+    secondary: {
+      main: '#333333',
+    },
+  },
   typography: {
     fontFamily: [
+      'Work Sans',
       'Montserrat',
       'Nunito',
       'Roboto',
@@ -38,7 +51,7 @@ const darkTheme = createMuiTheme({
     },
     primary: {
       // light: will be calculated from palette.primary.main,
-      main: '#5e72e4' //'#3f51b5',
+      main: '#dd7700' //'#3f51b5',
       // dark: will be calculated from palette.primary.main,
       // contrastText: will be calculated to contrast with palette.primary.main
     },
@@ -48,6 +61,7 @@ const darkTheme = createMuiTheme({
   },
   typography: {
     fontFamily: [
+      'Work Sans',
       'Montserrat',
       'Nunito',
       'Roboto',

src/assets/swarm-logo-orange.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 230.07104 58.680001" version="1.1" id="svg28566" sodipodi:docname="swarm-logo.svg" inkscape:version="1.0.1 (3bc2e81, 2020-09-07)" width="230.07104" height="58.68">
+  <metadata id="metadata28570">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title>Swarm Logo &amp;amp; Lettering 4</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1016" id="namedview28568" showgrid="false" inkscape:zoom="3.1325" inkscape:cx="123.33" inkscape:cy="35.939998" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="Layer_2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
+  <defs id="defs28540">
+    <style id="style28538">
+      .cls-1 {
+        fill: #fafafa;
+      }
+      .cls-2 {
+        fill: #dd7200;
+      }
+    </style>
+  </defs>
+  <title id="title28542">Swarm Logo &amp;amp; Lettering 4</title>
+  <g id="Layer_2" data-name="Layer 2" transform="translate(-76.67,-71.05)">
+    <path class="cls-2" d="m 206.24,90.06 -3.54,24.65 c 0,0 -0.06,0 -0.07,0 l -3.1,-24.65 c 0,0 0,0 0,0 h -8.82 l -3.11,24.65 c 0,0 -0.06,0 -0.07,0 l -3.54,-24.65 h -5.38 c 0,0 0,0 0,0 L 183,118.6 h 8.8 L 195.05,94 c 0,0 0.06,0 0.07,0 l 3.21,24.61 h 8.81 l 4.49,-28.53 h -5.37 c 0,0 -0.02,-0.08 -0.02,-0.02 z" id="path28546"/>
+    <path class="cls-2" d="m 305,91.39 a 6.52,6.52 0 0 0 -5.19,-2.14 6.74,6.74 0 0 0 -6.33,3.75 v 0 a 5.85,5.85 0 0 0 -1.86,-2.62 5.61,5.61 0 0 0 -3.62,-1.13 6.26,6.26 0 0 0 -3.55,1 5.78,5.78 0 0 0 -2,2.45 v -2.64 c 0,0 0,0 0,0 h -5.24 c 0,0 0,0 0,0 v 28.53 h 5.24 v -19.5 a 5.72,5.72 0 0 1 1,-3.5 3.14,3.14 0 0 1 2.7,-1.25 2.85,2.85 0 0 1 2.3,1 4.08,4.08 0 0 1 0.89,2.73 v 20.5 c 0,0 0,0 0,0 h 5.25 V 99.42 a 6.08,6.08 0 0 1 1,-3.89 3.22,3.22 0 0 1 2.61,-1.19 2.75,2.75 0 0 1 2.44,1 4.9,4.9 0 0 1 0.81,2.92 v 20.28 c 0,0 0,0 0,0 h 5.28 V 96.86 A 8.18,8.18 0 0 0 305,91.39 Z" id="path28548"/>
+    <path class="cls-2" d="m 243.47,115.52 -3.32,3.71 h -0.05 l -5.86,-5.07 c 0,0 0,0 0,0 l -7,4.09 a 7.38,7.38 0 0 1 -3.77,1 7.91,7.91 0 0 1 -5.34,-2.13 7.28,7.28 0 0 1 -2.3,-5.45 7.54,7.54 0 0 1 3.82,-6.58 L 233.76,97 c 0,0 0,0 0,0 v -1.8 h -16.53 c 0,0 0,0 0,0 v -5 c 0,0 0,0 0,0 h 21.57 v 21.36 c 0,0 0,0 0,0 l 4.62,4 z m -18.8,-1.66 9.09,-5.28 c 0,0 0,0 0,0 v -5.7 a 0.03,0 0 0 0 -0.06,0 l -11.58,6.65 a 2.46,2.46 0 0 0 -1.29,2.2 2.59,2.59 0 0 0 2.53,2.53 2.51,2.51 0 0 0 1.31,-0.4 z" id="path28550"/>
+    <path class="cls-2" d="m 268.75,92 a 9.1,9.1 0 0 0 -6.67,-2.78 9,9 0 0 0 -7.48,3.64 l -3.34,-3.06 a 0.025,0 0 0 0 -0.05,0 l -3.29,3.67 4.74,4.3 v 15.7 h -4.71 c 0,0 0,0 0,0 v 4.93 h 17 c 0,0 0,0 0,0 v -4.93 h -7.19 V 98.93 a 4.61,4.61 0 0 1 4,-4.66 4.45,4.45 0 0 1 4.87,4.42 v 1.64 c 0,0 0,0 0,0 h 4.93 c 0,0 0,0 0,0 V 98.69 A 9.1,9.1 0 0 0 268.75,92 Z" id="path28552"/>
+    <path class="cls-2" d="m 173.32,106.74 a 5.41,5.41 0 0 0 -1.5,-2 6.58,6.58 0 0 0 -2.36,-1.44 15.31,15.31 0 0 0 -2.72,-1 c -0.94,-0.25 -2,-0.52 -3.08,-0.73 a 15.43,15.43 0 0 1 -4.88,-1.64 2.85,2.85 0 0 1 -1.51,-2.47 2.81,2.81 0 0 1 1.35,-2.59 5.91,5.91 0 0 1 4.4,-0.76 8.68,8.68 0 0 1 3.86,2.11 c 0.23,0.19 2.51,2.3 2.47,2.35 l 3.29,-3.73 c 0,0 -1.58,-1.6 -2.33,-2.26 a 13,13 0 0 0 -6.31,-3.24 12.18,12.18 0 0 0 -7.23,1.1 9.58,9.58 0 0 0 -1.67,1.09 7.57,7.57 0 0 0 -2.88,6.1 c 0,2.6 0.82,4.45 2.5,5.66 a 17.33,17.33 0 0 0 6.73,2.73 25.41,25.41 0 0 1 5.53,1.65 2.29,2.29 0 0 1 1.59,2.23 3.36,3.36 0 0 1 -1.62,3 8.35,8.35 0 0 1 -8.24,0 19.32,19.32 0 0 1 -2.85,-2.27 c -0.71,-0.6 -1.38,-1.25 -2.07,-1.89 v 0 l -3.2,3.85 c 0,0 1.56,1.46 1.7,1.58 a 15.66,15.66 0 0 0 7.41,4.21 15.26,15.26 0 0 0 3.16,0.32 12.45,12.45 0 0 0 7.85,-2.45 8.17,8.17 0 0 0 3.27,-6.83 6.14,6.14 0 0 0 -0.66,-2.68 z" id="path28554"/>
+    <polygon class="cls-2" points="76.67,122.17 90.14,129.73 103.61,122.17 103.61,107.08 90.14,99.51 76.67,107.08 " id="polygon28556"/>
+    <polygon class="cls-2" points="121.2,71.05 114.08,75.05 114.07,75.11 114.07,83.1 121.2,87.1 121.26,87.13 128.38,83.14 128.38,75.08 " id="polygon28558"/>
+    <polygon class="cls-2" points="134.44,107.08 120.97,99.51 107.5,107.08 107.5,122.17 120.97,129.73 134.44,122.17 " id="polygon28560"/>
+    <polygon class="cls-2" points="105.45,73.16 92,80.72 92,95.81 105.47,103.37 118.94,95.81 118.94,89.8 112.38,86.12 110.61,85.13 110.61,83.1 110.61,76.24 " id="polygon28562"/>
+  </g>
+</svg>

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: {
 
@@ -40,7 +39,7 @@ export default function SideBar(props: any) {
 
   return (
     <div>
-      <AppBar position="fixed" className={classes.appBar}>
+      <div style={{ display: 'fixed' }} className={classes.appBar}>
         <Toolbar style={{ display: 'flex' }}>
           <Chip
             style={{ marginLeft: '7px' }}
@@ -64,7 +63,7 @@ export default function SideBar(props: any) {
             </div>
           </div>
         </Toolbar>
-      </AppBar>
+      </div>
     </div>
   );
 }

src/components/SideBar.tsx

@@ -2,11 +2,12 @@ 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;
@@ -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,
   }),
@@ -99,12 +103,11 @@ export default function SideBar(props: any) {
         }}
         anchor="left"
       >
-        <div className={classes.toolbar} style={{ textAlign:'center' }}>
+        <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
           <Link to='/'>
-                <img alt='swarm' src={props.themeMode === 'light' ? SwarmLogo : SwarmLogoWhite} style={{maxHeight: '60px', alignItems:'center'}} /> 
+            <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' }}>

src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;