feat: troubleshooting component (#204)

* feat: troubleshooting component and general layout improvements

* style: background color, links and button

* chore: disable ripples and rounded corners on buttons

* fix: spacing on the troubleshooting card

src/components/SideBar.tsx

@@ -44,6 +44,8 @@ const navBarItems = [
   },
 ]
 
+const drawerWidth = 300
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -52,6 +54,14 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingTop: theme.spacing(8),
       paddingBottom: theme.spacing(8),
     },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+    drawerPaper: {
+      width: drawerWidth,
+      backgroundColor: '#212121',
+    },
     logo: {
       marginLeft: theme.spacing(8),
       marginRight: theme.spacing(8),
@@ -86,7 +96,7 @@ export default function SideBar(): ReactElement {
   const classes = useStyles()
 
   return (
-    <Drawer variant="permanent">
+    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
       <Grid container direction="column" justifyContent="space-between" className={classes.root}>
         <Grid className={classes.logo}>
           <Link to={ROUTES.INFO}>

src/components/TopologyStats.tsx

@@ -40,8 +40,7 @@ const Indicator = ({ thresholds }: Props): ReactElement => {
 }
 
 const Metrics = ({ topology, thresholds }: Props): ReactElement => (
-  <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
+  <Grid container spacing={3} style={{ marginBottom: '20px' }}>
-    <Grid container spacing={3}>
     <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
       <StatCard
         label="Connected Peers"
@@ -60,7 +59,6 @@ const Metrics = ({ topology, thresholds }: Props): ReactElement => (
       <StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
     </Grid>
   </Grid>
-  </Grid>
 )
 
 export default TopologyStats

src/components/TroubleshootConnectionCard.tsx

@@ -1,48 +1,65 @@
 import type { ReactElement } from 'react'
 import { Link } from 'react-router-dom'
 
-import { makeStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
+import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
 import { ROUTES } from '../routes'
+import { Activity } from 'react-feather'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
     root: {
-    flexGrow: 1,
+      height: '100%',
-    marginTop: '20px',
     },
-  title: {
+    content: {
-    textAlign: 'center',
+      maxWidth: 500,
-    fontSize: 26,
+      marginBottom: theme.spacing(4),
+      '&:last-child': {
+        marginBottom: 0,
       },
-})
+    },
+    icon: {
+      height: '1rem',
+    },
+  }),
+)
 
 export default function TroubleshootConnectionCard(): ReactElement {
   const classes = useStyles()
 
   return (
-    <Card className={classes.root}>
+    <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
-      <CardContent>
+      <Grid item className={classes.content}>
-        <Typography className={classes.title} gutterBottom>
+        <Typography variant="h1" align="center">
-          Looks like your node is not connected
+          Uh oh, it looks like your node is not connected.
         </Typography>
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+      </Grid>
-          <strong>
+      <Grid item className={classes.content}>
-            <Link to={ROUTES.STATUS}>Click to run status checks</Link> on your nodes connection or check out the{' '}
+        <Typography align="center">
-            <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          Please check your node status to fix the problem. You can also check out the{' '}
+          <MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
             Swarm Bee Docs
-            </a>
+          </MuiLink>{' '}
-          </strong>
+          or ask for support on the{' '}
-        </div>
+          <MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
-
+            Ethereum Swarm Discord
-        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+          </MuiLink>
-          <p style={{ marginTop: '50px' }}>
+          .
-            Still not working? Drop us a message on the Ethereum Swarm{' '}
+        </Typography>
-            <a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+      </Grid>
-              Discord
+      <Grid item className={classes.content}>
-            </a>
+        <Typography align="center">
-          </p>
+          <Button
-        </div>
+            component={Link}
-      </CardContent>
+            variant="contained"
-    </Card>
+            size="large"
+            startIcon={<Activity className={classes.icon} />}
+            to={ROUTES.STATUS}
+          >
+            Check node status
+          </Button>
+        </Typography>
+      </Grid>
+    </Grid>
   )
 }

src/layout/Dashboard.tsx

@@ -12,11 +12,8 @@ import { Context } from '../providers/Bee'
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     content: {
-      marginLeft: 300,
-      flexGrow: 1,
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
+      minHeight: '100vh',
-      paddingBottom: '65px',
     },
   }),
 )
