Merge pull request #305 from the-programmers-hangout/ui-fix-404-styling

ui: fix 404 styling

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) => {

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;
-`
+  flex-direction: column;
+`

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>
   )
 }

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;
+`