From 448c60c8a38bd7bf211e869090fe7faf7bfb543d Mon Sep 17 00:00:00 2001
From: Hannah <76073097+hannahouazzane@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:16:42 +0100
Subject: [PATCH] feat: improve style on 404 page

---
 .../{HomeTop.js => FullScreenHeader.js}       |  6 +-
 src/pages/404.js                              | 71 ++++++++++++++-----
 src/pages/index.js                            |  6 +-
 3 files changed, 59 insertions(+), 24 deletions(-)
 rename src/components/{HomeTop.js => FullScreenHeader.js} (84%)

diff --git a/src/components/HomeTop.js b/src/components/FullScreenHeader.js
similarity index 84%
rename from src/components/HomeTop.js
rename to src/components/FullScreenHeader.js
index 52b78fe4..88a5ddeb 100644
--- a/src/components/HomeTop.js
+++ b/src/components/FullScreenHeader.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const HomeTop = ({ children }) => (
+const FullScreenHeader = ({ children }) => (
   <div className="top">
     {children}
 
@@ -33,8 +33,8 @@ const HomeTop = ({ children }) => (
     `}</style>
   </div>
 )
-HomeTop.propTypes = {
+FullScreenHeader.propTypes = {
   children: PropTypes.node,
 }
 
-export default HomeTop
+export default FullScreenHeader
diff --git a/src/pages/404.js b/src/pages/404.js
index 7b13003e..8af2cfb9 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,30 +1,65 @@
 import React from 'react'
-
 import Layout from '../components/Layout'
 import ConstrainedWidth from '../components/Layout/ConstrainedWidth'
-import Text from '../components/Text'
+import VerticalSpacing from '../components/VerticalSpacing'
 import PageMeta from '../components/PageMeta'
+import Container from '../components/Container'
+import FullScreenHeader from '../components/FullScreenHeader'
+import StyledLink from '../components/Button'
+
+import arcs from '../components/arcs.svg'
+import { fontSizes } from '../theme'
 
 const NotFoundPage = () => (
   <Layout>
-    <PageMeta title="Not Found" />
-    <ConstrainedWidth>
-      <div className="accessibility-centered">
-        <h1>404 Page Not Found</h1>
-
-        <p>
-          <Text size="large">
-            <i>++?????++ Out of Cheese Error. Redo From Start.</i>
-          </Text>
-        </p>
-      </div>
-    </ConstrainedWidth>
+    <PageMeta title="Page not found" />
+    <FullScreenHeader>
+      <ConstrainedWidth>
+        <Container justifyContent="space-around" mobileFlexDirection="column">
+          <div className="page-not-found-text">
+            <h1>Sorry this page does not exist.</h1>
+
+            <VerticalSpacing size={5} />
+
+            <StyledLink connect="/" background="black" border_color="#48e9ce">
+              Return to home page
+            </StyledLink>
+          </div>
+          <img
+            src={arcs}
+            height={200}
+            width={200}
+            alt="Decorative neon pink & blue arc icon"
+          />
+        </Container>
+
+        <VerticalSpacing size={6} />
+      </ConstrainedWidth>
+    </FullScreenHeader>
 
     <style jsx>{`
-      .accessibility-centered {
-        text-align: center;
-        display: flex;
-        flex-direction: column-reverse;
+      .page-not-found-text {
+        max-width: 700px;
+      }
+
+      h1 {
+        font-size: ${fontSizes['title']};
+      }
+
+      img {
+        align-self: center;
+      }
+
+      @media (max-width: 860px) {
+        h1 {
+          font-size: ${fontSizes['xlarge']};
+        }
+        .page-not-found-text {
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+          align-items: center;
+        }
       }
     `}</style>
   </Layout>
diff --git a/src/pages/index.js b/src/pages/index.js
index 65ed8877..66368aa4 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,13 +6,13 @@ import Smile from '../components/Smile'
 import VerticalSpacing from '../components/VerticalSpacing'
 import PageMeta from '../components/PageMeta'
 import StyledLink from '../components/Button'
-import HomeTop from '../components/HomeTop'
+import FullScreenHeader from '../components/FullScreenHeader'
 import { fontSizes } from '../theme'
 
 const IndexPage = () => (
   <Layout>
     <PageMeta title="Welcome" />
-    <HomeTop>
+    <FullScreenHeader>
       <ConstrainedWidth>
         <>
           <h1>
@@ -146,7 +146,7 @@ const IndexPage = () => (
           `}</style>
         </section>
       </ConstrainedWidth>
-    </HomeTop>
+    </FullScreenHeader>
   </Layout>
 )