@@ -31,20 +28,22 @@ const Dashboard = (props: Props): ReactElement => {
   const { isLoading } = useContext(Context)
 
   return (
-    <div>
+    <div style={{ display: 'flex' }}>
       <SideBar />
+      <Container className={classes.content}>
         <ErrorBoundary>
-        <main className={classes.content}>
+          <>
             <AlertVersion />
             {isLoading ? (
-            <Container style={{ textAlign: 'center', padding: '50px' }}>
+              <div style={{ textAlign: 'center', width: '100%' }}>
                 <CircularProgress />
-            </Container>
+              </div>
             ) : (
               props.children
             )}
-        </main>
+          </>
         </ErrorBoundary>
+      </Container>
     </div>
   )
 }

src/pages/peers/PeerTable.tsx

@@ -59,7 +59,6 @@ function PeerTable(props: Props): ReactElement {
   }
 
   return (
-    <div>
     <TableContainer component={Paper}>
       <Table className={classes.table}>
         <TableHead>
@@ -88,7 +87,6 @@ function PeerTable(props: Props): ReactElement {
         </TableBody>
       </Table>
     </TableContainer>
-    </div>
   )
 }
 

src/pages/settings/index.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, useState, useContext } from 'react'
+import { ReactElement, useState, useContext } from 'react'
-import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
+import { Paper, TextField, Typography, Button } from '@material-ui/core'
 import { Context as SettingsContext } from '../../providers/Settings'
 
 export default function Settings(): ReactElement {
@@ -16,8 +16,7 @@ export default function Settings(): ReactElement {
   const touched = host !== apiUrl || debugHost !== apiDebugUrl
 
   return (
-    <div>
+    <>
-      <Container>
       <Typography variant="h4" gutterBottom>
         Settings
       </Typography>
@@ -64,7 +63,6 @@ export default function Settings(): ReactElement {
           </Button>
         </div>
       ) : null}
-      </Container>
+    </>
-    </div>
   )
 }

src/theme.tsx

@@ -9,10 +9,55 @@ declare module '@material-ui/core/styles/createPalette' {
 
 // Overwriting default components styles
 const componentsOverrides = (theme: Theme) => ({
-  MuiDrawer: {
+  MuiContainer: {
-    paper: {
+    root: { padding: theme.spacing(8) },
-      width: 300,
+    maxWidthXs: { padding: theme.spacing(8) },
-      backgroundColor: '#212121',
+    maxWidthSm: { padding: theme.spacing(8) },
+    maxWidthMd: { padding: theme.spacing(8) },
+    maxWidthLg: { padding: theme.spacing(8) },
+    maxWidthXl: { padding: theme.spacing(8) },
+  },
+  MuiButton: {
+    textSizeLarge: {
+      padding: theme.spacing(2),
+    },
+    containedSizeLarge: {
+      padding: theme.spacing(2),
+      boxShadow: 'none',
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+    },
+    contained: {
+      backgroundColor: 'white',
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.primary.main,
+          color: 'white',
+          boxShadow: 'none',
+        },
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      '&:active': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
     },
   },
   MuiTab: {
@@ -59,13 +104,16 @@ const propsOverrides = {
   MuiTab: {
     disableRipple: true,
   },
+  MuiButtonBase: {
+    disableRipple: true,
+  },
 }
 
 export const theme = createMuiTheme({
   palette: {
     type: 'light',
     background: {
-      default: '#fafafa',
+      default: '#efefef',
     },
     primary: {
       light: orange.A200,
@@ -78,6 +126,10 @@ export const theme = createMuiTheme({
   },
   typography: {
     fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
+    h1: {
+      fontSize: '1.3rem',
+      fontWeight: 500,
+    },
   },
 })