added and centered button for going back to home in 404 error page

sandboxnu · Nov 8, 2023 · 8d3ec20 · 8d3ec20
1 parent 9d0f4d8
commit 8d3ec20
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 17 deletions.
diff --git a/packages/frontend-v2/components/Error/ErrorBoundary.tsx b/packages/frontend-v2/components/Error/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ErrorInfo } from 'react';
+import React, { Component, ErrorInfo } from "react";
 
 interface IProps {
   fallback: React.FC;
@@ -9,13 +9,12 @@ interface IState {
   hasError: boolean;
 }
 
-export class ErrorBoundary extends Component<IProps, IState>{
-
-  state = {hasError: false};
+export class ErrorBoundary extends Component<IProps, IState> {
+  state = { hasError: false };
 
   constructor(props: IProps) {
     super(props);
-    this.state = {hasError: false};
+    this.state = { hasError: false };
   }
 
   static getDerivedStateFromError(error: Error) {
@@ -32,11 +31,8 @@ export class ErrorBoundary extends Component<IProps, IState>{
 
   render() {
     if (this.state.hasError) {
-      return (<>
-      {this.props.fallback}
-      </>)
+      return <>{this.props.fallback}</>;
     }
-
     return this.props.children;
   }
 }
diff --git a/packages/frontend-v2/pages/404.tsx b/packages/frontend-v2/pages/404.tsx
@@ -0,0 +1,52 @@
+import { Flex, Heading, Image, Text } from "@chakra-ui/react";
+import { GraduateButtonLink, GraduatePostAuthHeader } from "../components";
+
+export default function Custom404() {
+  return (
+    <Flex flexDirection="column" height="100vh" overflow="hidden">
+      <GraduatePostAuthHeader />
+      <Flex
+        height="100%"
+        overflow="hidden"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Flex
+          width={{ tablet: "lg", base: "xs" }}
+          height={{ tablet: "lg", base: "xs" }}
+          direction="column"
+          alignItems="center"
+          rowGap="md"
+          p={{ tablet: "2xl", base: "md" }}
+        >
+          <Image src="/sad_face.svg" alt="sad face" boxSize="7rem" />
+          <Heading as="h1" size="xl" color="primary.blue.dark.main">
+            Oops! Page not found
+          </Heading>
+
+          <Flex
+            width={{ base: "md" }}
+            height={{ base: "max-content" }}
+            direction="column"
+            alignItems="center"
+            rowGap="sm"
+          >
+            <Text size="xs" textAlign="center">
+              Sorry! We are unable to retrieve the information you need.
+            </Text>
+            <GraduateButtonLink
+              href="https://graduatenu.com/"
+              mt="md"
+              variant="solid"
+              borderRadius="lg"
+              px="3xl"
+              py="lg"
+            >
+              Back to Home
+            </GraduateButtonLink>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/packages/frontend-v2/pages/_app.tsx b/packages/frontend-v2/pages/_app.tsx
@@ -25,9 +25,9 @@ function MyApp({ Component, pageProps }: AppProps) {
           <link rel="icon" href="/favicon.ico" />
           <link rel="icon" href="/favicon.svg" type="image/svg+xml"></link>
         </Head>
-          <ChakraProvider theme={theme}>
-            {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
-          </ChakraProvider>
+        <ChakraProvider theme={theme}>
+          {disableApp ? <DisabledApp /> : <Component {...pageProps} />}
+        </ChakraProvider>
         <ToastContainer position="bottom-right" />
       </ErrorBoundary>
     </>
@@ -70,10 +70,10 @@ const DisabledApp: React.FC = () => {
 
 const ErrorPage: React.FC = () => {
   return (
-   <Text size="xl" textAlign="center">
-    THIS PAGE DOES NOT EXIST
-   </Text>
+    <Text size="xl" textAlign="center">
+      THERES A PROBLEM THAT OCCURED HERE.
+    </Text>
   );
-}
+};
 
 export default MyApp;
diff --git a/packages/frontend-v2/pages/errorBoundary.tsx b/packages/frontend-v2/pages/errorBoundary.tsx
diff --git a/packages/frontend-v2/pages/index.tsx b/packages/frontend-v2/pages/index.tsx
@@ -24,7 +24,6 @@ interface InfoTextProps {
 }
 
 const LandingPage: NextPage = () => {
-  throw new Error("testing");
   return (
     <Box>
       <GraduatePreAuthHeader />