From 95f8010fece514c5d040deb67f996a4cab4564de Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 7 Aug 2020 04:35:42 -0400
Subject: [PATCH] ui(404): improve styling of 404 page

---
 src/components/404LinkCorrection/index.tsx  |  6 +++---
 src/components/404LinkCorrection/styles.tsx |  8 +++-----
 src/components/FourZeroFour/index.tsx       | 15 +++++++--------
 src/components/FourZeroFour/styles.tsx      |  5 +++++
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/404LinkCorrection/index.tsx b/src/components/404LinkCorrection/index.tsx
index a8d4070..a93c146 100644
--- a/src/components/404LinkCorrection/index.tsx
+++ b/src/components/404LinkCorrection/index.tsx
@@ -95,13 +95,13 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
   })
 
   // helpful message if no matches found
-  const found = displayArray.length === 0 ? <SC.StyledFound>Oops, nothing similar found.</SC.StyledFound> : ""
+  const found = displayArray.length === 0 && "Oops, nothing similar found."
 
   return (
     <Fragment>
       <SC.StyledDiv>
-          <h3>Based off of "{search}" you may have meant:</h3>
-          {found}
+        <h3>Based off of "{search}" you may have meant:</h3>
+        {found}
       </SC.StyledDiv>
       <ul>
         {displayArray.map((value, index) => {
diff --git a/src/components/404LinkCorrection/styles.tsx b/src/components/404LinkCorrection/styles.tsx
index c7cd027..4dbcb2f 100644
--- a/src/components/404LinkCorrection/styles.tsx
+++ b/src/components/404LinkCorrection/styles.tsx
@@ -14,13 +14,11 @@ 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
+  flex-direction: column;
+`
diff --git a/src/components/FourZeroFour/index.tsx b/src/components/FourZeroFour/index.tsx
index d6b3580..5535c14 100644
--- a/src/components/FourZeroFour/index.tsx
+++ b/src/components/FourZeroFour/index.tsx
@@ -7,14 +7,13 @@ interface IPossibleCorrections {
 
 export const FourZeroFour: FC<IPossibleCorrections> = ({ children }) => {
   return (
-    <Fragment>
-      <SC.Wrapper>
-        <SC.Title>NOT FOUND</SC.Title>
-        <SC.Text>
-          You just hit a route that doesn&#39;t exist... the sadness.
-        </SC.Text>
-      </SC.Wrapper>
+    <SC.Wrapper>
+      <SC.Title>NOT FOUND</SC.Title>
+      <SC.Text>
+        You just hit a route that doesn&#39;t exist... the sadness.
+      </SC.Text>
+      {children && <SC.Spacer />}
       {children}
-    </Fragment>
+    </SC.Wrapper>
   )
 }
diff --git a/src/components/FourZeroFour/styles.tsx b/src/components/FourZeroFour/styles.tsx
index 9ae75a0..da34959 100644
--- a/src/components/FourZeroFour/styles.tsx
+++ b/src/components/FourZeroFour/styles.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components"
 
 export const Wrapper = styled.div`
+  width: 100%;
   padding: 100px 20px 20px 20px;
   display: flex;
   align-items: center;
@@ -19,3 +20,7 @@ export const Text = styled.p`
   padding: 10px;
   line-height: 2rem;
 `
+
+export const Spacer = styled.div`
+  height: 32px;
+`