diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 733a6f864..6ca4a48b9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -57,6 +57,10 @@ const App: React.FC = () => { } ] }, + { + path: ROUTES.FOUR_OH_FOUR, + element: + }, { path: ROUTES.ALL_ROUTES, element: @@ -90,6 +94,7 @@ const App: React.FC = () => { const getBrowserRouter = () => { const selectedRoutes = selectBrowserRoutes(); selectedRoutes.push(...sharedRoutes); + return createBrowserRouter(selectedRoutes); }; diff --git a/frontend/src/assets/img/404-mystery.png b/frontend/src/assets/img/404-mystery.png deleted file mode 100644 index 317cb946c..000000000 Binary files a/frontend/src/assets/img/404-mystery.png and /dev/null differ diff --git a/frontend/src/assets/img/SPAR_404_error.svg b/frontend/src/assets/img/SPAR_404_error.svg new file mode 100644 index 000000000..f8ad551c7 --- /dev/null +++ b/frontend/src/assets/img/SPAR_404_error.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/components/BCHeader/index.tsx b/frontend/src/components/BCHeader/index.tsx index cd8ce945f..295e3a6c0 100644 --- a/frontend/src/components/BCHeader/index.tsx +++ b/frontend/src/components/BCHeader/index.tsx @@ -91,7 +91,7 @@ const BCHeader = () => { > { - !location.pathname.endsWith('/403') + !(location.pathname.endsWith('/403') || location.pathname.endsWith('/404')) ? ( { : null } { - !location.pathname.endsWith('/403') + !(location.pathname.endsWith('/403') || location.pathname.endsWith('/404')) ? ( { - type linkType = { - href: string, - text: string - } + const navigate = useNavigate(); + const windowSize = useWindowSize(); + + // Redirect to the /404 URL + useEffect(() => { + navigate(ROUTES.FOUR_OH_FOUR, { replace: true }); + }, [navigate]); - const links: linkType[] = [ - { - href: ROUTES.DASHBOARD, - text: 'Dashboard' - }, - { - href: ROUTES.SEEDLOTS, - text: 'Seedlots' - } - ]; return ( -
-
404
- -
-

- Sorry, we can't find the page you are looking for. -

-

- Maybe some of these most visited links will help you? -

-
- { - links.map(({ href, text }) => ( -
  • - -

    {text}

    - -
    • - )) - } -
    -
    -
    + <> + + + + + {fourOhFourTexts.altText} + + +

    + {fourOhFourTexts.title} +

    + { + windowSize.innerWidth > MEDIUM_SCREEN_WIDTH + ? ( +

    + {fourOhFourTexts.supportText1} +

    + ) + : null + } +

    + {fourOhFourTexts.supportText2} +

    + +     +     +     + ); }; diff --git a/frontend/src/views/ErrorViews/FourOhFour/styles.scss b/frontend/src/views/ErrorViews/FourOhFour/styles.scss index 394270b72..26f541d8e 100644 --- a/frontend/src/views/ErrorViews/FourOhFour/styles.scss +++ b/frontend/src/views/ErrorViews/FourOhFour/styles.scss @@ -1,61 +1,55 @@ @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars; @use '@carbon/type'; -.fof-container { - margin: 0; - max-width: 100%; - min-height: 100vh; - padding: 1rem; - background-color: rgb(131, 217, 200); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - +.four-oh-four-page { img { - width: 25%; - min-width: 21.875rem; + height: 100%; + width: 100%; + object-fit: contain; } - .list { - li { - list-style-type: none; - } + h1 { + @include type.type-style('fluid-heading-05', true); + color: var(--#{vars.$bcgov-prefix}-text-primary); + margin-bottom: 2.5rem; + } + + p { + @include type.type-style('fluid-paragraph-01', true); + color: var(--#{vars.$bcgov-prefix}-text-secondary); + margin-bottom: 0.25rem; + } + button { margin-top: 2rem; + margin-bottom: 3rem; + inline-size: 16rem; + } + + .four-oh-four-row { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + @media only screen and (min-width: 1920px) { + img { + height: 80%; + width: 80%; + } } - .link { - margin-bottom: 0.5rem; - position: relative; - display: inline-block; - transition: color var(--#{vars.$bcgov-prefix}-transition-base); - color: var(--#{vars.$bcgov-prefix}-text-01); - text-decoration: none; - margin-left: 1rem; - - &:before { - content: '\21B3'; //"↳" - position: absolute; - left: -1rem; - color: var(--#{vars.$bcgov-prefix}-text-01); - cursor: pointer; + @media only screen and (max-width: 1055px) { + margin-top: 0; + margin-left: 0; + img { + height: 50vh; + width: 90vw; } } - .fof-text { - text-align: center; - font-family: cursive; - font-weight: 700; - font-size: 13rem; - transform: translate(0, -20%); - letter-spacing: 0.02em; - color: #F9f1cc; - text-shadow: 5px 5px 0px #FFB650, - 10px 10px 0px #FFD662, - 15px 15px 0px #FF80BF, - 20px 20px 0px #EF5097, - 25px 25px 0px #6868AC, - 30px 30px 0px #90B1E0; + @media only screen and (max-width: 672px) { + margin-top: 0; } }