feat: Refactor DonateModal to use MUI Button for close action and improve layout

Author: AvivAbachi

src/layout/header/Header.css

@@ -33,14 +33,3 @@
 .bulb-dark {
   color: #fff;
 }
-
-.close-modal-icon {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  cursor: pointer;
-  transition: all 0.1s;
-  border: none;
-  background: transparent;
-
-}

src/pages/DonateModal/DonateModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Box, Grid, Modal, Typography, useMediaQuery, useTheme } from '@mui/material'
+import { Box, Button, Grid, Modal, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
-import { ArrowBackIosNewRounded } from '@mui/icons-material'
+import { ArrowBackIosNewRounded, CloseRounded } from '@mui/icons-material'
 interface DonateModalProps {
   isVisible: boolean
   onClose: () => void
@@ -19,21 +19,28 @@ const boxStyle = {
   width: '80%',
   bgcolor: 'background.paper',
   boxShadow: 24,
+  borderRadius: '16px',
   p: 4,
 } as const
 
 const ButtonDonate = styled.a`
+  margin-top: 32px;
   direction: rtl;
   display: inline-flex;
   margin-left: auto;
   margin-right: 0;
   color: white;
+  flex-wrap: nowrap;
   text-decoration: none;
   font-weight: bold;
+  width: 100%;
+  max-width: 420px;
 `
 const ButtonDonateText = styled.span`
   background-color: #16a9ff;
-  padding: 8px 16px;
+  padding: 8px 32px;
+  width: 100%;
+  text-align: center;
   border-radius: 0 1000px 1000px 0;
   font-size: 32px;
 `
@@ -47,9 +54,7 @@ const ButtonDonateIcon = styled.span`
 `
 
 export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
-  const shouldImgCollapse = useMediaQuery('(max-width: 950px)')
   const { t } = useTranslation()
-  const { direction } = useTheme()
 
   return (
     <Modal
@@ -59,47 +64,60 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
       role="dialog"
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
-      sx={{
-        textAlign: `${direction === 'ltr' ? 'right' : 'left'}` as const,
-        color: 'text.primary', // Dynamically uses the theme’s text color
-      }}>
+      sx={{ color: 'text.primary' }} // Dynamically uses the theme’s text color
+    >
       <Box sx={boxStyle}>
-        <button onClick={onClose} className="close-modal-icon">
-          X
-        </button>
-        <Typography id="modal-modal-title" variant="h6" component="h2">
-          {t('how_to_donate_title')}
+        <Typography sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          <h1 id="modal-modal-title" style={{ margin: 0 }}>
+            {t('how_to_donate_title')}
+          </h1>
+          <Button
+            color="inherit"
+            sx={{
+              borderRadius: 1000,
+              minWidth: '36px',
+              width: '36px',
+              height: '36px',
+
+              padding: '4px',
+            }}
+            onClick={onClose}>
+            <CloseRounded sx={{ height: '100%', width: '100%' }} />
+          </Button>
         </Typography>
         <p>{t('how_to_donate_text')}</p>
-        <Grid container spacing={2} direction={shouldImgCollapse ? 'column-reverse' : 'row'}>
-          <Grid size={{ xs: 6 }}>
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
               <h2>{t('donate_through_jgive.com_title')}</h2>
-              <a
-                href="https://www.jgive.com/new/he/ils/donation-targets/3268"
-                target="_blank"
-                rel="noreferrer"
-                style={{ textDecoration: 'none', color: 'inherit' }}>
-                <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={t('donation_link')}
-                  width={'90%'}
-                  style={{ maxWidth: '420px' }}
-                />
-              </a>
-              <ButtonDonate
-                href="https://www.jgive.com/new/he/ils/donation-targets/3268"
-                target="_blank"
-                rel="noreferrer">
-                <ButtonDonateText>{t('donate')}</ButtonDonateText>
-                <ButtonDonateIcon>
-                  <ArrowBackIosNewRounded sx={{ fontSize: 32 }} />
-                </ButtonDonateIcon>
-              </ButtonDonate>
             </Typography>
+            <a
+              href="https://www.jgive.com/new/he/ils/donation-targets/3268"
+              target="_blank"
+              rel="noreferrer"
+              style={{ textDecoration: 'none', color: 'inherit' }}>
+              <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={t('donation_link')}
+                width={'100%'}
+                style={{ maxWidth: '420px' }}
+              />
+            </a>
+            <br />
+            <ButtonDonate
+              href="https://www.jgive.com/new/he/ils/donation-targets/3268"
+              target="_blank"
+              rel="noreferrer">
+              <ButtonDonateText>{t('donate')}</ButtonDonateText>
+              <ButtonDonateIcon>
+                <ArrowBackIosNewRounded sx={{ fontSize: 32 }} />
+              </ButtonDonateIcon>
+            </ButtonDonate>
           </Grid>
-          <Grid dir={direction} size={{ xs: 6 }}>
-            <h2>{t('donation_through_bank_title')}</h2>
+          <Grid size={{ xs: 6, md: 6 }}>
+            <Typography>
+              <h2>{t('donation_through_bank_title')}</h2>
+            </Typography>
             <p>{t('donation_through_bank_reccomendation')}</p>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
               {t('bank')}: {t('donation_through_bank_details_bank')}