From 28bbdfb2f6ef3f464627b6cee66d0deea54d269a Mon Sep 17 00:00:00 2001 From: Vojtech Simetka Date: Tue, 31 Aug 2021 11:27:38 +0200 Subject: [PATCH] style: sidebar styling (#194) * style: sidebar styling * style: hover and selected colors * chore: split the sidebar items into separate component * style: pretty much finished except for status button * feat: sidebar status button as a separate component * chore: spacing definition * style: size of the status text * fix: hiden navigation on small height screens --- package-lock.json | 18 ++-- package.json | 2 +- src/assets/logo.svg | 11 ++ src/assets/swarm-logo-1-white.png | Bin 4747 -> 0 bytes src/assets/swarm-logo-1.svg | 101 ------------------ src/assets/swarm-logo-2-white.png | Bin 14481 -> 0 bytes src/assets/swarm-logo-2.svg | 1 - src/assets/swarm-logo-orange.svg | 35 ------- src/components/SideBar.tsx | 164 ++++++++++++------------------ src/components/SideBarItem.tsx | 62 +++++++++++ src/components/SideBarStatus.tsx | 85 ++++++++++++++++ src/layout/Dashboard.tsx | 6 +- src/theme.tsx | 6 ++ 13 files changed, 243 insertions(+), 248 deletions(-) create mode 100644 src/assets/logo.svg delete mode 100644 src/assets/swarm-logo-1-white.png delete mode 100644 src/assets/swarm-logo-1.svg delete mode 100644 src/assets/swarm-logo-2-white.png delete mode 100644 src/assets/swarm-logo-2.svg delete mode 100644 src/assets/swarm-logo-orange.svg create mode 100644 src/components/SideBarItem.tsx create mode 100644 src/components/SideBarStatus.tsx 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 c74fdce37ba724531505bf545a4aad279b1f29b7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4747 zcmV;65_Ii}P)lZ=6WYd}14Puj`SP^PBpa?D61Ph`c+C)S}!6t$VLjLV4Dipg# z{EOPH1+7SFf>tQ~&|Qk6h;~z}$|`L=Gi3xGTf zYFcQ$6++0dAPAP^X}fgk(p$UTE&%fL4paKmcDp^lXV0EBhj;34x)Bq<5q;J#IXlJe zGR_Plc9FQZ5JF^(og#!hLI}A{MTAni*lxFvO-)T*OMj1|=tq>&&p3732mEh?ATViH zGfCHpcWv)9AWP$o?7Pl!3`1)R%V1<0v(xDuB!qyL+>Ma^wIB#?9}1ZLm+io;GMQE0 zK@57sn~Zy0S`nb-A~id8`eX;Mm!*W5>zl99iKp0uxWK0VZBnP0Irp?xrz)-++JVzQO*l5fVEwE;@7?EH{OLiz=GR7d(ac>kvdkV>A-js13@sU(tSeU~+PAmY^^MwV^d;9pRGEEQ!rc)pcQQ?$P$S zALW>lw1iQ{5d3B|He6A3&XIK_be7xp>1Uu=3Wef-~g6R6eV(hmUDhYUK84DhD8VD8PD^MU^aR| z@1(@rau5Wwn%^>O&-1)PX&)KSJ-%C6H-wWFPWX{@6W?0E#LjFD?HFT_8~m7+RB=Io z2F-+TdY3T<<~!`H`R8;H1aQB#@W7-~N?*3|q6$gDJB%^d-5*dbKAEOvG1^$r{;uOq zenB_^FQ-tfQxGTAFMaZ*= zTynURd#Oy_08@Yx##sO#fRj=R_kZQh#mb|}3K5$YY=i}kDJ&q&J!3*Cg%UdH zF~`aenA<@R+%=SVlL<{z@^oF|Vwf0)?WQb-%8+feAaEb&LJ$NHpH)7cPG^C04!3sl zPhvtTv=~l%6QY!%$_!35QK_$pog&ntDJsY~1EygU)ozIHvd?pP&GWn|oms235Nv(g zemBS{*=Q=rFneVv=MRSQVw*_;rpm+wnVc16QkGzn;pR=R*E?v^tkB-~{UfS5(3r}F zN)HHgt8l?U1va6DUQ?K3IuMsMh;|KO=2*P!pfSPHz-q>Ggpf0oQaD0@mIZ4=J{|xE zOS&_z#dN<8bI3UdD`+>uipttkN^cXsiCY!&Ti!Tey6*@Z4ouxyPN!X9h@vteoZ9 z#gz?heEFR~e?J1?g12>^hTLw-sNNMpHxm$Lu>RiBzMT@Qjl zSv;+}^agL1OlM9=5DrSqVEQnf^KG(aj6wKH-Y82z20nBeQ)}w$uR<#6>&8(Fbi^Wp z-3e=AU}S%t5CZ40k{1&5@+jJbIxZep)X5Ln$j6H z8&grUE(c)%wVP^v3S~?s%4m(5zDJYWO}ewS(YjJ?M&P9JeIMu*9t|+H8pnZY@yjIsN|FnrEsQJ~r)Kx+s~ zoGK&_pgOcS!hlA#$T;CohCz5(6$_OY2p0TyZWS&1T5Xn6`b3fylWt~;4ZFY>VlL9& zRKUc5T(_AaHKrPv{qd@Rd@cwAWqeh)rksEoMbZ6~Qn=x9H>LEYUavPFhT#j@U~&Q# z-agnR;ZNmx%F6(%ryn+D_C!&1L|mQ*$HOz-Zg*~GX6BVj3npg{xtMF22UFcCq+)@W zwRAH^B_9mmrmU0XeX;NrJ8t6SQGrg5Woj~phIX`x;|-k0QDsaqU{c9!2w)bDNSyO4 zDrIAx1Bs~$?W=3dOP4O)+3j`#kPj-%(_a8Ur>Cbcs1_hhP`lkerSXKpS?H)m`+iUW z@*c&+EbQF5b8gqJU2w*#_tEUyh~$E6gp(ysI8=974g)Dq)tG0J~HgTRZJ}-h%F|b>YH=>2|vf-!J*3MTn5b1SLhjgBA8L z?Zm=^bgWYN!$9{8d`PL=?Vfc>pvHtuG&^(xK9yr9?@h$ecafDi!a$m$-lMDWJ8TFr z5u0QM4d{9%bps}248RD$aB-XehY&Is1i|-o6AD^jeSLjJw?MC6z53=GH*P?`Uqvs9 z{$&460QA@B_bN8D#KUY;ZA->EuBri)yq5%V5bjW#$N1OeooTA%c@ zii8kbdkB4jgDeU7S3MVMEU{8hrz*%b^j(4G+TN@&8DsAgg|GUR>FRkvJAj$_R}(qL z*hj@?@a}rLC4_VSW6t^9^z`(<>Y}NmBRr$9IN?uk;z}C}2AnppX|~7*v@?yTaaLvL z9nGy0W%9Z_cI@pMRp?8>GpP!uIzc`$z=SVKudc4Xz1?mf=bV3bR127M{#~KP{wrw% zi2s4vTHbLH+A*W0cf;QlAGQ7ZsKzGK72j|HlWrD*{I;{GDJ>6ZC&}zR{zzUUOIlCX z7zIazym0feOcm&D{0NPwx+W&at(S#kuXIVgPB7I;Yhr*2Co{&_8-$RZV_3L_YzfBL zI|(7LCjGjA(1lS!7eYI}?|;DM)w3$llG3CpGn%mM_1?3RI?(gcE%86;=0sM61J zrmiZt#~3Qn+zIp@_0raEa&8Zcu*NV~3uXrQA9=BPR!2QZON24Pl$rYU_= zf^&YCuKb9`bDD%qG`|&0(M&7mHa`f5+;Yn;*Wx%Xg_%qyr6GS8W)PJ^sfz{IV#j4idrK)UIgpK3OXi_a7)N%_%exU`Ii zoC>xU1cCPEh(TMPjpO*JEfgeV2cK#z^-&c}W7nAWxMV%fAI4a{8dC=876PV}{V(lUFO`2H_NK z7SKckQ?A&+Nk7S7e)K7M?g<7?z|?~dqcH3mGd=M*h8}F4*P$_m=7PF9`M54rT{~pc z6ggljZ$lJJS%qn=IwwNN1e`0fX)G`B&c)6_-V=8O2lJN}1(Qo=C~sKg_%B_TGMV9~ z+a&Uw*%Hrnb3As9*=Gcw`D1Ud4wpCq(}n=^?{;8TrEhT_)d5V+9X{X~Rn$pn4KN+$ zgbkzlC^VJI3ku+ZNiCdN6-nx)i5Hisfe-nbp7PFM4w$9SF6wILh;WMbHi=@Yoi@1~ zPg^sN$s%FO+O*X0p3~ugIYj?;05i*y(OV75j2;m_fpZmvgj88n*0`bW9;hP!Sa)@) z6jBijTXsZM@yHg+a)7y>-6oOIXP-kT(Q!cM2osx|d?5lh3;EHS%yRu!n=aU}lsv1( zvIx1LOlk{MMS5C)z@4o=T2d3uLGoQ-gKkbaQ4bz~ltVZWbQ!?A7c1 z0rF}P^?^CaDICNxZO|S9lt8*JU;-^u4IkSuq~A+5U<~Idt5npkGqenJ3Zd7q;iN5jzyZ|RyATrRC(kQY? zivp%yn%fYV=G_Vp%sd_Y4mi-znzo|=Cd_}tqWy%EqoUZba_5&9s7U5kor}s#D(9hP zjDcxvGof88y$zIZ{~If%V$!O0?qJeeFTg9V(J4U*d~8`@s!EI0YRb9-lap6nZ)Mmw zM8*2Xq~swpcvSt1YhX}AHg)j8ISW7p`Jz`u{?1yx8be~r#m8C{H{oB+`ygtROxL+}^J@nRC*Le95Jc2K8Q zRk$nJtot7gD#+T>9xRYTna$+*RVy&fvcYT2D(Ex3Gb)W)Gn<>1oJgF2uU&!T<_h+% zsXSnyOW+**_4J{sGd60*9w zdQYp>0)T#~M1GLh_?-A$!k^q((7zEy(Z|Fm8BDpEKZDHxdnd9^{>DzL0pIvUo+1O8 zGFdBQsq+UzG>W26P)fnXok`nMN?+;qdUIhIK7*lAwM}xXfs^BelDFh&ydXZ!@KRN} z&3lamCRGAfjVUu8MbTHFO1daVSxO}u)j%&^ym)J`*8|OcKh%p2!|<1*>Z_sKNMNHS Z@P9XG`V{~7bhrQj002ovPDHLkV1mAS>h1sl 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 &amp; Lettering 4 - - - - - - - - Swarm Logo &amp; 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 74b3d2f60f001984ba715fd9b01a5ff214e57d76..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 14481 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 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 &amp; Lettering 4 - - - - - - - - Swarm Logo &amp; 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',