aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages/notfound/NotFoundPage.tsx
diff options
context:
space:
mode:
authorLena <lena.becker-3@mni.thm.de>2021-02-28 04:15:21 +0100
committerSascha <GlancingMind@outlook.com>2021-03-15 16:35:14 +0100
commit4dcc6f67b37bf756c7afb7e40f700a838906113b (patch)
tree2ef5fe51406ac4737a5dbbbced78eb6f44068213 /webui/src/pages/notfound/NotFoundPage.tsx
parentcdf655f869bd0993b52f4268f058571740b1cf4d (diff)
downloadgit-bug-4dcc6f67b37bf756c7afb7e40f700a838906113b.tar.gz
Add backlink to 404 page #10
Diffstat (limited to 'webui/src/pages/notfound/NotFoundPage.tsx')
-rw-r--r--webui/src/pages/notfound/NotFoundPage.tsx42
1 files changed, 29 insertions, 13 deletions
diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index ae84ac3e..2aba9cef 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,19 +1,34 @@
+import wrap from '@arrows/composition/internal/wrap';
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
const useStyles = makeStyles((theme) => ({
main: {
maxWidth: 1000,
margin: 'auto',
- marginTop: theme.spacing(20),
+ marginTop: theme.spacing(10),
},
logo: {
height: '350px',
+ display: 'block',
+ marginLeft: 'auto',
+ marginRight: 'auto',
},
- container: {
- display: 'flex',
- alignItems: 'center',
+ icon: {
+ display: 'block',
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ fontSize: '80px',
+ },
+ backLink: {
+ textDecoration: 'none',
+ color: theme.palette.text.primary,
+ },
+ header: {
+ fontSize: '30px',
+ textAlign: 'center',
},
}));
@@ -21,15 +36,16 @@ function NotFoundPage() {
const classes = useStyles();
return (
<main className={classes.main}>
- <div className={classes.container}>
- <h1>404 – Page not found</h1>
- <img
- src="/logo-alpha-flat-outline.svg"
- className={classes.logo}
- alt="git-bug"
- />
- <h1>Go back to start page</h1>
- </div>
+ <h1 className={classes.header}>404 – Page not found</h1>
+ <img
+ src="/logo-alpha-flat-outline.svg"
+ className={classes.logo}
+ alt="git-bug"
+ />
+ <a href="/" className={classes.backLink}>
+ <h2 className={classes.header}>Go back to start page</h2>
+ <ArrowBackIcon className={classes.icon} />
+ </a>
</main>
);
}