diff --git a/src/App.css b/src/App.css index ed35209..9be78c6 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 67633b5..745e4de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import {BrowserRouter as Router} from 'react-router-dom'; +import { BrowserRouter as Router } from 'react-router-dom'; import './App.css'; import { createMuiTheme } from '@material-ui/core/styles'; @@ -11,14 +11,27 @@ import BaseRouter from './routes/routes'; declare global { interface Window { - ethereum: {}; - web3: {}; + ethereum: {}; + web3: {}; } } 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', @@ -78,7 +92,7 @@ function App() { return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => { toggleThemeMode(e.matches ? "dark" : "light") }) - + }, []); return ( diff --git a/src/assets/fonts/IBMPlexMono500.ttf b/src/assets/fonts/IBMPlexMono500.ttf new file mode 100644 index 0000000..cd02e15 Binary files /dev/null and b/src/assets/fonts/IBMPlexMono500.ttf differ diff --git a/src/assets/fonts/IBMPlexMono500.woff b/src/assets/fonts/IBMPlexMono500.woff new file mode 100644 index 0000000..3fb3849 Binary files /dev/null and b/src/assets/fonts/IBMPlexMono500.woff differ diff --git a/src/assets/fonts/IBMPlexMono600.ttf b/src/assets/fonts/IBMPlexMono600.ttf new file mode 100644 index 0000000..e485804 Binary files /dev/null and b/src/assets/fonts/IBMPlexMono600.ttf differ diff --git a/src/assets/fonts/IBMPlexMono600.woff b/src/assets/fonts/IBMPlexMono600.woff new file mode 100644 index 0000000..f30e58f Binary files /dev/null and b/src/assets/fonts/IBMPlexMono600.woff differ diff --git a/src/assets/fonts/IBMPlexMonoRegular.woff b/src/assets/fonts/IBMPlexMonoRegular.woff new file mode 100644 index 0000000..000a393 Binary files /dev/null and b/src/assets/fonts/IBMPlexMonoRegular.woff differ diff --git a/src/assets/fonts/IBMPlexMonoregular.ttf b/src/assets/fonts/IBMPlexMonoregular.ttf new file mode 100644 index 0000000..f99c8e9 Binary files /dev/null and b/src/assets/fonts/IBMPlexMonoregular.ttf differ diff --git a/src/assets/fonts/SourceCodePro-Medium.ttf b/src/assets/fonts/SourceCodePro-Medium.ttf new file mode 100644 index 0000000..6450399 Binary files /dev/null and b/src/assets/fonts/SourceCodePro-Medium.ttf differ diff --git a/src/assets/fonts/SourceCodePro-Regular.ttf b/src/assets/fonts/SourceCodePro-Regular.ttf new file mode 100644 index 0000000..3563e73 Binary files /dev/null and b/src/assets/fonts/SourceCodePro-Regular.ttf differ diff --git a/src/assets/fonts/SourceCodePro-SemiBold.ttf b/src/assets/fonts/SourceCodePro-SemiBold.ttf new file mode 100644 index 0000000..526be56 Binary files /dev/null and b/src/assets/fonts/SourceCodePro-SemiBold.ttf differ diff --git a/src/assets/fonts/SpaceMono-Bold.ttf b/src/assets/fonts/SpaceMono-Bold.ttf new file mode 100644 index 0000000..18b8aea Binary files /dev/null and b/src/assets/fonts/SpaceMono-Bold.ttf differ diff --git a/src/assets/fonts/SpaceMono-Regular.ttf b/src/assets/fonts/SpaceMono-Regular.ttf new file mode 100644 index 0000000..3374aca Binary files /dev/null and b/src/assets/fonts/SpaceMono-Regular.ttf differ diff --git a/src/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf b/src/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..dd9d85c Binary files /dev/null and b/src/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf differ diff --git a/src/assets/fonts/WorkSans-VariableFont_wght.ttf b/src/assets/fonts/WorkSans-VariableFont_wght.ttf new file mode 100644 index 0000000..34f0583 Binary files /dev/null and b/src/assets/fonts/WorkSans-VariableFont_wght.ttf differ diff --git a/src/assets/fonts/WorkSans500.woff b/src/assets/fonts/WorkSans500.woff new file mode 100644 index 0000000..afd29fb Binary files /dev/null and b/src/assets/fonts/WorkSans500.woff differ diff --git a/src/assets/fonts/WorkSansRegular.woff b/src/assets/fonts/WorkSansRegular.woff new file mode 100644 index 0000000..5de8ad6 Binary files /dev/null and b/src/assets/fonts/WorkSansRegular.woff differ diff --git a/src/assets/swarm-logo-orange.svg b/src/assets/swarm-logo-orange.svg new file mode 100644 index 0000000..4f98f54 --- /dev/null +++ b/src/assets/swarm-logo-orange.svg @@ -0,0 +1,35 @@ + + + + + + image/svg+xml + + Swarm Logo & Lettering 4 + + + + + + + + Swarm Logo & Lettering 4 + + + + + + + + + + + + diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 960c7ad..8dac247 100644 --- a/src/components/NavBar.tsx +++ b/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 (
- - +
+ -
-
- switchTheme()}> +
+
+ switchTheme()}> {props.themeMode === 'dark' ? - - : - + + : + } {/*
- +
); } diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 5bc1235..9280916 100644 --- a/src/components/SideBar.tsx +++ b/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 + return case 'file-text': - return + return case 'dollar-sign': - return + return case 'share-2': - return + return case 'settings': - return + return } } @@ -99,43 +103,42 @@ export default function SideBar(props: any) { }} anchor="left" > -
- - swarm - +
+ + swarm +
- - {navBarItems.map(item => ( - - - - { getIcon(item.icon) } - - - - - ))} + {navBarItems.map(item => ( + + + + {getIcon(item.icon)} + + + + + ))} - - - - - - + + + + + + -
+
-
-
- API -
-
-
- Debug API -
+
+
+ API +
+
+
+ Debug API +
diff --git a/src/index.css b/src/index.css index fd9684c..e06e7b5 100644 --- a/src/index.css +++ b/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;