From a0aedf15631afebbf3e12f17ef9508772fd0582c Mon Sep 17 00:00:00 2001
From: Sudhanshu Gautam <me@sudhanshug.com>
Date: Wed, 13 Jan 2021 22:08:55 +0530
Subject: [PATCH] cleanup not-found component

---
 src/App.tsx                            |  2 +-
 src/containers/not-found/not-found.tsx | 30 +++++++++++---------------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0d9084e..661cc83 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,7 +29,7 @@ const App: FunctionComponent = () => {
           <Header />
           <Router>
             <Switch>
-              <Route path="" component={Home} />
+              <Route path="" exact component={Home} />
               <Route default component={NotFound} />
             </Switch>
           </Router>
diff --git a/src/containers/not-found/not-found.tsx b/src/containers/not-found/not-found.tsx
index f5c959f..2b74e12 100644
--- a/src/containers/not-found/not-found.tsx
+++ b/src/containers/not-found/not-found.tsx
@@ -1,25 +1,19 @@
 import React, { FunctionComponent } from 'react';
-import { Container, Paper, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Container, Link, Paper, Typography } from '@material-ui/core';
 
-const page404Styles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(3, 2),
-  },
-}));
-
-const NotFound: FunctionComponent = () => {
-  const classes = page404Styles();
-  return (
-    <Container style={{ marginTop: '50px' }}>
-      <Paper className={classes.root} elevation={3}>
+const NotFound: FunctionComponent = () => (
+  <Container style={{ marginTop: '50px' }}>
+    <Paper elevation={3}>
+      <Box padding={3}>
         <Typography variant="h5" component="h3">
           404 Page Not Found
         </Typography>
-        <Typography component="p">Please head to the home.</Typography>
-      </Paper>
-    </Container>
-  );
-};
+        <Typography component="p">
+          Please head to the <Link href={process.env.PUBLIC_URL}>home</Link>.
+        </Typography>
+      </Box>
+    </Paper>
+  </Container>
+);
 
 export default NotFound;