feat: 1520 404 page not found screen development

frontend/src/App.tsx

@@ -90,6 +90,11 @@ const App: React.FC = () => {
   const getBrowserRouter = () => {
     const selectedRoutes = selectBrowserRoutes();
     selectedRoutes.push(...sharedRoutes);
+    // Add a wildcard route to catch undefined routes and show the 404 page
+    selectedRoutes.push({
+      path: '*',
+      element: <FourOhFour />
+    });
     return createBrowserRouter(selectedRoutes);
   };
 
@@ -99,6 +104,11 @@ const App: React.FC = () => {
     browserRouter.navigate('/403');
   };
 
+  // Programmatic redirection to 404
+  // const handleRedirectTo404 = () => {
+  //   browserRouter.navigate('/404');
+  // };
+
   return (
     <ClassPrefix prefix={prefix}>
       <ThemePreference>

frontend/src/views/ErrorViews/FourOhFour/constants.ts

@@ -0,0 +1,7 @@
+export const fourOhFourTexts = {
+  title: 'Page not found',
+  supportText1: 'Oops! It looks like this page got lost in the forest.',
+  supportText2: 'This page doesn\'t exist or was removed.',
+  buttonLabel: 'Back to home',
+  altText: 'Cone confused while reading a map in forest'
+};

frontend/src/views/ErrorViews/FourOhFour/index.tsx

@@ -1,51 +1,60 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import {
+  FlexGrid, Row, Column,
+  Button
+} from '@carbon/react';
+import { Home } from '@carbon/icons-react';
+import Error404 from '../../../assets/img/SPAR_404_error.svg';
 import ROUTES from '../../../routes/constants';
-
-import mysteryImg from '../../../assets/img/404-mystery.png';
+import useWindowSize from '../../../hooks/UseWindowSize';
+import { fourOhFourTexts } from './constants';
+import { MEDIUM_SCREEN_WIDTH } from '../../../shared-constants/shared-constants';
 
 import './styles.scss';
 
 const FourOhFour = () => {
-  type linkType = {
-    href: string,
-    text: string
-  }
+  const navigate = useNavigate();
+  const windowSize = useWindowSize();
 
-  const links: linkType[] = [
-    {
-      href: ROUTES.DASHBOARD,
-      text: 'Dashboard'
-    },
-    {
-      href: ROUTES.SEEDLOTS,
-      text: 'Seedlots'
-    }
-  ];
   return (
-    <div className="fof-container">
-      <div className="fof-text">404</div>
-      <img src={mysteryImg} alt="" />
-      <div>
-        <h1>
-          Sorry, we can&apos;t find the page you are looking for.
-        </h1>
-        <h2>
-          Maybe some of these most visited links will help you?
-        </h2>
-        <div className="list">
+    <FlexGrid fullWidth className="four-oh-four-page">
+      <Row className="four-oh-four-row">
+        <Column sm={4} md={8} lg={6} xlg={6} max={8}>
+          <img
+            src={Error404}
+            alt={fourOhFourTexts.altText}
+            className="four-oh-four-img"
+          />
+        </Column>
+        <Column sm={4} md={8} lg={10} xlg={10} max={8}>
+          <h1>
+            {fourOhFourTexts.title}
+          </h1>
           {
-            links.map(({ href, text }) => (
-              <li key={text}>
-                <Link className="link" to={href}>
-                  <h3>{text}</h3>
-                </Link>
-              </li>
-            ))
+            windowSize.innerWidth > MEDIUM_SCREEN_WIDTH
+              ? (
+                <p>
+                  {fourOhFourTexts.supportText1}
+                </p>
+              )
+              : null
           }
-        </div>
-      </div>
-    </div>
+          <p>
+            {fourOhFourTexts.supportText2}
+          </p>
+          <Button
+            renderIcon={Home}
+            size="lg"
+            onClick={
+              () => navigate(ROUTES.ROOT)
+            }
+          >
+            {fourOhFourTexts.buttonLabel}
+          </Button>
+        </Column>
+      </Row>
+    </FlexGrid>
   );
 };
 

frontend/src/views/ErrorViews/FourOhFour/styles.scss

@@ -1,61 +1,55 @@
 @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
 @use '@carbon/type';
 
-.fof-container {
-  margin: 0;
-  max-width: 100%;
-  min-height: 100vh;
-  padding: 1rem;
-  background-color: rgb(131, 217, 200);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
+.four-oh-four-page {
   img {
-    width: 25%;
-    min-width: 21.875rem;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
   }
 
-  .list {
-    li {
-      list-style-type: none;
-    }
+  h1 {
+    @include type.type-style('fluid-heading-05', true);
+    color: var(--#{vars.$bcgov-prefix}-text-primary);
+    margin-bottom: 2.5rem;
+  }
+
+  p {
+    @include type.type-style('fluid-paragraph-01', true);
+    color: var(--#{vars.$bcgov-prefix}-text-secondary);
+    margin-bottom: 0.25rem;
+  }
 
+  button {
     margin-top: 2rem;
+    margin-bottom: 3rem;
+    inline-size: 16rem;
+  }
+
+  .four-oh-four-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  @media only screen and (min-width: 1920px) {
+    img {
+      height: 80%;
+      width: 80%;
+    }
   }
 
-  .link {
-    margin-bottom: 0.5rem;
-    position: relative;
-    display: inline-block;
-    transition: color var(--#{vars.$bcgov-prefix}-transition-base);
-    color: var(--#{vars.$bcgov-prefix}-text-01);
-    text-decoration: none;
-    margin-left: 1rem;
-
-    &:before {
-      content: '\21B3'; //"↳"
-      position: absolute;
-      left: -1rem;
-      color: var(--#{vars.$bcgov-prefix}-text-01);
-      cursor: pointer;
+  @media only screen and (max-width: 1055px) {
+    margin-top: 0;
+    margin-left: 0;
+    img {
+      height: 50vh;
+      width: 90vw;
     }
   }
 
-  .fof-text {
-    text-align: center;
-    font-family: cursive;
-    font-weight: 700;
-    font-size: 13rem;
-    transform: translate(0, -20%);
-    letter-spacing: 0.02em;
-    color: #F9f1cc;
-    text-shadow: 5px 5px 0px #FFB650,
-      10px 10px 0px #FFD662,
-      15px 15px 0px #FF80BF,
-      20px 20px 0px #EF5097,
-      25px 25px 0px #6868AC,
-      30px 30px 0px #90B1E0;
+  @media only screen and (max-width: 672px) {
+    margin-top: 0;
   }
 }