feat: Add link to home page from error pages

frontend/src/app/App.tsx

@@ -3,7 +3,7 @@ import { Route, BrowserRouter as Router, Routes, useParams } from "react-router-
 
 import ProtectedRoutes from "./components/routing";
 import ScrollToTop from "./common/scroll-to-top";
-import NotAuthorized, { NotFound } from "./components/containers/pages";
+import { NotAuthorized, NotFound } from "./components/containers/pages";
 import { ComplaintDetailsEdit } from "./components/containers/complaints/details/complaint-details-edit";
 import ColorReference, { MiscReference, SpaceReference } from "./components/reference";
 import { ModalComponent as Modal } from "./components/modal/modal";

frontend/src/app/components/containers/pages/index.ts

@@ -1,6 +1,6 @@
 import NotAuthorized from "./not-authorized";
-import { NotFound } from "./not-found";
+import NotFound from "./not-found";
 
 export { NotFound };
 
-export default NotAuthorized;
+export { NotAuthorized };

frontend/src/app/components/containers/pages/not-authorized.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { Footer, Header } from "../../containers/layout";
 import { BsPersonFillSlash } from "react-icons/bs";
+import { Link } from "react-router-dom";
 
 const NotAuthorized: FC = () => {
   return (
@@ -10,8 +11,19 @@ const NotAuthorized: FC = () => {
       <div className="error-container">
         <div className="message">
           <BsPersonFillSlash />
-          <h1 className="comp-padding-top-25">Sorry, you are not authorized to access this site</h1>If you think you
-          should have access, please contact <a href="mailto:[email protected]">[email protected]</a>
+          <div className="message-details">
+            <h1 className="comp-padding-top-25">Sorry, you are not authorized to access this site.</h1>
+
+            <p>
+              If you believe you should have access, return to the <Link to="/complaints/">home page</Link> to try
+              logging in again.
+            </p>
+
+            <p>
+              If the problem persists, contact the Compliance & Enforcement Digital Services team at{" "}
+              <a href="mailto:[email protected]">[email protected]</a>.
+            </p>
+          </div>
         </div>
       </div>
 

frontend/src/app/components/containers/pages/not-found.tsx

@@ -1,3 +1,34 @@
-export const NotFound = () => {
-  return <h1>The page or content you are looking for is not found.</h1>;
+import { FC } from "react";
+import { Footer, Header } from "../../containers/layout";
+import { BsFileEarmarkX } from "react-icons/bs";
+import { Link } from "react-router-dom";
+
+const NotFound: FC = () => {
+  return (
+    <div className="comp-app-container">
+      <Header />
+
+      <div className="error-container">
+        <div className="message">
+          <BsFileEarmarkX />
+          <div className="message-details">
+            <h1 className="comp-padding-top-25">The page or content you are looking for is not found.</h1>
+
+            <p>
+              Return to the <Link to="/complaints/">home page</Link> to try again.
+            </p>
+
+            <p>
+              If the problem persists, contact the Compliance & Enforcement Digital Services team at{" "}
+              <a href="mailto:[email protected]">[email protected]</a>.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
 };
+
+export default NotFound;

frontend/src/app/components/error-handling/generic-error-boundary.tsx

@@ -55,9 +55,20 @@ const GenericErrorBoundary: FC<props> = ({ children }) => {
           <div className="message">
             <TbFaceIdError />
             {/* <br /> */}
-            <h1 className="comp-padding-top-25">System error</h1>Please refresh the page to try again. If you still have
-            problems, contact the Compliance & Enforcement Digital Services team at{" "}
-            <a href="mailto:[email protected]">[email protected]</a>
+            <div className="message-details">
+              <h1 className="comp-padding-top-25">System error</h1>
+
+              {/* <!-- The link in this section can't use react router as it 
+             sits above the Routes in index.ts  --> */}
+              <p>
+                Refresh the page or return to the <a href="/">home page</a> to try again.
+              </p>
+
+              <p>
+                If the problem persists, contact the Compliance & Enforcement Digital Services team at{" "}
+                <a href="mailto:[email protected]">[email protected]</a>.
+              </p>
+            </div>
           </div>
         </div>
 

frontend/src/assets/sass/errors.scss

@@ -1,18 +1,42 @@
 .error-container {
-  margin-top: auto;
-  position: relative;
+  display: flex;
+  align-items: center; /* Center items */
+  justify-content: center; /* Center horizontally */
+  height: 100vh; /* Full height of the viewport */
 
   .message {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column; /* Stack all children vertically */
+    align-items: center; /* Center items */
+    text-align: center; /* Center text on small screens */
 
     svg {
-      height: 175px;
+      height: 175px; /* Set size of icon */
       width: 175px;
-      float: left;
-      padding-right: 25px;
+      margin-bottom: 25px; /* Space between SVG and text on mobile */
+    }
+  }
+}
+
+/* Media query for larger screens */
+@media (min-width: 768px) {
+  .error-container {
+    flex-direction: row; /* Align horizontally on larger screens */
+
+    .message {
+      flex-direction: row; /* Align horizontally on larger screens*/
+      align-items: center; /* Align SVG and text vertically */
+      text-align: left; /* Align text to the left on larger screens */
+
+      svg {
+        margin-bottom: 0; /* Remove bottom margin */
+        margin-right: 25px; /* Space between SVG and text */
+      }
+
+      /* We want the title and subsequent paragraphs to stack beside the icon */
+      .message-details {
+        flex-direction: column; /* Align all messages vertically */
+      }
     }
   }
 }