fix: make subscribe dialog responsive (#1998)

podkrepi-bg · Jan 8, 2025 · 79d9bda · 79d9bda
1 parent 79e20ff
commit 79d9bda
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
@@ -138,9 +138,6 @@ export default function CampaignDetails({ campaign }: Props) {
         showExpensesLink={(expensesList && expensesList?.length > 0) || canEditCampaign}
       />
       <Grid container spacing={8}>
-        {subscribeIsOpen && (
-          <RenderCampaignSubscribeModal setOpen={setSubscribeOpen} campaign={campaign} />
-        )}
         <Grid item xs={12} display="flex" sx={{ mt: 1.5 }}>
           <EmailIcon
             color="primary"

diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx
@@ -33,7 +33,6 @@ const classes = {
 const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.subscribeBtn}`]: {
     fontSize: theme.typography.pxToRem(16),
-    background: `${theme.palette.primary}`,
   },
 }))
 
@@ -116,15 +115,20 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
             <EmailField
               label="common:notifications.email-descriptive"
               name="email"
-              sx={{ maxWidth: theme.spacing(50) }}
+              sx={{
+                width: '100%',
+                [theme.breakpoints.up('sm')]: {
+                  width: '70%',
+                },
+              }}
             />
           </Grid>
           <Grid item xs={12}>
             <AcceptNewsLetterFieldCampaign name="consent" />
           </Grid>
           <Grid item xs={12} textAlign="center">
             <SubmitButton
-              sx={{ width: '40%' }}
+              sx={{ minWidth: theme.spacing(25) }}
               className={classes.subscribeBtn}
               label="common:notifications.cta.subscribe-button"
               loading={loading}
@@ -163,7 +167,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
           }}>
           <CloseModalButton onClose={handleClose} />
           <React.Fragment>
-            <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+            <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64) }} />
             <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
               {t('common:notifications.subscribe-campaign-title')}
             </DialogTitle>
@@ -176,10 +180,23 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
                       : t('common:notifications.subscribe-text-loggedUser')}
                   </Typography>
                 </Grid>
-                <Grid item xs={12} display="flex" justifyContent="space-evenly">
+                <Grid
+                  item
+                  xs={12}
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-evenly',
+                    flexFlow: 'column',
+                    gap: theme.spacing(2),
+                    alignItems: 'center',
+
+                    [theme.breakpoints.up('sm')]: {
+                      flexFlow: 'row',
+                    },
+                  }}>
                   <SubmitButton
                     type="button"
-                    sx={{ width: '40%' }}
+                    sx={{ minWidth: theme.spacing(25) }}
                     className={classes.subscribeBtn}
                     label={
                       status !== 'authenticated'
@@ -191,7 +208,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
                   />
                   <SubmitButton
                     type="button"
-                    sx={{ width: '40%' }}
+                    sx={{ minWidth: theme.spacing(25) }}
                     variant="outlined"
                     className={classes.subscribeBtn}
                     label={

diff --git a/src/components/client/notifications/GeneralSubscribeModal.tsx b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -120,15 +120,20 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
             <EmailField
               label={t('common:notifications.email-descriptive')}
               name="email"
-              sx={{ width: '70%' }}
+              sx={{
+                width: '100%',
+                [theme.breakpoints.up('sm')]: {
+                  width: '70%',
+                },
+              }}
             />
           </Grid>
           <Grid item xs={12}>
             <AcceptNewsLetterField name="consent" />
           </Grid>
           <Grid item xs={12} textAlign="center">
             <SubmitButton
-              sx={{ width: '40%' }}
+              sx={{ minWidth: theme.spacing(25) }}
               className={classes.subscribeBtn}
               label="common:notifications.cta.subscribe-button"
               loading={loading}