From 1ace3c1ea1d8275ea87d583bc77398364c185ea7 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Fri, 25 Nov 2022 19:30:52 +0200
Subject: [PATCH 01/10] Remove makeStyles for IrregularityForm

---
 src/components/campaigns/IrregularityPage.tsx |   2 +-
 src/components/irregularity/Actions.tsx       |   3 +-
 .../IrregularityForm.styled.tsx               |  31 +++++
 .../IrregularityForm.tsx                      | 115 ++++++------------
 4 files changed, 72 insertions(+), 79 deletions(-)
 create mode 100644 src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
 rename src/components/irregularity/{ => IrregularityForm}/IrregularityForm.tsx (68%)

diff --git a/src/components/campaigns/IrregularityPage.tsx b/src/components/campaigns/IrregularityPage.tsx
index 323472821..df709c5b6 100644
--- a/src/components/campaigns/IrregularityPage.tsx
+++ b/src/components/campaigns/IrregularityPage.tsx
@@ -5,7 +5,7 @@ import { Container } from '@mui/material'
 import { useViewCampaign } from 'common/hooks/campaigns'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import Layout from 'components/layout/Layout'
-import IrregularityForm from 'components/irregularity/IrregularityForm'
+import IrregularityForm from 'components/irregularity/IrregularityForm/IrregularityForm'
 import CenteredSpinner from 'components/common/CenteredSpinner'
 
 type Props = { slug: string }
diff --git a/src/components/irregularity/Actions.tsx b/src/components/irregularity/Actions.tsx
index 3723374e2..ea7bcedb3 100644
--- a/src/components/irregularity/Actions.tsx
+++ b/src/components/irregularity/Actions.tsx
@@ -21,7 +21,8 @@ const useStyles = makeStyles((theme: Theme) =>
       width: 'auto',
       color: '#FFFFFF',
       fontSize: '18px',
-      '&:hover': { backgroundColor: '#62C4FB', color: '#000000' },
+
+      '&:hover': { backgroundColor: '#62C4FB', color: '#000000', border: '1px solid #909090' },
       [theme.breakpoints.down('sm')]: { fontSize: '12px' },
     },
     actions: {
diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
new file mode 100644
index 000000000..36eea6773
--- /dev/null
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles'
+import { Grid, Step, StepConnector, Stepper } from '@mui/material'
+
+import theme from 'common/theme'
+
+export const StyledStep = styled(Step)(() => ({
+  padding: 0,
+
+  '& span': {
+    padding: 0,
+  },
+}))
+
+export const StyledStepper = styled(Stepper)(() => ({
+  backgroundColor: 'transparent',
+  margin: theme.spacing(10, 0, 8, 0),
+  alignItems: 'center',
+
+  [theme.breakpoints.down('sm')]: { display: 'none' },
+}))
+
+export const Instructions = styled(Grid)(() => ({
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: theme.spacing(1),
+}))
+
+export const ColorlibConnector = styled(StepConnector)(() => ({
+  height: 3,
+  backgroundColor: theme.palette.info.light,
+}))
diff --git a/src/components/irregularity/IrregularityForm.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
similarity index 68%
rename from src/components/irregularity/IrregularityForm.tsx
rename to src/components/irregularity/IrregularityForm/IrregularityForm.tsx
index 99483e25e..b7fbf3c92 100644
--- a/src/components/irregularity/IrregularityForm.tsx
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
@@ -4,11 +4,8 @@ import React, { useState, useRef } from 'react'
 import { AxiosError, AxiosResponse } from 'axios'
 import { FormikHelpers, FormikProps } from 'formik'
 
-import { Theme } from '@mui/material/styles'
-import makeStyles from '@mui/styles/makeStyles'
 import withStyles from '@mui/styles/withStyles'
-import createStyles from '@mui/styles/createStyles'
-import { Stepper, Step, StepLabel, StepConnector, Grid } from '@mui/material'
+import { StepLabel, StepConnector, Grid } from '@mui/material'
 
 import { ApiErrors, isAxiosError, matchValidator } from 'service/apiErrors'
 import { createIrregularity, uploadIrregularityFiles } from 'service/irregularity'
@@ -29,54 +26,25 @@ import {
   IrregularityReason,
   IrregularityUploadImage,
   UploadIrregularityFiles,
-} from './helpers/irregularity.types'
-import { validationSchema } from './helpers/validation-schema'
-
-import Actions from './Actions'
-import Info from './steps/Info'
-import Fail from './helpers/Fail'
-import StepIcon from './StepperIcon'
-import Remark from './helpers/Remark'
-import Greeting from './steps/Greeting'
-import Contacts from './steps/Contacts'
-import Success from './helpers/Success'
-import stepsHandler from './StepsHandler'
+} from '../helpers/irregularity.types'
+import { validationSchema } from '../helpers/validation-schema'
+
+import Actions from '../Actions'
+import Info from '../steps/Info'
+import Fail from '../helpers/Fail'
+import StepIcon from '../StepperIcon'
+import Remark from '../helpers/Remark'
+import Greeting from '../steps/Greeting'
+import Contacts from '../steps/Contacts'
+import Success from '../helpers/Success'
+import stepsHandler from '../StepsHandler'
 import GenericForm from 'components/common/form/GenericForm'
