th-202: Implement the 404 page according to the design (#206)

* th-202: + styled 404 page

* th-202: * import fix

* th-202: - removed unnecessary svg

* th-166: * fixed paths

* th-166: * link changed to button

* th-202: * changed navigate route

* th-202: * fix import

* th-202: * fix styles import

Author: DmytroVoronkov

frontend/src/pages/not-found/not-found.tsx

@@ -1,18 +1,27 @@
-import { Link } from '~/libs/components/components.js';
+import { Button } from '~/libs/components/components.js';
 import { AppRoute } from '~/libs/enums/enums.js';
+import { useCallback, useNavigate } from '~/libs/hooks/hooks.js';
 
-const NotFound = (): JSX.Element => (
-  <div>
-    <h2>
-      Oops, the dreaded <span>404</span>.
-    </h2>
+import styles from './styles.module.scss';
 
-    <p>Let&apos;s get you back on track.</p>
+const NotFound = (): JSX.Element => {
+  const navigate = useNavigate();
 
-    <Link to={AppRoute.ROOT}>
-      <span>Back to Home page</span>
-    </Link>
-  </div>
-);
+  const handleClick = useCallback(() => {
+    navigate(AppRoute.ROOT);
+  }, [navigate]);
+
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.code}>404</h1>
+      <p className={styles.message}>OOPS! PAGE NOT FOUND</p>
+      <Button
+        className={styles.link}
+        label="GO TO HOMEPAGE"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
 
 export { NotFound };

frontend/src/pages/not-found/styles.module.scss

@@ -0,0 +1,40 @@
+@import "src/assets/css/vars.scss";
+
+.page {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: $blue-dark;
+  background-image: url("../../assets/img/auth-page-bg.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.code {
+  color: $white;
+  font-weight: $font-weight-extrabold;
+  font-size: 220px;
+  font-family: $font-family;
+}
+
+.message {
+  margin-bottom: 40px;
+  color: $white;
+  font-weight: $font-weight-bold;
+  font-size: 28px;
+  font-family: $font-family;
+}
+
+.link {
+  padding: 15px;
+  color: $white;
+  font-size: 16px;
+  font-family: $font-family;
+  background-color: $red-dark;
+  border-radius: 5px;
+  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 40%);
+  cursor: pointer;
+}