From fadb031f7010354e57eda5c8e040fe370363fc27 Mon Sep 17 00:00:00 2001
From: Dhanush Adithya <s.dhanushadithya@gmail.com>
Date: Fri, 24 Jul 2020 16:54:01 +0000
Subject: [PATCH] ui(404): improve 404 page styling

---
 src/components/404LinkCorrection/index.tsx  |  8 +++++---
 src/components/404LinkCorrection/styles.tsx | 10 ++++++++++
 src/pages/404.tsx                           |  7 +++++--
 src/pages/archives/404.tsx                  |  7 +++++--
 src/pages/resources/404.tsx                 |  7 +++++--
 src/pages/styles.tsx                        | 21 +++++++++++++++++++++
 6 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/styles.tsx

diff --git a/src/components/404LinkCorrection/index.tsx b/src/components/404LinkCorrection/index.tsx
index c420c70..a8d4070 100644
--- a/src/components/404LinkCorrection/index.tsx
+++ b/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>
   )
 }
diff --git a/src/components/404LinkCorrection/styles.tsx b/src/components/404LinkCorrection/styles.tsx
index 34496dd..c7cd027 100644
--- a/src/components/404LinkCorrection/styles.tsx
+++ b/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;
+`
\ No newline at end of file
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 4891f4f..193c255 100644
--- a/src/pages/404.tsx
+++ b/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>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <SC.StyledDiv>
+          <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>
   )
 }
diff --git a/src/pages/archives/404.tsx b/src/pages/archives/404.tsx
index 7db240a..b949ce3 100644
--- a/src/pages/archives/404.tsx
+++ b/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>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <SC.StyledDiv>
+        <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
diff --git a/src/pages/resources/404.tsx b/src/pages/resources/404.tsx
index b8fbe40..bf47f64 100644
--- a/src/pages/resources/404.tsx
+++ b/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>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <SC.StyledDiv>
+        <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
diff --git a/src/pages/styles.tsx b/src/pages/styles.tsx
new file mode 100644
index 0000000..2acd9b6
--- /dev/null
+++ b/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;
+`
\ No newline at end of file