fix: allow donate modal to dynamically change for devices (#945)

hasadna · Dec 1, 2024 · 670df7a · 670df7a
1 parent f6bf925
commit 670df7a
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/src/pages/DonateModal/DonateModal.tsx b/src/pages/DonateModal/DonateModal.tsx
@@ -1,25 +1,33 @@
 import React from 'react'
-import { Box, Grid, Modal, Typography } from '@mui/material'
+import { Box, Grid, Modal, Typography, useMediaQuery } from '@mui/material'
 import i18n from 'src/locale/allTranslations'
 
 interface DonateModalProps {
   isVisible: boolean
   onClose: () => void
 }
 
-const style = {
+const boxStyle = {
   position: 'fixed',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  maxWidth: 1000,
-  width: '90%',
+  maxWidth: '1250px',
+  maxHeight: 'calc(100vh - 210px)',
+  overflowY: 'auto',
+  width: '80%',
   bgcolor: 'background.paper',
+  textAlign: 'left',
   boxShadow: 24,
   p: 4,
 } as const
 
 export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
+  /**
+   * @description This hook is used to determine if the image should collapse or not based on if the user is a mobile, tablet user or not.
+   */
+  const shouldImgCollapse = useMediaQuery('(max-width: 950px)')
+
   return (
     <Modal
       open={isVisible}
@@ -31,7 +39,7 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
       sx={{
         color: 'text.primary', // Dynamically uses the theme’s text color
       }}>
-      <Box dir={i18n.dir()} sx={style}>
+      <Box dir={i18n.dir()} sx={boxStyle}>
         <button onClick={onClose} className="close-modal-icon">
           X
         </button>
@@ -45,7 +53,7 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
           ועושה עוד המון עבודה שוטפת כדי שהפרוייקטים שלנו ייצרו שינוי בעולם. אנחנו זקוקים לתמיכה של
           הקהילה כדי להמשיך ולפעול למען ממשל פתוח יותר. היו אבירי שקיפות והצטרפו בתמיכה חודשית.
         </p>
-        <Grid container spacing={2}>
+        <Grid container spacing={2} direction={shouldImgCollapse ? 'column-reverse' : 'row'}>
           <Grid item xs={6}>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
               <h2>תרומה דרך אתר jgive.com</h2>
@@ -56,10 +64,15 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
                 <img
                   src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
                   alt="קישור לתרומה"
+                  width={'90%'}
+                  style={{ maxWidth: '420px' }}
                 />
                 <img
+                  width={'90%'}
                   src="https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png"
                   alt="תרום עכשיו"
+                  // style={{ margin: shouldImgCollapse ? 'auto' : '', display: 'block' }}
+                  style={{ display: 'block', maxWidth: '300px' }}
                 />
               </a>
             </Typography>