Change Back button on Not Found page to redirect to the previous page (…

…#1877)

Co-authored-by: ani-kalpachka <[email protected]>

src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx

@@ -1,7 +1,6 @@
-import { Stack, Typography } from '@mui/material'
+import { Stack, Typography, Button } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-import LinkButton from 'components/common/LinkButton'
 import theme from 'common/theme'
 
 export const Root = styled(Stack)(() => ({
@@ -14,7 +13,7 @@ export const ErrorMessage = styled(Typography)(() => ({
   maxWidth: theme.spacing(80),
 }))
 
-export const BackButton = styled(LinkButton)(() => ({
+export const BackButton = styled(Button)(() => ({
   color: theme.palette.primary.dark,
   borderColor: theme.palette.primary.dark,
 }))

src/components/common/errors/NotFoundPage/NotFoundPage.tsx

@@ -1,15 +1,20 @@
 import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
 import { Grid } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
-import { routes } from 'common/routes'
 import Layout from 'components/client/layout/Layout'
 import NotFoundIllustration from '../assets/NotFoundIllustration'
 
 import { BackButton, ErrorMessage, Root } from './NotFoundPage.styled'
 
 export default function NotFoundPage() {
   const { t } = useTranslation('common')
+  const router = useRouter()
+
+  const handleBackClick = () => {
+    router.back()
+  }
 
   return (
     <Layout>
@@ -22,7 +27,7 @@ export default function NotFoundPage() {
           size="large"
           startIcon={<ArrowBackIcon />}
           variant="outlined"
-          href={routes.index}>
+          onClick={handleBackClick}>
           {t('errors.backButtonLabel')}
         </BackButton>
       </Root>