From e8e6d9f8ea1971f01ec5c5fc89adbb0fdfe8abce Mon Sep 17 00:00:00 2001
From: Sunil Kumar Behera <42198140+sunilk4u@users.noreply.github.com>
Date: Fri, 18 Aug 2023 01:32:20 +0530
Subject: [PATCH] Fix: add 404 page (#1230)

* add 404 page

* add not found wildacard path to apppath

* rename styled components

* add theme blur and background color

* change backgrounf to transparent secondary
---
 front/src/App.tsx                  |  3 ++
 front/src/NotFound.tsx             | 70 ++++++++++++++++++++++++++++++
 front/src/modules/types/AppPath.ts |  3 ++
 3 files changed, 76 insertions(+)
 create mode 100644 front/src/NotFound.tsx

diff --git a/front/src/App.tsx b/front/src/App.tsx
index 609aa1c41b..9e101d4b88 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -20,6 +20,8 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 import { AppInternalHooks } from '~/sync-hooks/AppInternalHooks';
 
+import { NotFound } from './NotFound';
+
 // TEMP FEATURE FLAG FOR VIEW FIELDS
 export const ACTIVATE_VIEW_FIELDS = true;
 
@@ -67,6 +69,7 @@ export function App() {
               </Routes>
             }
           />
+          <Route path={AppPath.NotFoundWildcard} element={<NotFound />} />
         </Routes>
       </DefaultLayout>
     </>
diff --git a/front/src/NotFound.tsx b/front/src/NotFound.tsx
new file mode 100644
index 0000000000..a991d19f07
--- /dev/null
+++ b/front/src/NotFound.tsx
@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { MainButton } from '@/ui/button/components/MainButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { CompaniesMockMode } from './pages/companies/CompaniesMockMode';
+
+const StyledBackDrop = styled.div`
+  align-items: center;
+  backdrop-filter: ${({ theme }) => theme.blur.light};
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+`;
+
+const StyledTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(15)};
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+type StyledInfoProps = {
+  color: 'dark' | 'light';
+};
+
+const StyledInfo = styled.div<StyledInfoProps>`
+  color: ${(props) =>
+    props.color === 'light'
+      ? props.theme.font.color.extraLight
+      : props.theme.font.color.primary};
+  font-size: ${() => (useIsMobile() ? '2.5rem' : '4rem')};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export function NotFound() {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <StyledBackDrop>
+        <StyledTextContainer>
+          <StyledInfo color="dark">404</StyledInfo>
+          <StyledInfo color="light">Page not found</StyledInfo>
+        </StyledTextContainer>
+        <StyledButtonContainer>
+          <MainButton
+            title="Back to content"
+            fullWidth
+            onClick={() => navigate('/')}
+          />
+        </StyledButtonContainer>
+      </StyledBackDrop>
+      <CompaniesMockMode />
+    </>
+  );
+}
diff --git a/front/src/modules/types/AppPath.ts b/front/src/modules/types/AppPath.ts
index 7a817a8718..0dffdab63b 100644
--- a/front/src/modules/types/AppPath.ts
+++ b/front/src/modules/types/AppPath.ts
@@ -21,4 +21,7 @@ export enum AppPath {
 
   // Impersonate
   Impersonate = '/impersonate/:userId',
+
+  // 404 page not found
+  NotFoundWildcard = '*',
 }