From 9668f656b50e099b971e0f8cfb570a8861f89e3b Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani.kalpachka888@abv.bg>
Date: Mon, 21 Aug 2023 22:10:07 +0300
Subject: [PATCH] Update error page

---
 .../client/campaigns/InlineDonation.tsx       |  2 +-
 .../client/layout/Footer/Footer.styled.tsx    |  2 +-
 src/components/common/errors/NotFoundPage.tsx | 53 -------------------
 .../NotFoundPage/NotFoundPage.styled.tsx      | 20 +++++++
 .../errors/NotFoundPage/NotFoundPage.tsx      | 31 +++++++++++
 src/pages/404.tsx                             |  2 +-
 6 files changed, 54 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/common/errors/NotFoundPage.tsx
 create mode 100644 src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx
 create mode 100644 src/components/common/errors/NotFoundPage/NotFoundPage.tsx

diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx
index 3bc95d35b..2a2bc42df 100644
--- a/src/components/client/campaigns/InlineDonation.tsx
+++ b/src/components/client/campaigns/InlineDonation.tsx
@@ -217,7 +217,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     textAlign: 'center',
 
     '&:hover': {
-      'text-decoration': 'underline',
+      textDecoration: 'underline',
       transform: 'scale(1.01)',
       cursor: 'pointer',
       transition: 'all 0.3s ease',
diff --git a/src/components/client/layout/Footer/Footer.styled.tsx b/src/components/client/layout/Footer/Footer.styled.tsx
index a42f27216..3e23b93ad 100644
--- a/src/components/client/layout/Footer/Footer.styled.tsx
+++ b/src/components/client/layout/Footer/Footer.styled.tsx
@@ -69,7 +69,7 @@ export const SubscribeLinkWrapper = styled(Grid)(({ theme }) => ({
   },
 
   '&:hover': {
-    'text-decoration': 'underline',
+    textDecoration: 'underline',
     transform: 'scale(1.03)',
     cursor: 'pointer',
     transition: 'all 0.3s ease',
diff --git a/src/components/common/errors/NotFoundPage.tsx b/src/components/common/errors/NotFoundPage.tsx
deleted file mode 100644
index be0f40592..000000000
--- a/src/components/common/errors/NotFoundPage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useTranslation } from 'next-i18next'
-import { styled } from '@mui/material/styles'
-import { Grid, Typography } from '@mui/material'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-
-import { routes } from 'common/routes'
-import Layout from 'components/client/layout/Layout'
-import LinkButton from 'components/common/LinkButton'
-
-import NotFoundIllustration from './assets/NotFoundIllustration'
-
-const PREFIX = 'NotFoundPage'
-
-const classes = {
-  root: `${PREFIX}-root`,
-}
-
-const StyledLayout = styled(Layout)(() => ({
-  [`& .${classes.root}`]: {
-    flexGrow: 1,
-    height: '100vh',
-    margin: 0,
-  },
-}))
-
-export default function NotFoundPage() {
-  const { t } = useTranslation()
-
-  return (
-    <StyledLayout maxWidth="sm" disableOffset disableGutters>
-      <Grid container className={classes.root}>
-        <Grid container direction="column" alignItems="center" justifyContent="center" spacing={4}>
-          <Grid container item xs={8} sm={6} lg={4}>
-            <NotFoundIllustration />
-          </Grid>
-          <Grid item>
-            <Typography variant="body2">{t('common:errors.404Message')}</Typography>
-          </Grid>
-          <Grid container item alignItems="center" justifyContent="center">
-            <LinkButton
-              size="large"
-              startIcon={<ArrowBackIcon />}
-              color="inherit"
-              variant="outlined"
-              href={routes.index}>
-              {t('common:errors.backButtonLabel')}
-            </LinkButton>
-          </Grid>
-        </Grid>
-      </Grid>
-    </StyledLayout>
-  )
-}
diff --git a/src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx b/src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx
new file mode 100644
index 000000000..3d76c63b0
--- /dev/null
+++ b/src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx
@@ -0,0 +1,20 @@
+import { Stack, Typography } 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)(() => ({
+  alignItems: 'center',
+  gap: theme.spacing(5),
+  marginTop: theme.spacing(8),
+}))
+
+export const ErrorMessage = styled(Typography)(() => ({
+  maxWidth: theme.spacing(80),
+}))
+
+export const BackButton = styled(LinkButton)(() => ({
+  color: theme.palette.primary.dark,
+  borderColor: theme.palette.primary.dark,
+}))
diff --git a/src/components/common/errors/NotFoundPage/NotFoundPage.tsx b/src/components/common/errors/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 000000000..af3fe018e
--- /dev/null
+++ b/src/components/common/errors/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next'
+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')
+
+  return (
+    <Layout>
+      <Root>
+        <Grid container item xs={12} sm={7} lg={5}>
+          <NotFoundIllustration />
+        </Grid>
+        <ErrorMessage variant="body2">{t('errors.404Message')}</ErrorMessage>
+        <BackButton
+          size="large"
+          startIcon={<ArrowBackIcon />}
+          variant="outlined"
+          href={routes.index}>
+          {t('errors.backButtonLabel')}
+        </BackButton>
+      </Root>
+    </Layout>
+  )
+}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 8783821a8..083d7b570 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,7 +1,7 @@
 import { GetStaticProps } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import NotFoundPage from 'components/common/errors/NotFoundPage'
+import NotFoundPage from 'components/common/errors/NotFoundPage/NotFoundPage'
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {