Add 404 page #10

Lena created

Change summary

webui/public/logo-alpha-flat-outline.svg  |  2 +
webui/src/App.tsx                         |  2 +
webui/src/components/Header/Header.tsx    |  7 ----
webui/src/pages/notfound/NotFoundPage.tsx | 37 +++++++++++++++++++++++++
4 files changed, 41 insertions(+), 7 deletions(-)

Detailed changes

webui/src/App.tsx 🔗 

@@ -5,6 +5,7 @@ import Layout from './components/Header';
 import BugPage from './pages/bug';
 import ListPage from './pages/list';
 import NewBugPage from './pages/new/NewBugPage';
+import NotFoundPage from './pages/notfound/NotFoundPage';
 
 export default function App() {
   return (
@@ -13,6 +14,7 @@ export default function App() {
         <Route path="/" exact component={ListPage} />
         <Route path="/new" exact component={NewBugPage} />
         <Route path="/bug/:id" exact component={BugPage} />
+        <Route component={NotFoundPage} />
       </Switch>
     </Layout>
   );

webui/src/components/Header/Header.tsx 🔗 

@@ -29,13 +29,6 @@ const useStyles = makeStyles((theme) => ({
     height: '42px',
     marginRight: theme.spacing(2),
   },
-  greenButton: {
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
-    '&:hover': {
-      backgroundColor: '#2ea44f',
-    },
-  },
 }));
 
 function Header() {

webui/src/pages/notfound/NotFoundPage.tsx 🔗 

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  main: {
+    maxWidth: 1000,
+    margin: 'auto',
+    marginTop: theme.spacing(20),
+  },
+  logo: {
+    height: '350px',
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+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>
+    </main>
+  );
+}
+
+export default NotFoundPage;