feat: 1520 404 page not found screen development (#1663)

Co-authored-by: mgaseta <[email protected]>
bcgov · Oct 24, 2024 · 25548bb · 25548bb
1 parent 93bb65b
commit 25548bb
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 89 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -57,6 +57,10 @@ const App: React.FC = () => {
         }
       ]
     },
+    {
+      path: ROUTES.FOUR_OH_FOUR,
+      element: <FourOhFour />
+    },
     {
       path: ROUTES.ALL_ROUTES,
       element: <FourOhFour />
@@ -90,6 +94,7 @@ const App: React.FC = () => {
   const getBrowserRouter = () => {
     const selectedRoutes = selectBrowserRoutes();
     selectedRoutes.push(...sharedRoutes);
+
     return createBrowserRouter(selectedRoutes);
   };
 

diff --git a/frontend/src/assets/img/404-mystery.png b/frontend/src/assets/img/404-mystery.png
diff --git a/frontend/src/assets/img/SPAR_404_error.svg b/frontend/src/assets/img/SPAR_404_error.svg
diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx
@@ -91,7 +91,7 @@ const BCHeader = () => {
         >
           <SkipToContent />
           {
-            !location.pathname.endsWith('/403')
+            !(location.pathname.endsWith('/403') || location.pathname.endsWith('/404'))
               ? (
                 <HeaderMenuButton
                   aria-label={componentTexts.openMenu}
@@ -173,7 +173,7 @@ const BCHeader = () => {
               : null
           }
           {
-            !location.pathname.endsWith('/403')
+            !(location.pathname.endsWith('/403') || location.pathname.endsWith('/404'))
               ? (
                 <SideNav
                   isChildOfHeader

diff --git a/frontend/src/views/ErrorViews/FourOhFour/constants.ts b/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'
+};
diff --git a/frontend/src/views/ErrorViews/FourOhFour/index.tsx b/frontend/src/views/ErrorViews/FourOhFour/index.tsx
@@ -1,51 +1,69 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect } from 'react';
+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';
+import BCHeader from '../../../components/BCHeader';
 
 const FourOhFour = () => {
-  type linkType = {
-    href: string,
-    text: string
-  }
+  const navigate = useNavigate();
+  const windowSize = useWindowSize();
+
+  // Redirect to the /404 URL
+  useEffect(() => {
+    navigate(ROUTES.FOUR_OH_FOUR, { replace: true });
+  }, [navigate]);
 
-  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">
-          {
-            links.map(({ href, text }) => (
-              <li key={text}>
-                <Link className="link" to={href}>
-                  <h3>{text}</h3>
-                </Link>
-              </li>
-            ))
-          }
-        </div>
-      </div>
-    </div>
+    <>
+      <BCHeader />
+      <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>
+            {
+              windowSize.innerWidth > MEDIUM_SCREEN_WIDTH
+                ? (
+                  <p>
+                    {fourOhFourTexts.supportText1}
+                  </p>
+                )
+                : null
+            }
+            <p>
+              {fourOhFourTexts.supportText2}
+            </p>
+            <Button
+              renderIcon={Home}
+              size="lg"
+              onClick={
+                () => navigate(ROUTES.ROOT)
+              }
+            >
+              {fourOhFourTexts.buttonLabel}
+            </Button>
+          </Column>
+        </Row>
+      </FlexGrid>
+    </>
   );
 };
 

diff --git a/frontend/src/views/ErrorViews/FourOhFour/styles.scss b/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;
   }
 }