404 style

src/pages/NotFound/__tests__/NotFound.tsx

@@ -1,21 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from "@testing-library/react"
-import { MemoryRouter } from "react-router-dom"
-
-import NotFound from "../index"
-
-describe("<NotFound />", () => {
-    it("renders", () => {
-        const tree = render(
-            <MemoryRouter>
-                {/*
-          @ts-expect-error */}
-                <NotFound />
-            </MemoryRouter>
-        ).container.firstChild
-
-        expect(tree).toMatchSnapshot()
-    })
-})

src/pages/NotFound/__tests__/__snapshots__/NotFound.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NotFound /> renders 1`] = `
-<div
-  class="NotFound"
->
-  <p>
-    Oops, Page was not found!
-  </p>
-</div>
-`;

src/pages/NotFound/index.tsx

@@ -13,9 +13,11 @@ const NotFound = ({ staticContext }: Props) => {
     if (staticContext) staticContext.statusCode = 404
 
     return (
-        <div className={styles.NotFound}>
-            <Helmet title="Oops" />
-            <p>Oops, Page was not found!</p>
+        <div className={styles.notFoundPage}>
+            <div className={styles.notFoundContent}>
+                <Helmet title="Oops" />
+                <p>Oops, page was not found!</p>
+            </div>
         </div>
     )
 }

src/pages/NotFound/styles.module.scss

@@ -1,3 +1,9 @@
-.NotFound {
-    padding: 0 15px;
+@import "../../theme/mixins";
+
+.notFoundPage {
+    @include page-wrapper-center;
+}
+
+.notFoundContent {
+    @include page-content-wrapper;
 }