fix styles to be responsive

podkrepi-bg · Jun 24, 2024 · 989c839 · 989c839
1 parent a852547
commit 989c839
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx
@@ -29,19 +29,24 @@ export default function CampaignApplicationFormActions({
       <Grid item xs={12} md={6}>
         {activeStep === 0 ? (
           <ActionLinkButton
+            fullWidth
             href=""
             variant="outlined"
             startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t('cta.back')}
           </ActionLinkButton>
         ) : (
-          <ActionButton onClick={onBack} startIcon={<ArrowBackIosIcon fontSize="small" />}>
+          <ActionButton
+            fullWidth
+            onClick={onBack}
+            startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t('cta.back')}
           </ActionButton>
         )}
       </Grid>
       <Grid item xs={12} md={6}>
         <ActionSubmitButton
+          fullWidth
           label={t('cta.next')}
           endIcon={<ArrowForwardIosIcon fontSize="small" />}
         />

diff --git a/src/components/client/campaign-application/CampaignApplicationPage.tsx b/src/components/client/campaign-application/CampaignApplicationPage.tsx
@@ -3,7 +3,7 @@ import CampaignApplicationForm from './CampaignApplicationForm'
 
 export default function CampaignApplicationPage() {
   return (
-    <Layout maxWidth="md">
+    <Layout maxWidth="md" sx={{ paddingInline: 5 }}>
       <CampaignApplicationForm />
     </Layout>
   )

diff --git a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx
@@ -56,10 +56,8 @@ export const StyledCampaignApplicationStepperIcon = styled(Grid)(() => ({
 }))
 
 export const StyledStepHeading = styled(Heading)(() => ({
-  alignSelf: 'center',
   fontWeight: 600,
-  paddingTop: theme.spacing(5),
-  paddingBottom: theme.spacing(10),
+  paddingBlock: theme.spacing(5),
 }))
 
 export const StyledFormTextField = styled(FormTextField)(() => ({

diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx
@@ -18,7 +18,6 @@ export const ActionLinkButton = styled(LinkButton)(() => ({
   borderRadius: theme.borders.round,
   color: theme.palette.common.black,
   fontSize: theme.typography.pxToRem(15),
-  width: theme.spacing(50),
   fontWeight: 800,
 }))
 
@@ -29,7 +28,6 @@ export const ActionButton = styled(Button)(() => ({
   borderRadius: theme.borders.round,
   color: theme.palette.common.black,
   fontSize: theme.typography.pxToRem(15),
-  width: theme.spacing(50),
   fontWeight: 800,
 }))
 
@@ -40,6 +38,5 @@ export const ActionSubmitButton = styled(SubmitButton)(() => ({
   borderRadius: theme.borders.round,
   color: theme.palette.common.black,
   fontSize: theme.typography.pxToRem(15),
-  width: theme.spacing(50),
   fontWeight: 800,
 }))