style: improved styling to match Swarm branding (#23)
* some stylistic changes * a links now orange and readable * better buttons, links and fonts
This commit is contained in:
Michelle Plur
GitHub
+31
@@ -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;
|
||||
}
|
||||
+19
-5
@@ -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 (
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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; 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; 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>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
+14
-15
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+73
-70
@@ -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>
|
||||
|
||||
+1
-1
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user