import { Link, Navigate } from 'react-router-dom' import { Fade } from 'src/components/animation/Fade' import NotFoundIcon from 'src/components/icons/not_found.svg' import { Box } from 'src/components/layout/Box' import { config } from 'src/config' import { OnboardingScreenFrame } from 'src/features/onboarding/OnboardingScreenFrame' import { Color } from 'src/styles/Color' import { Font } from 'src/styles/fonts' import { Stylesheet } from 'src/styles/types' export function NotFoundScreen() { if (config.isElectron) { // On Electron, just route 404's back home // Necessary because initial route is not <filepath>/index.html return <Navigate to="/" replace={true} /> } return ( <OnboardingScreenFrame> <Fade show={true} duration="2s"> <Box direction="column" align="center"> <h1 css={style.h1}>This page could not be found, sorry!</h1> <img width="160em" src={NotFoundIcon} alt="Not Found" css={style.img} /> <h3 css={style.h3}> Please check the URL or go{' '} <Link to="/" css={style.linkHome}> back to home </Link> . </h3> </Box> </Fade> </OnboardingScreenFrame> ) } const style: Stylesheet = { h1: { ...Font.h1, textAlign: 'center', }, h3: { ...Font.h3, textAlign: 'center', }, img: { margin: '2.5em', }, linkHome: { color: Color.primaryBlack, }, }