Vojtech Simetka
c4c1573263
* 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
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import type { ReactElement } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
|
import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
|
|
import { ROUTES } from '../routes'
|
|
import { Activity } from 'react-feather'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
root: {
|
|
height: '100%',
|
|
},
|
|
content: {
|
|
maxWidth: 500,
|
|
marginBottom: theme.spacing(4),
|
|
'&:last-child': {
|
|
marginBottom: 0,
|
|
},
|
|
},
|
|
icon: {
|
|
height: '1rem',
|
|
},
|
|
}),
|
|
)
|
|
|
|
export default function TroubleshootConnectionCard(): ReactElement {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
|
|
<Grid item className={classes.content}>
|
|
<Typography variant="h1" align="center">
|
|
Uh oh, it looks like your node is not connected.
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item className={classes.content}>
|
|
<Typography align="center">
|
|
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
|
|
</MuiLink>{' '}
|
|
or ask for support on the{' '}
|
|
<MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
|
|
Ethereum Swarm Discord
|
|
</MuiLink>
|
|
.
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item className={classes.content}>
|
|
<Typography align="center">
|
|
<Button
|
|
component={Link}
|
|
variant="contained"
|
|
size="large"
|
|
startIcon={<Activity className={classes.icon} />}
|
|
to={ROUTES.STATUS}
|
|
>
|
|
Check node status
|
|
</Button>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
}
|