ui(404): improve 404 page styling

src/components/404LinkCorrection/index.tsx

@@ -95,11 +95,14 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
   })
 
   // helpful message if no matches found
-  const found = displayArray.length === 0 ? "Oops, nothing similar found." : ""
+  const found = displayArray.length === 0 ? <SC.StyledFound>Oops, nothing similar found.</SC.StyledFound> : ""
 
   return (
     <Fragment>
-      <h3>Based off of "{search}" you may have meant:</h3>
+      <SC.StyledDiv>
+          <h3>Based off of "{search}" you may have meant:</h3>
+          {found}
+      </SC.StyledDiv>
       <ul>
         {displayArray.map((value, index) => {
           return (
@@ -111,7 +114,6 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
           )
         })}
       </ul>
-      {found}
     </Fragment>
   )
 }

src/components/404LinkCorrection/styles.tsx

@@ -14,3 +14,13 @@ export const StyledLink = styled(Link)`
     transition: none;
   }
 `
+export const StyledFound = styled.div`
+  margin: 13px 10px 10px;
+  padding: 10px;
+`
+export const StyledDiv = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

src/pages/404.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from "react"
+import * as SC from "./styles"
 
 import { SEO } from "../components/SEO"
 
@@ -6,8 +7,10 @@ function NotFoundPage() {
   return (
     <Fragment>
       <SEO title="404: Not found" />
-      <h1>NOT FOUND</h1>
+      <SC.StyledDiv>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+          <SC.StyledH1>NOT FOUND</SC.StyledH1>
+          <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+      </SC.StyledDiv>
     </Fragment>
   )
 }

src/pages/archives/404.tsx

@@ -1,6 +1,7 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
@@ -11,8 +12,10 @@ import { PossibleCorrections } from "../../components/404LinkCorrection"
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Archive Not found" />
-    <h1>RESOURCE NOT FOUND</h1>
+    <SC.StyledDiv>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+    </SC.StyledDiv>
     <Location>
       {({ location }) => (
         <PossibleCorrections

src/pages/resources/404.tsx

@@ -1,6 +1,7 @@
 import { Location } from "@reach/router"
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import * as SC from "../styles"
 
 import { FileConnection } from "../../../generated/graphql"
 import { ComponentQuery } from "../../../typings"
@@ -10,8 +11,10 @@ import { SEO } from "../../components/SEO"
 export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Resource Not found" />
-    <h1>RESOURCE NOT FOUND</h1>
+    <SC.StyledDiv>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+        <SC.StyledH1>RESOURCE NOT FOUND</SC.StyledH1>
+        <SC.StyledPara>You just hit a route that doesn&#39;t exist... the sadness.</SC.StyledPara>
+    </SC.StyledDiv>
     <Location>
       {({ location }) => (
         <PossibleCorrections

src/pages/styles.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components"
+
+export const StyledDiv = styled.div`
+    width: 100%;
+    padding: 20px;
+    padding-top: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`
+export const StyledH1 = styled.h1`
+    margin: 0;
+    padding: 10px;
+    line-height: 2.5rem;
+`
+export const StyledPara = styled.p`
+    margin: 0;
+    padding: 10px;
+    line-height: 2rem;
+`