Remove deprecated withStyle/makeStyle from Irregularity, Create and Edit forms, Success, Fail and Actions components, Stepper icon

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/helpers/IrregularityForm'
 import CenteredSpinner from 'components/common/CenteredSpinner'
 
 type Props = { slug: string }

src/components/irregularity/Actions.tsx

@@ -1,35 +1,19 @@
 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'
+import { Grid } from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    button: {
-      backgroundColor: '#0098E3',
-      border: '1px solid #909090',
-      padding: '10px 40px',
-      borderRadius: '60px',
-      width: 'auto',
-      color: '#FFFFFF',
-      fontSize: '18px',
-      '&:hover': { backgroundColor: '#62C4FB', color: '#000000' },
-      [theme.breakpoints.down('sm')]: { fontSize: '12px' },
-    },
-    actions: {
-      justifyContent: 'space-between',
-      [theme.breakpoints.down('md')]: { justifyContent: 'center' },
-    },
-  }),
-)
+import {
+  ActionButton,
+  ActionLinkButton,
+  ActionSubmitButton,
+  Root,
+} from './helpers/Irregularity.styled'
 
 type ActionsProps = {
   nextLabel: string
@@ -45,45 +29,41 @@ export default function Actions({
   onBack,
   nextLabel,
   backLabel,
-  loading = false,
   disableBack = false,
   activeStep,
+  loading = false,
   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
+      <Grid item>
+        <ActionSubmitButton
           fullWidth
           label={t(nextLabel)}
           loading={loading}
           endIcon={<ArrowForwardIosIcon sx={{ transform: 'scale(0.8)' }} />}
-          className={classes.button}
         />
       </Grid>
-    </Grid>
+    </Root>
   )
 }

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' },
+}))

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,16 +35,16 @@ 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'
 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}>