Merge pull request #633 from neontribe/fix-404-page

feat: improve style on 404 page
neontribe · Jul 3, 2024 · 3d98ce0 · 3d98ce0
2 parents 34ed4de + 448c60c
commit 3d98ce0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 24 deletions.
diff --git a/src/components/HomeTop.js → src/components/FullScreenHeader.js b/src/components/HomeTop.js → 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
@@ -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
@@ -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>
 )