diff --git a/package-lock.json b/package-lock.json index 4daee15..5110e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "BSD-3-Clause", "dependencies": { "@ethersphere/bee-js": "1.2.0", - "@material-ui/core": "4.11.4", + "@material-ui/core": "4.12.3", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.57", "@types/react-router": "5.1.13", @@ -2881,13 +2881,13 @@ } }, "node_modules/@material-ui/core": { - "version": "4.11.4", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", - "integrity": "sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", + "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==", "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/styles": "^4.11.4", - "@material-ui/system": "^4.11.3", + "@material-ui/system": "^4.12.1", "@material-ui/types": "5.1.0", "@material-ui/utils": "^4.11.2", "@types/react-transition-group": "^4.2.0", @@ -26696,13 +26696,13 @@ } }, "@material-ui/core": { - "version": "4.11.4", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.4.tgz", - "integrity": "sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==", + "version": "4.12.3", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", + "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==", "requires": { "@babel/runtime": "^7.4.4", "@material-ui/styles": "^4.11.4", - "@material-ui/system": "^4.11.3", + "@material-ui/system": "^4.12.1", "@material-ui/types": "5.1.0", "@material-ui/utils": "^4.11.2", "@types/react-transition-group": "^4.2.0", diff --git a/package.json b/package.json index 8c1349c..a0c26f0 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@ethersphere/bee-js": "1.2.0", - "@material-ui/core": "4.11.4", + "@material-ui/core": "4.12.3", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.57", "@types/react-router": "5.1.13", diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..418dca7 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/swarm-logo-1-white.png b/src/assets/swarm-logo-1-white.png deleted file mode 100644 index c74fdce..0000000 Binary files a/src/assets/swarm-logo-1-white.png and /dev/null differ diff --git a/src/assets/swarm-logo-1.svg b/src/assets/swarm-logo-1.svg deleted file mode 100644 index eefa27b..0000000 --- a/src/assets/swarm-logo-1.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - image/svg+xml - - Swarm Logo & Lettering 4 - - - - - - - - Swarm Logo & Lettering 4 - - - - - - - - - - - - diff --git a/src/assets/swarm-logo-2-white.png b/src/assets/swarm-logo-2-white.png deleted file mode 100644 index 74b3d2f..0000000 Binary files a/src/assets/swarm-logo-2-white.png and /dev/null differ diff --git a/src/assets/swarm-logo-2.svg b/src/assets/swarm-logo-2.svg deleted file mode 100644 index 2b7daaa..0000000 --- a/src/assets/swarm-logo-2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/swarm-logo-orange.svg b/src/assets/swarm-logo-orange.svg deleted file mode 100644 index 4f98f54..0000000 --- a/src/assets/swarm-logo-orange.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - image/svg+xml - - Swarm Logo & Lettering 4 - - - - - - - - Swarm Logo & Lettering 4 - - - - - - - - - - - - diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index b632537..5500bef 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,50 +1,44 @@ -import { ReactElement } from 'react' -import { Link, useLocation } from 'react-router-dom' +import type { ReactElement } 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 { OpenInNewSharp } from '@material-ui/icons' -import { Home, FileText, DollarSign, Share2, Settings, Layers } from 'react-feather' +import { Divider, List, Drawer, Grid, Link as MUILink } from '@material-ui/core' +import { Home, FileText, DollarSign, Share2, Settings, Layers, BookOpen } from 'react-feather' import { ROUTES } from '../routes' +import SideBarItem from './SideBarItem' +import SideBarStatus from './SideBarStatus' -import SwarmLogoOrange from '../assets/swarm-logo-orange.svg' - -const drawerWidth = 240 +import Logo from '../assets/logo.svg' const navBarItems = [ { label: 'Info', - id: 'info', path: ROUTES.INFO, icon: Home, }, { label: 'Files', - id: 'files', path: ROUTES.FILES, icon: FileText, }, { label: 'Stamps', - id: 'stamps', path: ROUTES.STAMPS, icon: Layers, }, { label: 'Accounting', - id: 'accounting', path: ROUTES.ACCOUNTING, icon: DollarSign, }, { label: 'Peers', - id: 'peers', path: ROUTES.PEERS, icon: Share2, }, { label: 'Settings', - id: 'settings', path: ROUTES.SETTINGS, icon: Settings, }, @@ -53,108 +47,82 @@ const navBarItems = [ const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - display: 'flex', - }, - appBar: { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: drawerWidth, + flexWrap: 'nowrap', + minHeight: '100vh', + paddingTop: theme.spacing(8), + paddingBottom: theme.spacing(8), }, logo: { - padding: 1, - marginTop: 20, + marginLeft: theme.spacing(8), + marginRight: theme.spacing(8), }, - drawer: { - width: drawerWidth, - flexShrink: 0, + icon: { + height: theme.spacing(4), }, - drawerPaper: { - width: drawerWidth, + iconSmall: { + height: theme.spacing(2), }, - activeSideBar: { - color: '#dd7700', + divider: { + backgroundColor: '#2c2c2c', + marginLeft: theme.spacing(4), + marginRight: theme.spacing(4), }, - activeSideBarItem: { - borderLeft: '4px solid #dd7700', - backgroundColor: 'inherit !important', + link: { + color: '#9f9f9f', + textDecoration: 'none', + '&:hover': { + textDecoration: 'none', + + // https://github.com/mui-org/material-ui/issues/22543 + '@media (hover: none)': { + textDecoration: 'none', + }, + }, }, - toolbar: theme.mixins.toolbar, }), ) -interface Props { - isOk: boolean -} - -export default function SideBar(props: Props): ReactElement { +export default function SideBar(): ReactElement { const classes = useStyles() - const location = useLocation() return ( -
- -
+ + + - swarm + swarm -
- - {navBarItems.map(item => ( - - - - - - + + + {navBarItems.map(p => ( + + } + path={p.path} + label={p.label} /> - - - ))} - - - - - - - - - - -
- - - + ))} + + + + + } + iconEnd={} + label={Docs} /> - Node {props.isOk ? 'OK' : 'Error'} - + + + + + + -
- -
+ + + ) } diff --git a/src/components/SideBarItem.tsx b/src/components/SideBarItem.tsx new file mode 100644 index 0000000..3148dca --- /dev/null +++ b/src/components/SideBarItem.tsx @@ -0,0 +1,62 @@ +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' + +const StyledListItem = withStyles((theme: Theme) => ({ + root: { + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(4), + borderLeft: '4px solid rgba(0,0,0,0)', + '&.Mui-selected, &.Mui-selected:hover': { + borderLeft: `4px solid ${theme.palette.primary.main}`, + backgroundColor: '#2c2c2c', + color: '#f9f9f9', + }, + }, + button: { + '&:hover': { + backgroundColor: '#2c2c2c', + color: '#f9f9f9', + + // https://github.com/mui-org/material-ui/issues/22543 + '@media (hover: none)': { + backgroundColor: '#2c2c2c', + color: '#f9f9f9', + }, + }, + }, +}))(ListItem) + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + icon: { + color: 'inherit', + }, + activeIcon: { + color: theme.palette.primary.main, + }, + }), +) + +interface Props { + iconStart?: ReactNode + iconEnd?: ReactNode + path?: string + label: ReactNode +} + +export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement { + const classes = useStyles() + const location = useLocation() + const isSelected = Boolean(matchPath(location.pathname, { path, exact: true })) + + return ( + + {iconStart} + + {iconEnd} + + ) +} diff --git a/src/components/SideBarStatus.tsx b/src/components/SideBarStatus.tsx new file mode 100644 index 0000000..b2c8c4f --- /dev/null +++ b/src/components/SideBarStatus.tsx @@ -0,0 +1,85 @@ +import { ReactElement, useContext } from 'react' +import { useLocation, matchPath } from 'react-router-dom' +import { ArrowRight } from 'react-feather' + +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles' +import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core' +import { Context } from '../providers/Bee' + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + icon: { + color: 'inherit', + }, + iconSmall: { + height: theme.spacing(2), + }, + + root: { + height: theme.spacing(4), + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(4), + color: '#f9f9f9', + borderLeft: '0px solid rgba(0,0,0,0)', + '&.Mui-selected, &.Mui-selected:hover': { + borderLeft: `0px solid ${theme.palette.primary.main}`, + backgroundColor: '#2c2c2c', + }, + }, + rootError: { + backgroundColor: 'rgba(255, 58, 82, 0.25)', + }, + button: { + '&:hover': { + backgroundColor: '#2c2c2c', + + // https://github.com/mui-org/material-ui/issues/22543 + '@media (hover: none)': { + backgroundColor: '#2c2c2c', + }, + }, + }, + smallerText: { + fontSize: '0.9rem', + }, + }), +) + +interface Props { + path?: string +} + +export default function SideBarItem({ path }: Props): ReactElement { + const { status } = useContext(Context) + const classes = useStyles() + const location = useLocation() + const isSelected = Boolean(matchPath(location.pathname, { path, exact: true })) + + return ( + + + + + {`Node ${status.all ? 'OK' : 'Error'}`}} + /> + + {status.all ? null : } + + + ) +} diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 9fbc06e..92d3c85 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -12,7 +12,7 @@ import { Context } from '../providers/Bee' const useStyles = makeStyles((theme: Theme) => createStyles({ content: { - marginLeft: '240px', + marginLeft: 300, flexGrow: 1, backgroundColor: theme.palette.background.default, padding: theme.spacing(3), @@ -28,11 +28,11 @@ interface Props { const Dashboard = (props: Props): ReactElement => { const classes = useStyles() - const { isLoading, status } = useContext(Context) + const { isLoading } = useContext(Context) return (
- +
diff --git a/src/theme.tsx b/src/theme.tsx index 67bcc36..f8ee6a4 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -9,6 +9,12 @@ declare module '@material-ui/core/styles/createPalette' { // Overwriting default components styles const componentsOverrides = (theme: Theme) => ({ + MuiDrawer: { + paper: { + width: 300, + backgroundColor: '#212121', + }, + }, MuiTab: { root: { backgroundColor: 'transparent',