Merge pull request #1355 from all-rit/1339-defect-remake-invalid-page-screen

Remake Invalid Page

Author: JackyFTW

client/src/App.js

@@ -180,7 +180,7 @@ const App = () => {
         <Profile path="/Profile" user={state.main.user} />
         <LabsPage path={"/Labs"} user={state.main.user} actions={actions} />
         <EducatorResources path={"/EducatorResources"} user={state.main.user} />
-        <Error actions={actions} default />
+        <Error default />
 
         <Imagine2023
           path={"/Imagine2023/*"}

client/src/assets/stylesheets/components/App.css

@@ -412,38 +412,6 @@ li {
   }
 }
 
-.errorpage h1 {
-  font-size: 50px;
-  font-weight: 700;
-  line-height: 50px;
-  margin-bottom: 25px;
-  font-family:
-    Montserrat,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-}
-
-.errorpage p {
-  font-style: italic;
-  font-size: 25px;
-  line-height: 50px;
-  margin-bottom: 25px;
-  padding: 75px;
-}
-
-.errorpage div {
-  padding: 40px;
-}
-
 header.masthead {
   margin-top: -120px;
   text-align: center;

client/src/assets/stylesheets/components/App.scss

@@ -608,44 +608,6 @@ li {
   // }
 }
 
-.errorpage {
-  h1 {
-    //font-style: Bold;
-    font-size: 50px;
-    font-weight: 700;
-    line-height: 50px;
-    margin-bottom: 25px;
-    //padding-top: 40px;
-    font-family:
-      Poppins,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      "Helvetica Neue",
-      Arial,
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji";
-  }
-
-  p {
-    font-style: italic;
-    font-size: 25px;
-    line-height: 50px;
-    margin-bottom: 25px;
-    padding: 75px;
-    // padding-top: 75px;
-    // padding-bottom: 75px;
-  }
-
-  div {
-    padding: 40px;
-  }
-}
-
 header.masthead {
   margin-top: -120px;
   text-align: center;

client/src/assets/stylesheets/main.css

@@ -1,24 +1,74 @@
-/* eslint-disable react/prop-types */
 import React from "react";
-import Redirect from "../../helpers/Redirect";
+import useScroll from "src/use-hooks/useScroll";
+import { navigate } from "@reach/router";
+import ALLButton from "src/components/all-components/ALLButton";
+
+const Error = () => {
+  useScroll();
 
-const Error = (props) => {
-  const { actions } = props;
   return (
-    <div className="errorpage tw-w-full">
-      <div>
-        <h1>Invalid Page</h1>
-        <hr className="horiz" />
-        <p>Please click the button to navigate home</p>
-        <hr className="horiz" />
-        <button
-          className="btn btn-second btn-xl text-uppercase"
-          onClick={() => Redirect(actions, 99, 0)}
-        >
-          Return Home
-        </button>
+    <section
+      className={
+        "tw-w-screen tw-flex tw-flex-col tw-items-end tw-bg-primary-blue tw-py-20"
+      }
+    >
+      <div
+        className={
+          "tw-flex tw-flex tw-flex-col md:tw-flex-row tw-justify-between tw-w-[90%] tw-gap-[5rem]"
+        }
+      >
+        {/* Left Side */}
+        <div className={"tw-relative tw-flex"}>
+          <div
+            className={
+              "tw-z-1 tw-min-w-full tw-bg-white tw-rounded-l-md tw-min-h-[12rem]"
+            }
+          >
+            <div
+              className={
+                "tw-h-full tw-flex tw-flex-col tw-px-6 tw-justify-center tw-items-center"
+              }
+            >
+              <h1 className={"tw-title tw-text-[6rem]"}>404</h1>
+            </div>
+          </div>
+          <div
+            className={
+              "tw-absolute -tw-bottom-4 -tw-left-4 tw-right-0 tw-h-[12rem] tw-min-w-full tw-bg-primary-yellow tw-rounded-bl-lg"
+            }
+          />
+        </div>
+
+        {/* Right Side */}
+        <div className={"tw-relative tw-flex tw-grow md:tw-ml-[10%]"}>
+          <div className={"tw-z-1 tw-min-w-full tw-bg-white tw-rounded-l-md"}>
+            <div
+              className={
+                "tw-flex tw-flex-col tw-gap-y-6 tw-py-12 tw-px-6 tw-text-left"
+              }
+            >
+              <h2 className={"tw-title xs:tw-text-xl md:tw-text-[2rem]"}>
+                Invalid Page
+              </h2>
+              <p className={"tw-body-text md:tw-w-1/2"}>
+                The URL you entered either does not exist or is not accessible!
+                Please click the button to navigate home.
+              </p>
+              <div
+                className={"xs:tw-w-full md:tw-w-1/2 tw-flex tw-justify-end"}
+              >
+                <ALLButton label="Return Home" onClick={() => navigate("/")} />
+              </div>
+            </div>
+          </div>
+          <div
+            className={
+              "tw-absolute -tw-bottom-4 -tw-left-4 tw-right-0 tw-h-[12rem] tw-min-w-full tw-bg-primary-yellow tw-rounded-bl-lg"
+            }
+          />
+        </div>
       </div>
-    </div>
+    </section>
   );
 };