diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx index 4dc3f38f..7347d8f6 100644 --- a/packages/web/src/components/Layout/index.tsx +++ b/packages/web/src/components/Layout/index.tsx @@ -3,6 +3,7 @@ import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; +import Stack from '@mui/material/Stack'; import AppsIcon from '@mui/icons-material/Apps'; import SwapCallsIcon from '@mui/icons-material/SwapCalls'; import HistoryIcon from '@mui/icons-material/History'; @@ -139,7 +140,7 @@ export default function PublicLayout({ onDrawerClose={closeDrawer} /> - + - + - {children} - + ); diff --git a/packages/web/src/components/NotFound/index.tsx b/packages/web/src/components/NotFound/index.tsx new file mode 100644 index 00000000..8311716f --- /dev/null +++ b/packages/web/src/components/NotFound/index.tsx @@ -0,0 +1,44 @@ +import { Link } from 'react-router-dom'; +import Button from '@mui/material/Button'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +import * as URLS from 'config/urls'; +import useFormatMessage from 'hooks/useFormatMessage'; +import useAuthentication from 'hooks/useAuthentication'; +import Layout from 'components/Layout'; +import PublicLayout from 'components/PublicLayout'; + +export default function NoResultFound(): React.ReactElement { + const formatMessage = useFormatMessage(); + const { isAuthenticated } = useAuthentication(); + + const pageContent = ( + + + 404 + + + {formatMessage('notFoundPage.title')} + + + + + + ); + + return isAuthenticated ? ( + {pageContent} + ) : ( + {pageContent} + ); +} diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 2bd2c598..807ab9c5 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -265,5 +265,7 @@ "authClient.buttonSubmit": "Submit", "authClient.inputName": "Name", "authClient.inputActive": "Active", - "updateAuthClient.title": "Update auth client" + "updateAuthClient.title": "Update auth client", + "notFoundPage.title": "We can't seem to find a page you're looking for.", + "notFoundPage.button": "Back to home page" } diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index e764004a..72ff2781 100644 --- a/packages/web/src/routes.tsx +++ b/packages/web/src/routes.tsx @@ -1,5 +1,6 @@ import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom'; import Layout from 'components/Layout'; +import NoResultFound from 'components/NotFound'; import PublicLayout from 'components/PublicLayout'; import Applications from 'pages/Applications'; import Application from 'pages/Application'; @@ -138,13 +139,7 @@ function Routes() { {adminSettingsRoutes} - -
404
- - } - /> + } /> ); }