Improve not found page

Author: marianards

frontend/src/components/Pages/FlotillaSite.tsx

@@ -13,6 +13,7 @@ import {
 } from '../NavigationMenu/NavigationMenuPages'
 import { InfoPage } from './InfoPage'
 import { PageRouter } from './PageRouter'
+import { PageNotFound } from './NotFoundPage'
 
 export const FlotillaSite = () => {
     const frontPageTabOptions = Object.values(TabNames)
@@ -51,6 +52,7 @@ export const FlotillaSite = () => {
                         <Route path={`${config.FRONTEND_BASE_ROUTE}/auto-schedule`} element={<AutoSchedulePage />} />
                         <Route path={`${config.FRONTEND_BASE_ROUTE}/robots`} element={<RobotStatusPage />} />
                         <Route path={`${config.FRONTEND_BASE_ROUTE}/info`} element={<InfoPage />} />
+                        <Route path="*" element={<PageNotFound />} />
                     </Routes>
                 </BrowserRouter>
             </APIUpdater>

frontend/src/components/Pages/NotFoundPage.tsx

@@ -0,0 +1,73 @@
+import { useNavigate } from 'react-router-dom'
+import { Button, Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
+import notfound from 'mediaAssets/404notfound.png'
+import { config } from 'config'
+import { StyledPage } from 'components/Styles/StyledComponents'
+import { Header } from 'components/Header/Header'
+
+const StyledPageContent = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+`
+const StyledTypography = styled(Typography)`
+    text-align: center;
+    gap: 10px;
+`
+const StyledImage = styled.img`
+    height: 500px;
+    padding: 0px 10px;
+
+    @media (max-width: 600px) {
+        max-width: 50vw;
+        height: auto;
+        padding: 5px;
+    }
+`
+const StyledActions = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0px 10px;
+    gap: 20px;
+`
+const StyledButton = styled(Button)`
+    width: 200px;
+    justify-content: center;
+`
+
+export const PageNotFound = () => {
+    const navigate = useNavigate()
+    return (
+        <>
+            <Header page={'404'} />
+            <StyledPage>
+                <StyledPageContent>
+                    <StyledImage src={notfound} />
+                    <StyledActions>
+                        <StyledTypography variant="h3">
+                            {"We couldn't find the page you're looking for."}
+                        </StyledTypography>
+                        <StyledButton
+                            color="secondary"
+                            onClick={() => {
+                                navigate(`${config.FRONTEND_BASE_ROUTE}/front-page`)
+                            }}
+                        >
+                            {"Let's go back"}
+                        </StyledButton>
+                    </StyledActions>
+                </StyledPageContent>
+            </StyledPage>
+        </>
+    )
+}

frontend/src/components/Pages/PageRouter.tsx

@@ -4,25 +4,20 @@ import { RobotPage } from './RobotPage/RobotPage'
 import { MissionDefinitionPage } from './MissionDefinitionPage/MissionDefinitionPage'
 import { Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
+import { PageNotFound } from './NotFoundPage'
 
-const StyledTypography = styled.div`
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    transform: translate(-70%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+const StyledTypography = styled(Typography)`
+    text-align: center;
     gap: 10px;
 `
+
 export const PageRouter = () => {
     const { page } = useParams()
     if (!page) return InvalidRoute()
 
     const [pageName, id] = page.split(/-(.+)/)
 
-    if (ValidateUUID(id)) return PageNotFound()
+    if (!ValidateUUID(id)) return PageNotFound()
 
     switch (pageName) {
         case 'mission':
@@ -35,24 +30,12 @@ export const PageRouter = () => {
             return PageNotFound()
     }
 }
-const ValidateUUID = (id: string) => {
-    return (id.match(/-/g) || []).length > 4
-}
 
-const PageNotFound = () => {
-    return (
-        <StyledTypography>
-            <Typography variant="h1"> {'404'} </Typography>
-            <Typography variant="h2">{'Page Not Found'}</Typography>
-            <Typography variant="body_short">{"We could't find the page you're looking for."} </Typography>
-        </StyledTypography>
-    )
+const ValidateUUID = (id: string) => {
+    const regex = /^[\da-f]{8}-([\da-f]{4}-){3}[\da-f]{12}$/i
+    return regex.test(id)
 }
 
 const InvalidRoute = () => {
-    return (
-        <StyledTypography>
-            <Typography variant="body_short">Invalid route</Typography>
-        </StyledTypography>
-    )
+    return <StyledTypography variant="body_short">Invalid route</StyledTypography>
 }