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 = ({ }) // helpful message if no matches found - const found = displayArray.length === 0 ? "Oops, nothing similar found." : "" + const found = displayArray.length === 0 ? Oops, nothing similar found. : "" return ( -

Based off of "{search}" you may have meant:

+ +

Based off of "{search}" you may have meant:

+ {found} +
- {found}
) } 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 ( -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

+ + NOT FOUND + You just hit a route that doesn't exist... the sadness. +
) } 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 }>) => ( -

RESOURCE NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

+ + RESOURCE NOT FOUND + You just hit a route that doesn't exist... the sadness. + {({ location }) => ( ) => ( -

RESOURCE NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

+ + RESOURCE NOT FOUND + You just hit a route that doesn't exist... the sadness. + {({ location }) => (