-
-const ColorlibConnector = withStyles({
-  alternativeLabel: {
-    top: 21,
-  },
-  line: {
-    height: 3,
-    border: 0,
-    backgroundColor: theme.palette.info.light,
-    borderRadius: 1,
-  },
-})(StepConnector)
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    instructions: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(5),
-    },
-    stepper: {
-      backgroundColor: 'transparent',
-      marginTop: theme.spacing(10),
-      marginBottom: theme.spacing(8),
-      alignItems: 'center',
-      [theme.breakpoints.down('sm')]: { display: 'none' },
-    },
-    content: {
-      display: 'flex',
-      justifyContent: 'center',
-    },
-  }),
-)
+import {
+  ColorlibConnector,
+  Instructions,
+  StyledStep,
+  StyledStepper,
+} from './IrregularityForm.styled'
 
 const isFirstStep = (activeStep: number, steps: StepType[]): boolean => {
   return activeStep === steps.length - 3
@@ -109,7 +77,6 @@ type Props = {
 
 export default function IrregularityForm({ campaign, person }: Props) {
   const { t } = useTranslation('irregularity')
-  const classes = useStyles()
 
   const formRef = useRef<FormikProps<IrregularityFormData>>(null)
 
@@ -230,35 +197,29 @@ export default function IrregularityForm({ campaign, person }: Props) {
         initialValues={initialValues}
         validationSchema={validationSchema[activeStep]}
         innerRef={formRef}>
-        <Stepper
-          alternativeLabel
-          activeStep={activeStep}
-          className={classes.stepper}
-          connector={<ColorlibConnector />}>
+        <StyledStepper activeStep={activeStep} connector={<ColorlibConnector />}>
           {steps.map((step, index) => (
-            <Step key={index}>
+            <StyledStep key={index}>
               <StepLabel error={isStepFailed(index)} StepIconComponent={StepIcon} />
-            </Step>
+            </StyledStep>
           ))}
-        </Stepper>
-        <div className={classes.content}>
-          <Grid container spacing={5} justifyContent="center" className={classes.instructions}>
-            <Grid container item xs={12}>
-              {activeStep < steps.length && steps[activeStep].component}
-            </Grid>
-            <Grid container item spacing={3}>
-              <Actions
-                activeStep={activeStep}
-                disableBack={activeStep === 0}
-                onBack={handleBack}
-                loading={mutation.isLoading}
-                campaign={campaign}
-                nextLabel={isLastStep(activeStep, steps) ? 'cta.submit' : 'cta.next'}
-                backLabel={isFirstStep(activeStep, steps) ? 'cta.back-to-campaign' : 'cta.back'}
-              />
-            </Grid>
+        </StyledStepper>
+        <Instructions container spacing={5}>
+          <Grid container item xs={12}>
+            {activeStep < steps.length && steps[activeStep].component}
+          </Grid>
+          <Grid container item spacing={3}>
+            <Actions
+              activeStep={activeStep}
+              disableBack={activeStep === 0}
+              onBack={handleBack}
+              loading={mutation.isLoading}
+              campaign={campaign}
+              nextLabel={isLastStep(activeStep, steps) ? 'cta.submit' : 'cta.next'}
+              backLabel={isFirstStep(activeStep, steps) ? 'cta.back-to-campaign' : 'cta.back'}
+            />
           </Grid>
-        </div>
+        </Instructions>
       </GenericForm>
       {activeStep === Steps.GREETING && <Remark text={t('steps.greeting.remark')} />}
       {activeStep === Steps.CONTACTS && <Remark text={t('steps.contacts.remark')} />}

From 0d3cc4716de697f27a09688a3585ed36c38169d9 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Fri, 25 Nov 2022 22:41:06 +0200
Subject: [PATCH 02/10] Remove makeStyles for Success page

---
 .../IrregularityForm/IrregularityForm.tsx     | 20 ++---
 .../irregularity/helpers/Success.tsx          | 83 -------------------
 .../helpers/Success/Success.styled.tsx        | 44 ++++++++++
 .../irregularity/helpers/Success/Success.tsx  | 54 ++++++++++++
 4 files changed, 108 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/irregularity/helpers/Success.tsx
 create mode 100644 src/components/irregularity/helpers/Success/Success.styled.tsx
 create mode 100644 src/components/irregularity/helpers/Success/Success.tsx

diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
index b7fbf3c92..3519cee1e 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
@@ -1,20 +1,19 @@
-import { useMutation } from '@tanstack/react-query'
-import { useTranslation } from 'next-i18next'
 import React, { useState, useRef } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import { Person } from 'gql/person'
+import { CampaignResponse } from 'gql/campaigns'
+
+import { useMutation } from '@tanstack/react-query'
 import { AxiosError, AxiosResponse } from 'axios'
 import { FormikHelpers, FormikProps } from 'formik'
 
-import withStyles from '@mui/styles/withStyles'
-import { StepLabel, StepConnector, Grid } from '@mui/material'
+import { StepLabel, Grid } from '@mui/material'
 
 import { ApiErrors, isAxiosError, matchValidator } from 'service/apiErrors'
 import { createIrregularity, uploadIrregularityFiles } from 'service/irregularity'
 
-import theme from 'common/theme'
-
-import { Person } from 'gql/person'
-import { CampaignResponse } from 'gql/campaigns'
-
 import {
   Steps,
   Step as StepType,
@@ -36,9 +35,10 @@ import StepIcon from '../StepperIcon'
 import Remark from '../helpers/Remark'
 import Greeting from '../steps/Greeting'
 import Contacts from '../steps/Contacts'
-import Success from '../helpers/Success'
+import Success from '../helpers/Success/Success'
 import stepsHandler from '../StepsHandler'
 import GenericForm from 'components/common/form/GenericForm'
+
 import {
   ColorlibConnector,
   Instructions,
diff --git a/src/components/irregularity/helpers/Success.tsx b/src/components/irregularity/helpers/Success.tsx
deleted file mode 100644
index 4ab5fcadd..000000000
--- a/src/components/irregularity/helpers/Success.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useTranslation } from 'next-i18next'
-import { useEffect } from 'react'
-
-import { ThemeProvider } from '@mui/styles'
-import { Grid, Typography } from '@mui/material'
-import { createStyles, makeStyles } from '@mui/styles'
-import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
-
-import theme from 'common/theme'
-
-import LinkButton from 'components/common/LinkButton'
-import { routes } from 'common/routes'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    button: {
-      backgroundColor: '#0098E3',
-      border: '1px solid #909090',
-      padding: '10px 40px',
-      marginBottom: '5%',
-      borderRadius: '60px',
-      width: 'auto',
-      color: '#FFFFFF',
-      fontSize: '18px',
-      '&:hover': { backgroundColor: '#62C4FB', color: '#000000' },
-      [theme.breakpoints.down('sm')]: { fontSize: '12px' },
-    },
-    container: {
-      marginTop: '20%',
-      justifyContent: 'center',
-    },
-    gridIcon: {
-      marginBottom: '5%',
-      textAlign: 'center',
-    },
-    gridItem: {
-      textAlign: 'center',
-    },
-    containerButtons: {
-      justifyContent: 'space-evenly',
-    },
-  }),
-)
-export default function Success() {
-  const classes = useStyles()
-  const { t } = useTranslation('irregularity')
-
-  useEffect(() => {
-    if (window) {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-  }, [])
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Grid container spacing={7} className={classes.container}>
-        <Grid item xs={12} className={classes.gridIcon}>
-          <CheckCircleOutlinedIcon sx={{ transform: 'scale(5.0)', color: '#4BD12A' }} />
-        </Grid>
-        <Grid item xs={12} className={classes.gridItem}>
-          <Typography variant="h5">{t('steps.success.title')}</Typography>
-        </Grid>
-        <Grid item xs={12} className={classes.gridItem}>
-          <Typography variant="h6">{t('steps.success.subtitle')}</Typography>
-        </Grid>
-        <Grid container item className={classes.containerButtons}>
-          <Grid>
-            <Typography variant="body1">{t('steps.success.label-campaigns')}</Typography>
-            <LinkButton href={routes.campaigns.index} variant="outlined" className={classes.button}>
-              {t('cta.campaigns')}
-            </LinkButton>
-          </Grid>
-          <Grid>
-            <Typography variant="body1">{t('steps.success.label-project')}</Typography>
-            <LinkButton href={routes.aboutProject} variant="outlined" className={classes.button}>
-              {t('cta.project')}
-            </LinkButton>
-          </Grid>
-        </Grid>
-      </Grid>
-    </ThemeProvider>
-  )
-}
diff --git a/src/components/irregularity/helpers/Success/Success.styled.tsx b/src/components/irregularity/helpers/Success/Success.styled.tsx
new file mode 100644
index 000000000..b6fd22678
--- /dev/null
+++ b/src/components/irregularity/helpers/Success/Success.styled.tsx
@@ -0,0 +1,44 @@
+import { styled } from '@mui/material/styles'
+import { Grid } from '@mui/material'
+
+import LinkButton from 'components/common/LinkButton'
+import theme from 'common/theme'
+
+export const Root = styled(Grid)(() => ({
+  marginTop: theme.spacing(15),
+  textAlign: 'center',
+}))
+
+export const SuccessIcon = styled(Grid)(() => ({
+  justifyContent: 'center',
+  color: '#4BD12A',
+  marginBottom: theme.spacing(4),
+
+  '& svg': {
+    fontSize: theme.typography.pxToRem(120),
+  },
+}))
+
+export const SuccessButtonsWrapper = styled(Grid)(() => ({
+  justifyContent: 'space-evenly',
+}))
+
+export const SuccessButton = styled(LinkButton)(() => ({
+  backgroundColor: '#0098E3',
+  border: '1px solid #909090',
+  padding: theme.spacing(1, 5),
+  borderRadius: theme.borders.round,
+  color: theme.palette.common.white,
+  fontSize: theme.typography.pxToRem(18),
+
+  '&:hover': {
+    backgroundColor: '#62C4FB',
+    color: theme.palette.common.black,
+    border: '1px solid #909090',
+  },
+
+  [theme.breakpoints.down('md')]: {
+    fontSize: theme.typography.pxToRem(12),
+    marginBottom: theme.spacing(4),
+  },
+}))
diff --git a/src/components/irregularity/helpers/Success/Success.tsx b/src/components/irregularity/helpers/Success/Success.tsx
new file mode 100644
index 000000000..6ed0b6776
--- /dev/null
+++ b/src/components/irregularity/helpers/Success/Success.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import { ThemeProvider } from '@mui/styles'
+import { Grid, Typography } from '@mui/material'
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
+
+import theme from 'common/theme'
+import { routes } from 'common/routes'
+
+import { Root, SuccessButton, SuccessButtonsWrapper, SuccessIcon } from './Success.styled'
+
+export default function Success() {
+  const { t } = useTranslation('irregularity')
+
+  useEffect(() => {
+    if (window) {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [])
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Root container>
+        <SuccessIcon item xs={12}>
+          <CheckCircleOutlinedIcon />
+        </SuccessIcon>
+        <Grid item xs={12}>
+          <Typography variant="h5">{t('steps.success.title')}</Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography variant="h6" my={5}>
+            {t('steps.success.subtitle')}
+          </Typography>
+        </Grid>
+        <SuccessButtonsWrapper container>
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">{t('steps.success.label-campaigns')}</Typography>
+            <SuccessButton href={routes.campaigns.index} variant="outlined">
+              {t('cta.campaigns')}
+            </SuccessButton>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">{t('steps.success.label-project')}</Typography>
+            <SuccessButton href={routes.aboutProject} variant="outlined">
+              {t('cta.project')}
+            </SuccessButton>
+          </Grid>
+        </SuccessButtonsWrapper>
+      </Root>
+    </ThemeProvider>
+  )
+}

From d9f6c4e13389d061d58917acf44f6d892fd23bb2 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 07:37:11 +0200
Subject: [PATCH 03/10] Extract common styles for Success and Fail forms

---
 .../IrregularityForm/IrregularityForm.tsx     |  2 +-
 src/components/irregularity/helpers/Fail.tsx  | 66 +++++--------------
 ...ess.styled.tsx => Irregularity.styled.tsx} |  7 +-
 .../helpers/{Success => }/Success.tsx         | 18 ++---
 4 files changed, 30 insertions(+), 63 deletions(-)
 rename src/components/irregularity/helpers/{Success/Success.styled.tsx => Irregularity.styled.tsx} (83%)
 rename src/components/irregularity/helpers/{Success => }/Success.tsx (74%)

diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
index 3519cee1e..40e7ad5f2 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
@@ -35,7 +35,7 @@ import StepIcon from '../StepperIcon'
 import Remark from '../helpers/Remark'
 import Greeting from '../steps/Greeting'
 import Contacts from '../steps/Contacts'
-import Success from '../helpers/Success/Success'
+import Success from '../helpers/Success'
 import stepsHandler from '../StepsHandler'
 import GenericForm from 'components/common/form/GenericForm'
 
diff --git a/src/components/irregularity/helpers/Fail.tsx b/src/components/irregularity/helpers/Fail.tsx
index 0137b5761..b460259ee 100644
--- a/src/components/irregularity/helpers/Fail.tsx
+++ b/src/components/irregularity/helpers/Fail.tsx
@@ -1,45 +1,14 @@
-import { useTranslation } from 'next-i18next'
 import { useEffect } from 'react'
 
+import { useTranslation } from 'next-i18next'
+
 import { ThemeProvider } from '@mui/styles'
-import { createStyles, makeStyles } from '@mui/styles'
 import { Grid, Typography, Button } from '@mui/material'
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'
 
 import theme from 'common/theme'
 
-import LinkButton from 'components/common/LinkButton'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    button: {
-      backgroundColor: '#0098E3',
-      border: '1px solid #909090',
-      padding: '10px 30px',
-      marginBottom: '5%',
-      borderRadius: '60px',
-      width: 'auto',
-      color: '#FFFFFF',
-      fontSize: '16px',
-      '&:hover': { backgroundColor: '#62C4FB', color: '#000000' },
-      [theme.breakpoints.down('sm')]: { fontSize: '12px' },
-    },
-    container: {
-      marginTop: '20%',
-      justifyContent: 'center',
-    },
-    gridIcon: {
-      marginBottom: '5%',
-      textAlign: 'center',
-    },
-    gridItem: {
-      textAlign: 'center',
-    },
-    containerButtons: {
-      justifyContent: 'space-evenly',
-    },
-  }),
-)
+import { Root, ButtonsWrapper, Icon, ActionButton } from './Irregularity.styled'
 
 type Props = {
   setFail: (fail: boolean) => void
@@ -47,7 +16,6 @@ type Props = {
 }
 
 export default function Fail({ setFail, setActiveStep }: Props) {
-  const classes = useStyles()
   const { t } = useTranslation('irregularity')
 
   useEffect(() => {
@@ -63,37 +31,37 @@ export default function Fail({ setFail, setActiveStep }: Props) {
 
   return (
     <ThemeProvider theme={theme}>
-      <Grid container spacing={7} className={classes.container}>
-        <Grid item xs={12} className={classes.gridIcon}>
-          <ErrorOutlineOutlinedIcon sx={{ transform: 'scale(5.0)', color: '#F44336' }} />
-        </Grid>
-        <Grid item xs={12} className={classes.gridItem}>
+      <Root container spacing={7}>
+        <Icon item xs={12} color="#F44336">
+          <ErrorOutlineOutlinedIcon />
+        </Icon>
+        <Grid item xs={12}>
           <Typography variant="h5">{t('steps.fail.title')}</Typography>
         </Grid>
-        <Grid item xs={12} className={classes.gridItem}>
+        <Grid item xs={12}>
           <Typography variant="h6">{t('steps.fail.subtitle')}</Typography>
         </Grid>
-        <Grid container item className={classes.containerButtons}>
+        <ButtonsWrapper container item>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-campaigns')}</Typography>
-            <LinkButton href={`/campaigns`} variant="outlined" className={classes.button}>
+            <ActionButton href={`/campaigns`} variant="outlined">
               {t('cta.campaigns')}
-            </LinkButton>
+            </ActionButton>
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-project')}</Typography>
-            <LinkButton href={`/about-project`} variant="outlined" className={classes.button}>
+            <ActionButton href={`/about-project`} variant="outlined">
               {t('cta.project')}
-            </LinkButton>
+            </ActionButton>
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-redo')}</Typography>
-            <Button onClick={handleClick} variant="outlined" className={classes.button}>
+            <Button onClick={handleClick} variant="outlined">
               {t('cta.redo')}
             </Button>
           </Grid>
-        </Grid>
-      </Grid>
+        </ButtonsWrapper>
+      </Root>
     </ThemeProvider>
   )
 }
diff --git a/src/components/irregularity/helpers/Success/Success.styled.tsx b/src/components/irregularity/helpers/Irregularity.styled.tsx
similarity index 83%
rename from src/components/irregularity/helpers/Success/Success.styled.tsx
rename to src/components/irregularity/helpers/Irregularity.styled.tsx
index b6fd22678..acdc90c57 100644
--- a/src/components/irregularity/helpers/Success/Success.styled.tsx
+++ b/src/components/irregularity/helpers/Irregularity.styled.tsx
@@ -9,9 +9,8 @@ export const Root = styled(Grid)(() => ({
   textAlign: 'center',
 }))
 
-export const SuccessIcon = styled(Grid)(() => ({
+export const Icon = styled(Grid)(() => ({
   justifyContent: 'center',
-  color: '#4BD12A',
   marginBottom: theme.spacing(4),
 
   '& svg': {
@@ -19,11 +18,11 @@ export const SuccessIcon = styled(Grid)(() => ({
   },
 }))
 
-export const SuccessButtonsWrapper = styled(Grid)(() => ({
+export const ButtonsWrapper = styled(Grid)(() => ({
   justifyContent: 'space-evenly',
 }))
 
-export const SuccessButton = styled(LinkButton)(() => ({
+export const ActionButton = styled(LinkButton)(() => ({
   backgroundColor: '#0098E3',
   border: '1px solid #909090',
   padding: theme.spacing(1, 5),
diff --git a/src/components/irregularity/helpers/Success/Success.tsx b/src/components/irregularity/helpers/Success.tsx
similarity index 74%
rename from src/components/irregularity/helpers/Success/Success.tsx
rename to src/components/irregularity/helpers/Success.tsx
index 6ed0b6776..451af4dca 100644
--- a/src/components/irregularity/helpers/Success/Success.tsx
+++ b/src/components/irregularity/helpers/Success.tsx
@@ -9,7 +9,7 @@ import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
 import theme from 'common/theme'
 import { routes } from 'common/routes'
 
-import { Root, SuccessButton, SuccessButtonsWrapper, SuccessIcon } from './Success.styled'
+import { Root, ActionButton, ButtonsWrapper, Icon } from './Irregularity.styled'
 
 export default function Success() {
   const { t } = useTranslation('irregularity')
@@ -23,9 +23,9 @@ export default function Success() {
   return (
     <ThemeProvider theme={theme}>
       <Root container>
-        <SuccessIcon item xs={12}>
+        <Icon item xs={12} color="#4BD12A">
           <CheckCircleOutlinedIcon />
-        </SuccessIcon>
+        </Icon>
         <Grid item xs={12}>
           <Typography variant="h5">{t('steps.success.title')}</Typography>
         </Grid>
@@ -34,20 +34,20 @@ export default function Success() {
             {t('steps.success.subtitle')}
           </Typography>
         </Grid>
-        <SuccessButtonsWrapper container>
+        <ButtonsWrapper container>
           <Grid item xs={12} sm={6}>
             <Typography variant="body1">{t('steps.success.label-campaigns')}</Typography>
-            <SuccessButton href={routes.campaigns.index} variant="outlined">
+            <ActionButton href={routes.campaigns.index} variant="outlined">
               {t('cta.campaigns')}
-            </SuccessButton>
+            </ActionButton>
           </Grid>
           <Grid item xs={12} sm={6}>
             <Typography variant="body1">{t('steps.success.label-project')}</Typography>
-            <SuccessButton href={routes.aboutProject} variant="outlined">
+            <ActionButton href={routes.aboutProject} variant="outlined">
               {t('cta.project')}
-            </SuccessButton>
+            </ActionButton>
           </Grid>
-        </SuccessButtonsWrapper>
+        </ButtonsWrapper>
       </Root>
     </ThemeProvider>
   )

From 3b3a611354080c9ffde98de4ba36f3fbd0edc3d7 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 10:44:10 +0200
Subject: [PATCH 04/10] Update RepeatMessage button on Fail component

---
 src/components/irregularity/helpers/Fail.tsx  | 16 +++++++++----
 .../helpers/Irregularity.styled.tsx           | 24 +++++++++++++++++--
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/irregularity/helpers/Fail.tsx b/src/components/irregularity/helpers/Fail.tsx
index b460259ee..78e1f265d 100644
--- a/src/components/irregularity/helpers/Fail.tsx
+++ b/src/components/irregularity/helpers/Fail.tsx
@@ -8,7 +8,13 @@ import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'
 
 import theme from 'common/theme'
 
-import { Root, ButtonsWrapper, Icon, ActionButton } from './Irregularity.styled'
+import {
+  Root,
+  ButtonsWrapper,
+  Icon,
+  ActionButton,
+  RepeatMessageButton,
+} from './Irregularity.styled'
 
 type Props = {
   setFail: (fail: boolean) => void
@@ -31,14 +37,14 @@ export default function Fail({ setFail, setActiveStep }: Props) {
 
   return (
     <ThemeProvider theme={theme}>
-      <Root container spacing={7}>
+      <Root container>
         <Icon item xs={12} color="#F44336">
           <ErrorOutlineOutlinedIcon />
         </Icon>
         <Grid item xs={12}>
           <Typography variant="h5">{t('steps.fail.title')}</Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} my={5}>
           <Typography variant="h6">{t('steps.fail.subtitle')}</Typography>
         </Grid>
         <ButtonsWrapper container item>
@@ -56,9 +62,9 @@ export default function Fail({ setFail, setActiveStep }: Props) {
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-redo')}</Typography>
-            <Button onClick={handleClick} variant="outlined">
+            <RepeatMessageButton onClick={handleClick} variant="outlined">
               {t('cta.redo')}
-            </Button>
+            </RepeatMessageButton>
           </Grid>
         </ButtonsWrapper>
       </Root>
diff --git a/src/components/irregularity/helpers/Irregularity.styled.tsx b/src/components/irregularity/helpers/Irregularity.styled.tsx
index acdc90c57..2acfccef0 100644
--- a/src/components/irregularity/helpers/Irregularity.styled.tsx
+++ b/src/components/irregularity/helpers/Irregularity.styled.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles'
-import { Grid } from '@mui/material'
+import { Button, Grid } from '@mui/material'
 
 import LinkButton from 'components/common/LinkButton'
 import theme from 'common/theme'
@@ -37,7 +37,27 @@ export const ActionButton = styled(LinkButton)(() => ({
   },
 
   [theme.breakpoints.down('md')]: {
-    fontSize: theme.typography.pxToRem(12),
+    fontSize: theme.typography.pxToRem(11),
+    marginBottom: theme.spacing(4),
+  },
+}))
+
+export const RepeatMessageButton = styled(Button)(() => ({
+  backgroundColor: '#0098E3',
+  border: '1px solid #909090',
+  padding: theme.spacing(1, 5),
+  borderRadius: theme.borders.round,
+  color: theme.palette.common.white,
+  fontSize: theme.typography.pxToRem(18),
+
+  '&:hover': {
+    backgroundColor: '#62C4FB',
+    color: theme.palette.common.black,
+    border: '1px solid #909090',
+  },
+
+  [theme.breakpoints.down('md')]: {
+    fontSize: theme.typography.pxToRem(11),
     marginBottom: theme.spacing(4),
   },
 }))

From 310ae90615c86ec4062aea5d7f35dd79dd9ecf8a Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 10:52:32 +0200
Subject: [PATCH 05/10] Get button color from theme

---
 src/components/irregularity/Actions.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/irregularity/Actions.tsx b/src/components/irregularity/Actions.tsx
index ea7bcedb3..5ba119499 100644
--- a/src/components/irregularity/Actions.tsx
+++ b/src/components/irregularity/Actions.tsx
@@ -22,7 +22,11 @@ const useStyles = makeStyles((theme: Theme) =>
       color: '#FFFFFF',
       fontSize: '18px',
 
-      '&:hover': { backgroundColor: '#62C4FB', color: '#000000', border: '1px solid #909090' },
+      '&:hover': {
+        backgroundColor: '#62C4FB',
+        color: theme.palette.common.black,
+        border: '1px solid #909090',
+      },
       [theme.breakpoints.down('sm')]: { fontSize: '12px' },
     },
     actions: {

From eec2617637532a68b1d7cc1262af79fcd60c85bd Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 14:47:05 +0200
Subject: [PATCH 06/10] Remove makeStyles for Actions component, reuse styles

---
 src/components/irregularity/Actions.tsx       | 66 +++++--------------
 src/components/irregularity/helpers/Fail.tsx  | 20 ++----
 .../helpers/Irregularity.styled.tsx           |  4 +-
 .../irregularity/helpers/Success.tsx          | 10 +--
 4 files changed, 30 insertions(+), 70 deletions(-)

diff --git a/src/components/irregularity/Actions.tsx b/src/components/irregularity/Actions.tsx
index 5ba119499..942e5f9db 100644
--- a/src/components/irregularity/Actions.tsx
+++ b/src/components/irregularity/Actions.tsx
@@ -1,40 +1,14 @@
 import { MouseEvent } from 'react'
-import { useTranslation } from 'next-i18next'
 
-import { Button, Grid, Theme } from '@mui/material'
-import { createStyles, makeStyles } from '@mui/styles'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import { useTranslation } from 'next-i18next'
 
 import { CampaignResponse } from 'gql/campaigns'
 
-import LinkButton from 'components/common/LinkButton'
-import SubmitButton from 'components/common/form/SubmitButton'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    button: {
-      backgroundColor: '#0098E3',
-      border: '1px solid #909090',
-      padding: '10px 40px',
-      borderRadius: '60px',
-      width: 'auto',
-      color: '#FFFFFF',
-      fontSize: '18px',
+import { Grid } from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
-      '&:hover': {
-        backgroundColor: '#62C4FB',
-        color: theme.palette.common.black,
-        border: '1px solid #909090',
-      },
-      [theme.breakpoints.down('sm')]: { fontSize: '12px' },
-    },
-    actions: {
-      justifyContent: 'space-between',
-      [theme.breakpoints.down('md')]: { justifyContent: 'center' },
-    },
-  }),
-)
+import { ActionButton, ActionLinkButton, Root } from './helpers/Irregularity.styled'
 
 type ActionsProps = {
   nextLabel: string
@@ -50,45 +24,37 @@ export default function Actions({
   onBack,
   nextLabel,
   backLabel,
-  loading = false,
   disableBack = false,
   activeStep,
   campaign,
 }: ActionsProps) {
   const { t } = useTranslation('irregularity')
-  const classes = useStyles()
 
   return (
-    <Grid container item xs={12} spacing={3} className={classes.actions}>
+    <Root container item xs={12} spacing={3} justifyContent="space-between">
       <Grid item sx={{ textAlign: 'left' }}>
         {activeStep === 0 ? (
-          <LinkButton
+          <ActionLinkButton
             href={`/campaigns/${campaign.slug}`}
             variant="outlined"
-            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}
-            className={classes.button}>
+            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}>
             {t(backLabel)}
-          </LinkButton>
+          </ActionLinkButton>
         ) : (
-          <Button
+          <ActionButton
             fullWidth
             disabled={disableBack}
             onClick={onBack}
-            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}
-            className={classes.button}>
+            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}>
             {t(backLabel)}
-          </Button>
+          </ActionButton>
         )}
       </Grid>
       <Grid item sx={{ textAlign: 'right' }}>
-        <SubmitButton
-          fullWidth
-          label={t(nextLabel)}
-          loading={loading}
-          endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}
-          className={classes.button}
-        />
+        <ActionButton fullWidth endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}>
+          {t(nextLabel)}
+        </ActionButton>
       </Grid>
-    </Grid>
+    </Root>
   )
 }
diff --git a/src/components/irregularity/helpers/Fail.tsx b/src/components/irregularity/helpers/Fail.tsx
index 78e1f265d..236a9a91f 100644
--- a/src/components/irregularity/helpers/Fail.tsx
+++ b/src/components/irregularity/helpers/Fail.tsx
@@ -8,13 +8,7 @@ import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'
 
 import theme from 'common/theme'
 
-import {
-  Root,
-  ButtonsWrapper,
-  Icon,
-  ActionButton,
-  RepeatMessageButton,
-} from './Irregularity.styled'
+import { Root, ButtonsWrapper, Icon, ActionLinkButton, ActionButton } from './Irregularity.styled'
 
 type Props = {
   setFail: (fail: boolean) => void
@@ -50,21 +44,21 @@ export default function Fail({ setFail, setActiveStep }: Props) {
         <ButtonsWrapper container item>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-campaigns')}</Typography>
-            <ActionButton href={`/campaigns`} variant="outlined">
+            <ActionLinkButton href={`/campaigns`} variant="outlined">
               {t('cta.campaigns')}
-            </ActionButton>
+            </ActionLinkButton>
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-project')}</Typography>
-            <ActionButton href={`/about-project`} variant="outlined">
+            <ActionLinkButton href={`/about-project`} variant="outlined">
               {t('cta.project')}
-            </ActionButton>
+            </ActionLinkButton>
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-redo')}</Typography>
-            <RepeatMessageButton onClick={handleClick} variant="outlined">
+            <ActionButton onClick={handleClick} variant="outlined">
               {t('cta.redo')}
-            </RepeatMessageButton>
+            </ActionButton>
           </Grid>
         </ButtonsWrapper>
       </Root>
diff --git a/src/components/irregularity/helpers/Irregularity.styled.tsx b/src/components/irregularity/helpers/Irregularity.styled.tsx
index 2acfccef0..1836acef5 100644
--- a/src/components/irregularity/helpers/Irregularity.styled.tsx
+++ b/src/components/irregularity/helpers/Irregularity.styled.tsx
@@ -22,7 +22,7 @@ export const ButtonsWrapper = styled(Grid)(() => ({
   justifyContent: 'space-evenly',
 }))
 
-export const ActionButton = styled(LinkButton)(() => ({
+export const ActionLinkButton = styled(LinkButton)(() => ({
   backgroundColor: '#0098E3',
   border: '1px solid #909090',
   padding: theme.spacing(1, 5),
@@ -42,7 +42,7 @@ export const ActionButton = styled(LinkButton)(() => ({
   },
 }))
 
-export const RepeatMessageButton = styled(Button)(() => ({
+export const ActionButton = styled(Button)(() => ({
   backgroundColor: '#0098E3',
   border: '1px solid #909090',
   padding: theme.spacing(1, 5),
diff --git a/src/components/irregularity/helpers/Success.tsx b/src/components/irregularity/helpers/Success.tsx
index 451af4dca..bbe6d0a66 100644
--- a/src/components/irregularity/helpers/Success.tsx
+++ b/src/components/irregularity/helpers/Success.tsx
@@ -9,7 +9,7 @@ import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
 import theme from 'common/theme'
 import { routes } from 'common/routes'
 
-import { Root, ActionButton, ButtonsWrapper, Icon } from './Irregularity.styled'
+import { Root, ActionLinkButton, ButtonsWrapper, Icon } from './Irregularity.styled'
 
 export default function Success() {
   const { t } = useTranslation('irregularity')
@@ -37,15 +37,15 @@ export default function Success() {
         <ButtonsWrapper container>
           <Grid item xs={12} sm={6}>
             <Typography variant="body1">{t('steps.success.label-campaigns')}</Typography>
-            <ActionButton href={routes.campaigns.index} variant="outlined">
+            <ActionLinkButton href={routes.campaigns.index} variant="outlined">
               {t('cta.campaigns')}
-            </ActionButton>
+            </ActionLinkButton>
           </Grid>
           <Grid item xs={12} sm={6}>
             <Typography variant="body1">{t('steps.success.label-project')}</Typography>
-            <ActionButton href={routes.aboutProject} variant="outlined">
+            <ActionLinkButton href={routes.aboutProject} variant="outlined">
               {t('cta.project')}
-            </ActionButton>
+            </ActionLinkButton>
           </Grid>
         </ButtonsWrapper>
       </Root>

From 5166ab32dcb67fde7f581bdd172c298112b8be85 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 15:04:51 +0200
Subject: [PATCH 07/10] Remove makeStyles for Edit form and Create form, reuse
 styles

---
 .../admin/grid/CommonAdminStyles.styled.tsx   | 15 ++++++
 .../irregularity/admin/grid/CreateForm.tsx    | 48 +++++++------------
 .../irregularity/admin/grid/EditForm.tsx      | 48 +++++++------------
 3 files changed, 50 insertions(+), 61 deletions(-)
 create mode 100644 src/components/irregularity/admin/grid/CommonAdminStyles.styled.tsx

diff --git a/src/components/irregularity/admin/grid/CommonAdminStyles.styled.tsx b/src/components/irregularity/admin/grid/CommonAdminStyles.styled.tsx
new file mode 100644
index 000000000..468f11a46
--- /dev/null
+++ b/src/components/irregularity/admin/grid/CommonAdminStyles.styled.tsx
@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles'
+import { Typography } from '@mui/material'
+
+import theme from 'common/theme'
+import FormTextField from 'components/common/form/FormTextField'
+
+export const Heading = styled(Typography)(() => ({
+  marginBottom: theme.spacing(5),
+  color: theme.palette.primary.dark,
+  textAlign: 'center',
+}))
+
+export const Content = styled(FormTextField)(() => ({
+  '& textarea': { resize: 'vertical' },
+}))
diff --git a/src/components/irregularity/admin/grid/CreateForm.tsx b/src/components/irregularity/admin/grid/CreateForm.tsx
index 4aa0a11b7..f46c2280b 100644
--- a/src/components/irregularity/admin/grid/CreateForm.tsx
+++ b/src/components/irregularity/admin/grid/CreateForm.tsx
@@ -1,26 +1,31 @@
-import * as yup from 'yup'
-import Link from 'next/link'
 import { useState } from 'react'
+
+import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
+
+import * as yup from 'yup'
+
+import { useMutation } from '@tanstack/react-query'
+
 import { AxiosError, AxiosResponse } from 'axios'
 
-import makeStyles from '@mui/styles/makeStyles'
-import createStyles from '@mui/styles/createStyles'
-import { Button, Grid, Typography } from '@mui/material'
+import { Button, Grid } from '@mui/material'
 
 import { routes } from 'common/routes'
+
 import { ApiErrors } from 'service/apiErrors'
+import { createIrregularity, uploadIrregularityFiles } from 'service/irregularity'
+
 import { AlertStore } from 'stores/AlertStore'
 
+import { Person } from 'gql/person'
+import { CampaignResponse } from 'gql/campaigns'
+
 import FileUpload from 'components/file-upload/FileUpload'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
-
-import { Person } from 'gql/person'
-import { CampaignResponse } from 'gql/campaigns'
 import {
   IrregularityInput,
   IrregularityResponse,
@@ -30,9 +35,7 @@ import {
   IrregularityStatus,
   UploadIrregularityFiles,
 } from 'components/irregularity/helpers/irregularity.types'
-
 import { email, name, phone } from 'common/form/validation'
-import { createIrregularity, uploadIrregularityFiles } from 'service/irregularity'
 
 import CampaignSelect from 'components/campaigns/CampaignSelect'
 import FileList from 'components/irregularity/helpers/FileList'
@@ -40,6 +43,8 @@ import StatusSelect from 'components/irregularity/helpers/StatusSelect'
 import NotifierTypeSelect from 'components/irregularity/helpers/NotifierTypeSelect'
 import IrregularityReasonSelect from 'components/irregularity/helpers/IrregularityReasonSelect'
 
+import { Content, Heading } from './CommonAdminStyles.styled'
+
 const validationSchema: yup.SchemaOf<IrregularityInput> = yup
   .object()
   .defined()
@@ -57,26 +62,12 @@ const validationSchema: yup.SchemaOf<IrregularityInput> = yup
     }),
   })
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    heading: {
-      marginBottom: theme.spacing(5),
-      color: theme.palette.primary.dark,
-      textAlign: 'center',
-    },
-    content: {
-      '& textarea': { resize: 'vertical' },
-    },
-  }),
-)
-
 type Props = {
   campaigns?: CampaignResponse[]
   person?: Person
 }
 
 export default function CreateForm({ campaigns, person }: Props) {
-  const classes = useStyles()
   const router = useRouter()
   const [files, setFiles] = useState<File[]>([])
   const { t } = useTranslation('irregularity')
@@ -140,9 +131,7 @@ export default function CreateForm({ campaigns, person }: Props) {
   return (
     <Grid container direction="column" component="section">
       <Grid item xs={12}>
-        <Typography variant="h5" component="h2" className={classes.heading}>
-          {t('admin.create-form')}
-        </Typography>
+        <Heading variant="h5">{t('admin.create-form')}</Heading>
       </Grid>
       <GenericForm
         onSubmit={onSubmit}
@@ -194,13 +183,12 @@ export default function CreateForm({ campaigns, person }: Props) {
             </Grid>
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
+            <Content
               rows={5}
               multiline
               type="text"
               name="description"
               label={t('admin.fields.description')}
-              className={classes.content}
             />
           </Grid>
           <Grid item xs={12}>
diff --git a/src/components/irregularity/admin/grid/EditForm.tsx b/src/components/irregularity/admin/grid/EditForm.tsx
index 573331b2e..c6d17d804 100644
--- a/src/components/irregularity/admin/grid/EditForm.tsx
+++ b/src/components/irregularity/admin/grid/EditForm.tsx
@@ -1,14 +1,22 @@
-import * as yup from 'yup'
-import Link from 'next/link'
 import { useState } from 'react'
+
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
+
+import * as yup from 'yup'
+
 import { AxiosError, AxiosResponse } from 'axios'
+
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-import { Button, Grid, List, ListItemText, Typography } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import createStyles from '@mui/styles/createStyles'
+import { ApiErrors } from 'service/apiErrors'
+import { endpoints } from 'service/apiEndpoints'
+import { editIrregularity, uploadIrregularityFiles } from 'service/irregularity'
+
+import { CampaignResponse } from 'gql/campaigns'
+
+import { Button, Grid, List, ListItemText } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { AlertStore } from 'stores/AlertStore'
@@ -16,9 +24,6 @@ import FileUpload from 'components/file-upload/FileUpload'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
-import { ApiErrors } from 'service/apiErrors'
-
-import { CampaignResponse } from 'gql/campaigns'
 import {
   IrregularityEditInput,
   IrregularityFileResponse,
@@ -31,10 +36,6 @@ import {
   UploadIrregularityFiles,
 } from 'components/irregularity/helpers/irregularity.types'
 import { email, name, phone } from 'common/form/validation'
-
-import { endpoints } from 'service/apiEndpoints'
-import { editIrregularity, uploadIrregularityFiles } from 'service/irregularity'
-
 import IrregularityFile from './IrregularityFile'
 import FileList from 'components/irregularity/helpers/FileList'
 import CampaignSelect from 'components/campaigns/CampaignSelect'
@@ -42,6 +43,8 @@ import NotifierTypeSelect from 'components/irregularity/helpers/NotifierTypeSele
 import StatusSelect from 'components/irregularity/helpers/StatusSelect'
 import IrregularityReasonSelect from 'components/irregularity/helpers/IrregularityReasonSelect'
 
+import { Content, Heading } from './CommonAdminStyles.styled'
+
 const validationSchema: yup.SchemaOf<IrregularityInput> = yup
   .object()
   .defined()
@@ -59,19 +62,6 @@ const validationSchema: yup.SchemaOf<IrregularityInput> = yup
     }),
   })
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    heading: {
-      marginBottom: theme.spacing(5),
-      color: theme.palette.primary.dark,
-      textAlign: 'center',
-    },
-    content: {
-      '& textarea': { resize: 'vertical' },
-    },
-  }),
-)
-
 type Props = {
   campaigns: CampaignResponse[]
   irregularity: IrregularityResponse
@@ -82,7 +72,6 @@ export default function EditForm({ campaigns, irregularity, irregularityFiles }:
   const { t } = useTranslation('irregularity')
   const router = useRouter()
   const queryClient = useQueryClient()
-  const classes = useStyles()
 
   const [files, setFiles] = useState<File[]>([])
 
@@ -148,9 +137,7 @@ export default function EditForm({ campaigns, irregularity, irregularityFiles }:
   return (
     <Grid container direction="column" component="section">
       <Grid item xs={12}>
-        <Typography variant="h5" component="h2" className={classes.heading}>
-          {t('admin.edit-form')}
-        </Typography>
+        <Heading variant="h5">{t('admin.edit-form')}</Heading>
       </Grid>
       <GenericForm
         onSubmit={onSubmit}
@@ -202,13 +189,12 @@ export default function EditForm({ campaigns, irregularity, irregularityFiles }:
             </Grid>
           </Grid>
           <Grid item xs={12}>
-            <FormTextField
+            <Content
               rows={5}
               multiline
               type="text"
               name="description"
               label={t('admin.fields.description')}
-              className={classes.content}
             />
           </Grid>
           <Grid item xs={12}>

From 1118ca955b9005d2e1eec591f3f23b8394c2f3bf Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 22:23:54 +0200
Subject: [PATCH 08/10] remove makeStyles for Stepper Icon

---
 src/components/irregularity/Actions.tsx       | 19 +++++--
 .../IrregularityForm.styled.tsx               | 11 ++++
 .../IrregularityForm/IrregularityForm.tsx     |  2 +-
 src/components/irregularity/StepperIcon.tsx   | 57 -------------------
 .../StepperIcon/StepperIcon.styled.tsx        | 17 ++++++
 .../irregularity/StepperIcon/StepperIcon.tsx  | 15 +++++
 .../helpers/Irregularity.styled.tsx           | 21 +++++++
 7 files changed, 79 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/irregularity/StepperIcon.tsx
 create mode 100644 src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
 create mode 100644 src/components/irregularity/StepperIcon/StepperIcon.tsx

diff --git a/src/components/irregularity/Actions.tsx b/src/components/irregularity/Actions.tsx
index 942e5f9db..4174f7cdb 100644
--- a/src/components/irregularity/Actions.tsx
+++ b/src/components/irregularity/Actions.tsx
@@ -8,7 +8,12 @@ import { Grid } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
-import { ActionButton, ActionLinkButton, Root } from './helpers/Irregularity.styled'
+import {
+  ActionButton,
+  ActionLinkButton,
+  ActionSubmitButton,
+  Root,
+} from './helpers/Irregularity.styled'
 
 type ActionsProps = {
   nextLabel: string
@@ -26,6 +31,7 @@ export default function Actions({
   backLabel,
   disableBack = false,
   activeStep,
+  loading = false,
   campaign,
 }: ActionsProps) {
   const { t } = useTranslation('irregularity')
@@ -50,10 +56,13 @@ export default function Actions({
           </ActionButton>
         )}
       </Grid>
-      <Grid item sx={{ textAlign: 'right' }}>
-        <ActionButton fullWidth endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}>
-          {t(nextLabel)}
-        </ActionButton>
+      <Grid item>
+        <ActionSubmitButton
+          fullWidth
+          label={t(nextLabel)}
+          loading={loading}
+          endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}
+        />
       </Grid>
     </Root>
   )
diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
index 36eea6773..c426500e6 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
@@ -9,6 +9,17 @@ export const StyledStep = styled(Step)(() => ({
   '& span': {
     padding: 0,
   },
+
+  '& .Mui-active': {
+    backgroundColor: theme.palette.info.light,
+    height: theme.spacing(5.25),
+    width: theme.spacing(5.25),
+    borderRadius: theme.borders.round,
+
+    '& span': {
+      color: theme.palette.common.white,
+    },
+  },
 }))
 
 export const StyledStepper = styled(Stepper)(() => ({
diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
index 40e7ad5f2..da4026300 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
+++ b/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
@@ -31,7 +31,7 @@ import { validationSchema } from '../helpers/validation-schema'
 import Actions from '../Actions'
 import Info from '../steps/Info'
 import Fail from '../helpers/Fail'
-import StepIcon from '../StepperIcon'
+import StepIcon from '../StepperIcon/StepperIcon'
 import Remark from '../helpers/Remark'
 import Greeting from '../steps/Greeting'
 import Contacts from '../steps/Contacts'
diff --git a/src/components/irregularity/StepperIcon.tsx b/src/components/irregularity/StepperIcon.tsx
deleted file mode 100644
index cfa9e9f28..000000000
--- a/src/components/irregularity/StepperIcon.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-
-import clsx from 'clsx'
-
-import { Theme } from '@mui/material'
-import makeStyles from '@mui/styles/makeStyles'
-import createStyles from '@mui/styles/createStyles'
-import { StepIconProps } from '@mui/material/StepIcon'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      alignItems: 'center',
-      backgroundColor: '#fff',
-      borderRadius: '50%',
-      border: '3px solid',
-      borderColor: theme.palette.info.light,
-      color: '#000000',
-      display: 'flex',
-      width: 40,
-      height: 40,
-      justifyContent: 'center',
-      zIndex: 1,
-      fontSize: '28px',
-    },
-    active: {
-      backgroundColor: theme.palette.info.light,
-      color: '#ffffff',
-      height: 42,
-      width: 42,
-    },
-    completed: {
-      color: '#000000',
-    },
-  }),
-)
-
-export default function StepIcon(props: StepIconProps) {
-  const classes = useStyles()
-  const { active, completed } = props
-
-  const icons: { [index: string]: React.ReactElement } = {
-    1: <span>1</span>,
-    2: <span>2</span>,
-    3: <span>3</span>,
-  }
-
-  return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-        [classes.completed]: completed,
-      })}>
-      {icons[String(props.icon)]}
-    </div>
-  )
-}
diff --git a/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx b/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
new file mode 100644
index 000000000..2fcbfd949
--- /dev/null
+++ b/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles'
+import { Grid } from '@mui/material'
+
+import theme from 'common/theme'
+
+export const Root = styled(Grid)(() => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.borders.round,
+  border: `3px solid ${theme.palette.info.light}`,
+  color: theme.palette.common.black,
+  display: 'flex',
+  width: theme.spacing(5),
+  height: theme.spacing(5),
+  zIndex: 1,
+  fontSize: theme.typography.pxToRem(28),
+}))
diff --git a/src/components/irregularity/StepperIcon/StepperIcon.tsx b/src/components/irregularity/StepperIcon/StepperIcon.tsx
new file mode 100644
index 000000000..41184edcc
--- /dev/null
+++ b/src/components/irregularity/StepperIcon/StepperIcon.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { StepIconProps } from '@mui/material/StepIcon'
+
+import { Root } from './StepperIcon.styled'
+
+export default function StepIcon(props: StepIconProps) {
+  const icons: { [index: string]: React.ReactElement } = {
+    1: <span>1</span>,
+    2: <span>2</span>,
+    3: <span>3</span>,
+  }
+
+  return <Root>{icons[String(props.icon)]}</Root>
+}
diff --git a/src/components/irregularity/helpers/Irregularity.styled.tsx b/src/components/irregularity/helpers/Irregularity.styled.tsx
index 1836acef5..bc25c3ef1 100644
--- a/src/components/irregularity/helpers/Irregularity.styled.tsx
+++ b/src/components/irregularity/helpers/Irregularity.styled.tsx
@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles'
 import { Button, Grid } from '@mui/material'
 
 import LinkButton from 'components/common/LinkButton'
+import SubmitButton from 'components/common/form/SubmitButton'
 import theme from 'common/theme'
 
 export const Root = styled(Grid)(() => ({
@@ -61,3 +62,23 @@ export const ActionButton = styled(Button)(() => ({
     marginBottom: theme.spacing(4),
   },
 }))
+
+export const ActionSubmitButton = styled(SubmitButton)(() => ({
+  backgroundColor: '#0098E3',
+  border: '1px solid #909090',
+  padding: theme.spacing(1, 5),
+  borderRadius: theme.borders.round,
+  color: theme.palette.common.white,
+  fontSize: theme.typography.pxToRem(18),
+
+  '&:hover': {
+    backgroundColor: '#62C4FB',
+    color: theme.palette.common.black,
+    border: '1px solid #909090',
+  },
+
+  [theme.breakpoints.down('md')]: {
+    fontSize: theme.typography.pxToRem(11),
+    marginBottom: theme.spacing(4),
+  },
+}))

From ec55c3d8de1bd276b4412c20f14087c171712a5c Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Sat, 26 Nov 2022 22:29:07 +0200
Subject: [PATCH 09/10] Reuse styles

---
 src/components/campaigns/IrregularityPage.tsx   |  2 +-
 .../StepperIcon/StepperIcon.styled.tsx          | 17 -----------------
 .../IrregularityForm.styled.tsx                 | 13 +++++++++++++
 .../IrregularityForm.tsx                        | 12 ++++++------
 .../{StepperIcon => helpers}/StepperIcon.tsx    |  4 ++--
 5 files changed, 22 insertions(+), 26 deletions(-)
 delete mode 100644 src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
 rename src/components/irregularity/{IrregularityForm => helpers}/IrregularityForm.styled.tsx (72%)
 rename src/components/irregularity/{IrregularityForm => helpers}/IrregularityForm.tsx (96%)
 rename src/components/irregularity/{StepperIcon => helpers}/StepperIcon.tsx (66%)

diff --git a/src/components/campaigns/IrregularityPage.tsx b/src/components/campaigns/IrregularityPage.tsx
index df709c5b6..d7687df64 100644
--- a/src/components/campaigns/IrregularityPage.tsx
+++ b/src/components/campaigns/IrregularityPage.tsx
@@ -5,7 +5,7 @@ import { Container } from '@mui/material'
 import { useViewCampaign } from 'common/hooks/campaigns'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import Layout from 'components/layout/Layout'
-import IrregularityForm from 'components/irregularity/IrregularityForm/IrregularityForm'
+import IrregularityForm from 'components/irregularity/helpers/IrregularityForm'
 import CenteredSpinner from 'components/common/CenteredSpinner'
 
 type Props = { slug: string }
diff --git a/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx b/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
deleted file mode 100644
index 2fcbfd949..000000000
--- a/src/components/irregularity/StepperIcon/StepperIcon.styled.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Grid } from '@mui/material'
-
-import theme from 'common/theme'
-
-export const Root = styled(Grid)(() => ({
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: theme.borders.round,
-  border: `3px solid ${theme.palette.info.light}`,
-  color: theme.palette.common.black,
-  display: 'flex',
-  width: theme.spacing(5),
-  height: theme.spacing(5),
-  zIndex: 1,
-  fontSize: theme.typography.pxToRem(28),
-}))
diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx b/src/components/irregularity/helpers/IrregularityForm.styled.tsx
similarity index 72%
rename from src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
rename to src/components/irregularity/helpers/IrregularityForm.styled.tsx
index c426500e6..cea1b6433 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.styled.tsx
+++ b/src/components/irregularity/helpers/IrregularityForm.styled.tsx
@@ -40,3 +40,16 @@ export const ColorlibConnector = styled(StepConnector)(() => ({
   height: 3,
   backgroundColor: theme.palette.info.light,
 }))
+
+export const StyledStepperIcon = styled(Grid)(() => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.borders.round,
+  border: `3px solid ${theme.palette.info.light}`,
+  color: theme.palette.common.black,
+  display: 'flex',
+  width: theme.spacing(5),
+  height: theme.spacing(5),
+  zIndex: 1,
+  fontSize: theme.typography.pxToRem(28),
+}))
diff --git a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx b/src/components/irregularity/helpers/IrregularityForm.tsx
similarity index 96%
rename from src/components/irregularity/IrregularityForm/IrregularityForm.tsx
rename to src/components/irregularity/helpers/IrregularityForm.tsx
index da4026300..edb651695 100644
--- a/src/components/irregularity/IrregularityForm/IrregularityForm.tsx
+++ b/src/components/irregularity/helpers/IrregularityForm.tsx
@@ -25,17 +25,17 @@ import {
   IrregularityReason,
   IrregularityUploadImage,
   UploadIrregularityFiles,
-} from '../helpers/irregularity.types'
-import { validationSchema } from '../helpers/validation-schema'
+} from './irregularity.types'
+import { validationSchema } from './validation-schema'
 
 import Actions from '../Actions'
 import Info from '../steps/Info'
-import Fail from '../helpers/Fail'
-import StepIcon from '../StepperIcon/StepperIcon'
-import Remark from '../helpers/Remark'
+import Fail from './Fail'
+import StepIcon from './StepperIcon'
+import Remark from './Remark'
 import Greeting from '../steps/Greeting'
 import Contacts from '../steps/Contacts'
-import Success from '../helpers/Success'
+import Success from './Success'
 import stepsHandler from '../StepsHandler'
 import GenericForm from 'components/common/form/GenericForm'
 
diff --git a/src/components/irregularity/StepperIcon/StepperIcon.tsx b/src/components/irregularity/helpers/StepperIcon.tsx
similarity index 66%
rename from src/components/irregularity/StepperIcon/StepperIcon.tsx
rename to src/components/irregularity/helpers/StepperIcon.tsx
index 41184edcc..dd3a9d6fa 100644
--- a/src/components/irregularity/StepperIcon/StepperIcon.tsx
+++ b/src/components/irregularity/helpers/StepperIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { StepIconProps } from '@mui/material/StepIcon'
 
-import { Root } from './StepperIcon.styled'
+import { StyledStepperIcon } from './IrregularityForm.styled'
 
 export default function StepIcon(props: StepIconProps) {
   const icons: { [index: string]: React.ReactElement } = {
@@ -11,5 +11,5 @@ export default function StepIcon(props: StepIconProps) {
     3: <span>3</span>,
   }
 
-  return <Root>{icons[String(props.icon)]}</Root>
+  return <StyledStepperIcon>{icons[String(props.icon)]}</StyledStepperIcon>
 }

From abe0dc157f25261f02a18595f8c3bb758a4a7955 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpachka888@abv.bg>
Date: Mon, 28 Nov 2022 18:45:48 +0200
Subject: [PATCH 10/10] Fix pr comments

---
 src/components/irregularity/Actions.tsx              |  6 +++---
 src/components/irregularity/helpers/Fail.tsx         |  7 ++++---
 .../irregularity/helpers/Irregularity.styled.tsx     | 12 ++++++------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/irregularity/Actions.tsx b/src/components/irregularity/Actions.tsx
index 4174f7cdb..dc3ad9311 100644
--- a/src/components/irregularity/Actions.tsx
+++ b/src/components/irregularity/Actions.tsx
@@ -43,7 +43,7 @@ export default function Actions({
           <ActionLinkButton
             href={`/campaigns/${campaign.slug}`}
             variant="outlined"
-            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}>
+            startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t(backLabel)}
           </ActionLinkButton>
         ) : (
@@ -51,7 +51,7 @@ export default function Actions({
             fullWidth
             disabled={disableBack}
             onClick={onBack}
-            startIcon={<ArrowBackIosIcon sx={{ transform: 'scale(0.8)' }} />}>
+            startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t(backLabel)}
           </ActionButton>
         )}
@@ -61,7 +61,7 @@ export default function Actions({
           fullWidth
           label={t(nextLabel)}
           loading={loading}
-          endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}
+          endIcon={<ArrowForwardIosIcon fontSize="small" />}
         />
       </Grid>
     </Root>
diff --git a/src/components/irregularity/helpers/Fail.tsx b/src/components/irregularity/helpers/Fail.tsx
index 236a9a91f..3cc1cf7ff 100644
--- a/src/components/irregularity/helpers/Fail.tsx
+++ b/src/components/irregularity/helpers/Fail.tsx
@@ -3,10 +3,11 @@ import { useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 
 import { ThemeProvider } from '@mui/styles'
-import { Grid, Typography, Button } from '@mui/material'
+import { Grid, Typography } from '@mui/material'
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'
 
 import theme from 'common/theme'
+import { routes } from 'common/routes'
 
 import { Root, ButtonsWrapper, Icon, ActionLinkButton, ActionButton } from './Irregularity.styled'
 
@@ -44,13 +45,13 @@ export default function Fail({ setFail, setActiveStep }: Props) {
         <ButtonsWrapper container item>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-campaigns')}</Typography>
-            <ActionLinkButton href={`/campaigns`} variant="outlined">
+            <ActionLinkButton href={routes.campaigns.index} variant="outlined">
               {t('cta.campaigns')}
             </ActionLinkButton>
           </Grid>
           <Grid item>
             <Typography variant="body1">{t('steps.fail.label-project')}</Typography>
-            <ActionLinkButton href={`/about-project`} variant="outlined">
+            <ActionLinkButton href={routes.aboutProject} variant="outlined">
               {t('cta.project')}
             </ActionLinkButton>
           </Grid>
diff --git a/src/components/irregularity/helpers/Irregularity.styled.tsx b/src/components/irregularity/helpers/Irregularity.styled.tsx
index bc25c3ef1..8eb5f1a3e 100644
--- a/src/components/irregularity/helpers/Irregularity.styled.tsx
+++ b/src/components/irregularity/helpers/Irregularity.styled.tsx
@@ -25,7 +25,7 @@ export const ButtonsWrapper = styled(Grid)(() => ({
 
 export const ActionLinkButton = styled(LinkButton)(() => ({
   backgroundColor: '#0098E3',
-  border: '1px solid #909090',
+  border: `1px solid ${theme.palette.secondary.light}`,
   padding: theme.spacing(1, 5),
   borderRadius: theme.borders.round,
   color: theme.palette.common.white,
@@ -34,7 +34,7 @@ export const ActionLinkButton = styled(LinkButton)(() => ({
   '&:hover': {
     backgroundColor: '#62C4FB',
     color: theme.palette.common.black,
-    border: '1px solid #909090',
+    border: `1px solid ${theme.palette.secondary.light}`,
   },
 
   [theme.breakpoints.down('md')]: {
@@ -45,7 +45,7 @@ export const ActionLinkButton = styled(LinkButton)(() => ({
 
 export const ActionButton = styled(Button)(() => ({
   backgroundColor: '#0098E3',
-  border: '1px solid #909090',
+  border: `1px solid ${theme.palette.secondary.light}`,
   padding: theme.spacing(1, 5),
   borderRadius: theme.borders.round,
   color: theme.palette.common.white,
@@ -54,7 +54,7 @@ export const ActionButton = styled(Button)(() => ({
   '&:hover': {
     backgroundColor: '#62C4FB',
     color: theme.palette.common.black,
-    border: '1px solid #909090',
+    border: `1px solid ${theme.palette.secondary.light}`,
   },
 
   [theme.breakpoints.down('md')]: {
@@ -65,7 +65,7 @@ export const ActionButton = styled(Button)(() => ({
 
 export const ActionSubmitButton = styled(SubmitButton)(() => ({
   backgroundColor: '#0098E3',
-  border: '1px solid #909090',
+  border: `1px solid ${theme.palette.secondary.light}`,
   padding: theme.spacing(1, 5),
   borderRadius: theme.borders.round,
   color: theme.palette.common.white,
@@ -74,7 +74,7 @@ export const ActionSubmitButton = styled(SubmitButton)(() => ({
   '&:hover': {
     backgroundColor: '#62C4FB',
     color: theme.palette.common.black,
-    border: '1px solid #909090',
+    border: `1px solid ${theme.palette.secondary.light}`,
   },
 
   [theme.breakpoints.down('md')]: {