From 7a026665a91bce591ae06f22529d3276dd437831 Mon Sep 17 00:00:00 2001
From: dpalikova <d.palikova1@gmail.com>
Date: Fri, 20 Dec 2024 13:18:43 +0200
Subject: [PATCH] fix: make subscribe dialog responsive

---
 .../client/campaigns/CampaignDetails.tsx      |  3 --
 .../notifications/CampaignSubscribeModal.tsx  | 31 ++++++++++++++-----
 .../notifications/GeneralSubscribeModal.tsx   |  9 ++++--
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
index 142c4ad78..ccc55a4e8 100644
--- 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
index bdbe946d6..ae470420d 100644
--- 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,7 +115,12 @@ 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}>
@@ -124,7 +128,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
           </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
index fd354836f..e5ce75072 100644
--- a/src/components/client/notifications/GeneralSubscribeModal.tsx
+++ b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -120,7 +120,12 @@ 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}>
@@ -128,7 +133,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
           </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}