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

@@ -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>
     </>

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 />
+    </>
+  );
+}

front/src/modules/types/AppPath.ts

@@ -21,4 +21,7 @@ export enum AppPath {
 
   // Impersonate
   Impersonate = '/impersonate/:userId',
+
+  // 404 page not found
+  NotFoundWildcard = '*',
 }