Update the buttons on Irregularity page (#1875)

Co-authored-by: ani-kalpachka <[email protected]>
podkrepi-bg · Jul 9, 2024 · 6cb0d41 · 6cb0d41
1 parent e39bab4
commit 6cb0d41
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 44 deletions.
diff --git a/src/components/client/irregularity/Actions.tsx b/src/components/client/irregularity/Actions.tsx
@@ -8,12 +8,7 @@ import { Grid } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
-import {
-  ActionButton,
-  ActionLinkButton,
-  ActionSubmitButton,
-  Root,
-} from './helpers/Irregularity.styled'
+import { ActionButton, ActionLinkButton, ActionSubmitButton } from './helpers/Irregularity.styled'
 
 type ActionsProps = {
   nextLabel: string
@@ -37,12 +32,12 @@ export default function Actions({
   const { t } = useTranslation('irregularity')
 
   return (
-    <Root container item xs={12} spacing={3} justifyContent="space-between">
+    <Grid container item xs={12} spacing={3} justifyContent="space-between">
       <Grid item sx={{ textAlign: 'left' }}>
         {activeStep === 0 ? (
           <ActionLinkButton
             href={`/campaigns/${campaign.slug}`}
-            variant="outlined"
+            variant="text"
             startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t(backLabel)}
           </ActionLinkButton>
@@ -64,6 +59,6 @@ export default function Actions({
           endIcon={<ArrowForwardIosIcon fontSize="small" />}
         />
       </Grid>
-    </Root>
+    </Grid>
   )
 }
diff --git a/src/components/client/irregularity/helpers/Irregularity.styled.tsx b/src/components/client/irregularity/helpers/Irregularity.styled.tsx
@@ -24,61 +24,30 @@ export const ButtonsWrapper = styled(Grid)(() => ({
 }))
 
 export const ActionLinkButton = styled(LinkButton)(() => ({
-  backgroundColor: '#0098E3',
-  border: `1px solid ${theme.palette.secondary.light}`,
-  padding: theme.spacing(1, 5),
-  borderRadius: theme.borders.round,
-  color: theme.palette.common.white,
-  fontSize: theme.typography.pxToRem(18),
+  fontSize: theme.typography.pxToRem(14),
 
   '&:hover': {
-    backgroundColor: '#62C4FB',
-    color: theme.palette.common.black,
-    border: `1px solid ${theme.palette.secondary.light}`,
-  },
-
-  [theme.breakpoints.down('md')]: {
-    fontSize: theme.typography.pxToRem(11),
-    marginBottom: theme.spacing(4),
+    backgroundColor: 'transparent',
   },
 }))
 
 export const ActionButton = styled(Button)(() => ({
-  backgroundColor: '#0098E3',
-  border: `1px solid ${theme.palette.secondary.light}`,
-  padding: theme.spacing(1, 5),
-  borderRadius: theme.borders.round,
-  color: theme.palette.common.white,
-  fontSize: theme.typography.pxToRem(18),
+  fontSize: theme.typography.pxToRem(14),
 
   '&:hover': {
-    backgroundColor: '#62C4FB',
     color: theme.palette.common.black,
-    border: `1px solid ${theme.palette.secondary.light}`,
-  },
-
-  [theme.breakpoints.down('md')]: {
-    fontSize: theme.typography.pxToRem(11),
-    marginBottom: theme.spacing(4),
   },
 }))
 
 export const ActionSubmitButton = styled(SubmitButton)(() => ({
-  backgroundColor: '#0098E3',
   border: `1px solid ${theme.palette.secondary.light}`,
   padding: theme.spacing(1, 5),
   borderRadius: theme.borders.round,
   color: theme.palette.common.white,
-  fontSize: theme.typography.pxToRem(18),
+  fontSize: theme.typography.pxToRem(14),
 
   '&:hover': {
-    backgroundColor: '#62C4FB',
     color: theme.palette.common.black,
     border: `1px solid ${theme.palette.secondary.light}`,
   },
-
-  [theme.breakpoints.down('md')]: {
-    fontSize: theme.typography.pxToRem(11),
-    marginBottom: theme.spacing(4),
-  },
 }))