feat(frontend): project not found page (#1768)

* feat(images): no-file image add

* fix(store): projectNotFound slice and type add

* feat(projectNotFound): project not found component display if api throw 404

* fix(mainView): show projectNotFound page if state is true

* fix(api): show project not found page if api throws 404

* fix(submissionInstancePage): update submission instance page route

* fix(iamges): remove & add images

* fix(NotFound404): update page-not-found component UI

* fix(projectNotFound): update project-not-found component UI

src/frontend/src/views/NotFound404.tsx

@@ -1,26 +1,33 @@
 import React from 'react';
-import pageNoFound from '@/assets/images/notFound.png';
-import CoreModules from '@/shared/CoreModules';
+import NotFound from '@/assets/images/page-not-found.png';
+import Button from '@/components/common/Button';
+import { useNavigate } from 'react-router-dom';
 
-const NotFoundPage = () => {
+const ProjectNotFound = () => {
+  const navigate = useNavigate();
   return (
-    <CoreModules.Stack
-      className="notFound"
-      backgroundColor="white"
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      p={3}
-    >
-      <CoreModules.Typography mt={'9%'} style={{ wordWrap: 'break-word' }} variant="subtitle2">
-        {`The page you were looking for doesn't exist.`}
-      </CoreModules.Typography>
-      <CoreModules.Typography style={{ wordWrap: 'break-word' }} variant="h3">
-        You may have mistyped the address or the page may have moved.
-      </CoreModules.Typography>
-      <img src={pageNoFound} style={{ height: '22%' }} />
-    </CoreModules.Stack>
+    <div className="md:fmtm-px-[2rem] lg:fmtm-px-[4.5rem] fmtm-h-full fmtm-bg-white">
+      <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-h-[90%] fmtm-justify-center fmtm-gap-[3rem] sm:fmtm-gap-[3.75rem]">
+        <div>
+          <img src={NotFound} alt="Project Not Found Photo" className="fmtm-w-[12rem] lg:fmtm-w-[16.75rem]" />
+        </div>
+        <div className="fmtm-flex fmtm-flex-col fmtm-gap-3">
+          <h2 className="fmtm-text-[1.5rem] md:fmtm-text-[2rem] lg:fmtm-text-[2.5rem] fmtm-text-[#4F4F4F] fmtm-font-barlow fmtm-font-bold fmtm-text-center">
+            404
+          </h2>
+          <p className="fmtm-text-sm sm:fmtm-text-base fmtm-text-center fmtm-text-[#4F4F4F] fmtm-uppercase fmtm-font-semibold">
+            Page Not Found
+          </p>
+        </div>
+        <Button
+          btnText="Return Home"
+          onClick={() => navigate('/')}
+          btnType="other"
+          className="fmtm-mx-auto fmtm-rounded-none fmtm-py-2"
+        />
+      </div>
+    </div>
   );
 };
 
-export default NotFoundPage;
+export default ProjectNotFound;

src/frontend/src/views/ProjectNotFound.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
-import NoFileImage from '@/assets/images/no-file.png';
+import NoFileImage from '@/assets/images/project-not-found.png';
 import Button from '@/components/common/Button';
 import { useNavigate } from 'react-router-dom';
 
 const ProjectNotFound = () => {
   const navigate = useNavigate();
   return (
     <div className="md:fmtm-px-[2rem] lg:fmtm-px-[4.5rem] fmtm-h-full">
-      <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-h-[90%] fmtm-justify-center">
-        <div className="fmtm-mb-[5rem]">
-          <img src={NoFileImage} alt="Project Not Found Photo" className="fmtm-w-[12rem] lg:fmtm-w-[15.625rem]" />
+      <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-h-[90%] fmtm-justify-center fmtm-gap-[3rem] sm:fmtm-gap-[5rem]">
+        <div>
+          <img src={NoFileImage} alt="Project Not Found Photo" className="lg:fmtm-w-[7.688rem]" />
         </div>
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-3">
-          <h2 className="fmtm-text-[1.5rem] md:fmtm-text-[2rem] lg:fmtm-text-[2.5rem] fmtm-text-primaryRed fmtm-font-barlow fmtm-font-bold fmtm-text-center">
+          <h2 className="fmtm-text-[1.5rem] md:fmtm-text-[2rem] lg:fmtm-text-[2.5rem] fmtm-text-[#4F4F4F] fmtm-font-barlow fmtm-font-bold fmtm-text-center">
             PROJECT NOT FOUND
           </h2>
-          <p className="fmtm-text-sm sm:fmtm-text-base fmtm-text-center fmtm-text-[#68707F]">
-            There is no project to show, please create a project by clicking the button below.{' '}
+          <p className="fmtm-text-sm sm:fmtm-text-base fmtm-text-center fmtm-text-[#4F4F4F] fmtm-uppercase fmtm-font-semibold">
+            There is no project to show
           </p>
         </div>
         <Button
           btnText="Create Project"
           onClick={() => navigate('/create-project')}
-          btnType="primary"
-          className="fmtm-mx-auto fmtm-rounded-none fmtm-py-2 fmtm-mt-8"
+          btnType="other"
+          className="fmtm-mx-auto fmtm-rounded-none fmtm-py-2"
         />
       </div>
     </div>