Skip to content

Commit 2f20949

Browse files
AvivAbachiAvivAbachi
committed
fix: Update Hebrew localization for donation text and improve DonateModal layout
1 parent fbf028d commit 2f20949

File tree

2 files changed

+78
-72
lines changed

2 files changed

+78
-72
lines changed

‎src/locale/he.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"account": "חשבון",
9292
"account_name": "שם חשבון",
9393

94-
"donate": "תרום לסדנא",
94+
"donate": "לתרום לסדנא",
9595
"donation_through_bank_details_bank": "יו בנק (26)",
9696
"donation_through_bank_details_branch": "רחביה (262)",
9797
"donation_through_bank_details_account": "419931",

‎src/pages/DonateModal/DonateModal.tsx

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react'
1+
import { ArrowBackIosNewRounded, CloseRounded } from '@mui/icons-material'
22
import { Box, Button, Grid, Modal, Typography } from '@mui/material'
33
import { useTranslation } from 'react-i18next'
44
import styled from 'styled-components'
5-
import { ArrowBackIosNewRounded, CloseRounded } from '@mui/icons-material'
5+
66
interface DonateModalProps {
77
isVisible: boolean
88
onClose: () => void
@@ -14,46 +14,53 @@ const boxStyle = {
1414
left: '50%',
1515
transform: 'translate(-50%, -50%)',
1616
maxWidth: '1250px',
17-
maxHeight: 'calc(100vh - 210px)',
18-
overflowY: 'auto',
1917
width: '80%',
2018
bgcolor: 'background.paper',
19+
outline: 'none',
20+
border: '1px solid #ccc',
2121
boxShadow: 24,
22-
borderRadius: '16px',
23-
p: 4,
22+
borderRadius: '8px',
2423
} as const
2524

2625
const ButtonDonate = styled.a`
27-
margin-top: 32px;
26+
margin-top: 16px;
27+
outline: none;
2828
direction: rtl;
2929
display: inline-flex;
30-
margin-left: auto;
31-
margin-right: 0;
30+
align-items: stretch;
3231
color: white;
3332
flex-wrap: nowrap;
3433
text-decoration: none;
3534
font-weight: bold;
3635
width: 100%;
3736
max-width: 420px;
37+
border-radius: 1000px;
38+
overflow: hidden;
39+
transition: ease box-shadow 0.25s;
40+
box-shadow: transparent 0 0 0 0;
41+
&:focus {
42+
box-shadow: #1498e588 0 0 0 3px;
43+
}
3844
`
3945
const ButtonDonateText = styled.span`
4046
background-color: #16a9ff;
41-
padding: 8px 32px;
42-
width: 100%;
47+
padding: 8px 32px 8px 8px;
4348
text-align: center;
44-
border-radius: 0 1000px 1000px 0;
4549
font-size: 32px;
50+
width: 100%;
4651
`
4752

4853
const ButtonDonateIcon = styled.span`
4954
padding: 16px;
50-
border-radius: 1000px 0 0 1000px;
5155
width: 32px;
52-
height: 32px;
56+
min-height: 32px;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
5360
background-color: #1498e5;
5461
`
5562

56-
export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
63+
const DonateModal = ({ isVisible, onClose }: DonateModalProps) => {
5764
const { t } = useTranslation()
5865

5966
return (
@@ -64,73 +71,72 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
6471
role="dialog"
6572
aria-labelledby="modal-modal-title"
6673
aria-describedby="modal-modal-description"
67-
sx={{ color: 'text.primary' }} // Dynamically uses the theme’s text color
68-
>
74+
sx={{ color: 'text.primary' }}>
6975
<Box sx={boxStyle}>
70-
<Typography sx={{ display: 'flex', justifyContent: 'space-between' }}>
76+
<Typography
77+
component="div"
78+
display="flex"
79+
justifyContent="space-between"
80+
alignItems="start"
81+
padding={2}
82+
paddingBottom={0}>
7183
<h1 id="modal-modal-title" style={{ margin: 0 }}>
7284
{t('how_to_donate_title')}
7385
</h1>
7486
<Button
7587
color="inherit"
76-
sx={{
77-
borderRadius: 1000,
78-
minWidth: '36px',
79-
width: '36px',
80-
height: '36px',
81-
82-
padding: '4px',
83-
}}
88+
sx={{ borderRadius: 1000, minWidth: 32, width: 32, height: 32, padding: '4px' }}
8489
onClick={onClose}>
8590
<CloseRounded sx={{ height: '100%', width: '100%' }} />
8691
</Button>
8792
</Typography>
88-
<p>{t('how_to_donate_text')}</p>
89-
<Grid container spacing={2}>
90-
<Grid size={{ xs: 12, md: 6 }}>
91-
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
92-
<h2>{t('donate_through_jgive.com_title')}</h2>
93-
</Typography>
94-
<a
95-
href="https://www.jgive.com/new/he/ils/donation-targets/3268"
96-
target="_blank"
97-
rel="noreferrer"
98-
style={{ textDecoration: 'none', color: 'inherit' }}>
99-
<img
100-
src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
101-
alt={t('donation_link')}
102-
width={'100%'}
103-
style={{ maxWidth: '420px' }}
104-
/>
105-
</a>
106-
<br />
107-
<ButtonDonate
108-
href="https://www.jgive.com/new/he/ils/donation-targets/3268"
109-
target="_blank"
110-
rel="noreferrer">
111-
<ButtonDonateText>{t('donate')}</ButtonDonateText>
112-
<ButtonDonateIcon>
113-
<ArrowBackIosNewRounded sx={{ fontSize: 32 }} />
114-
</ButtonDonateIcon>
115-
</ButtonDonate>
116-
</Grid>
117-
<Grid size={{ xs: 6, md: 6 }}>
118-
<Typography>
119-
<h2>{t('donation_through_bank_title')}</h2>
120-
</Typography>
121-
<p>{t('donation_through_bank_reccomendation')}</p>
122-
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
123-
{t('bank')}: {t('donation_through_bank_details_bank')}
124-
<br />
125-
{t('branch')}: {t('donation_through_bank_details_branch')}
126-
<br />
127-
{t('account')}: {t('donation_through_bank_details_account')}
128-
<br />
129-
{t('account_name')}: {t('donation_through_bank_details_account_name')}
130-
</Typography>
131-
<sub>{t('donation_through_bank_details_additional_message')}</sub>
93+
<Box padding={2} overflow="auto" maxHeight="calc(100vh - 210px)">
94+
<p style={{ margin: 0 }}>{t('how_to_donate_text')}</p>
95+
<Grid container spacing={2}>
96+
<Grid size={{ xs: 12, md: 6 }}>
97+
<Typography component="div" id="modal-modal-description">
98+
<h2>{t('donate_through_jgive.com_title')}</h2>
99+
</Typography>
100+
<a
101+
href="https://www.jgive.com/new/he/ils/donation-targets/3268"
102+
target="_blank"
103+
rel="noreferrer"
104+
style={{ textDecoration: 'none', color: 'inherit', outline: 'none' }}>
105+
<img
106+
src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
107+
alt={t('donation_link')}
108+
width="100%"
109+
style={{ maxWidth: '420px', borderRadius: 8 }}
110+
/>
111+
</a>
112+
<ButtonDonate
113+
href="https://www.jgive.com/new/he/ils/donation-targets/3268"
114+
target="_blank"
115+
rel="noreferrer">
116+
<ButtonDonateText>{t('donate')}</ButtonDonateText>
117+
<ButtonDonateIcon>
118+
<ArrowBackIosNewRounded sx={{ fontSize: 32 }} />
119+
</ButtonDonateIcon>
120+
</ButtonDonate>
121+
</Grid>
122+
<Grid size={{ xs: 12, md: 6 }}>
123+
<Typography component="div">
124+
<h2>{t('donation_through_bank_title')}</h2>
125+
</Typography>
126+
<p>{t('donation_through_bank_reccomendation')}</p>
127+
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
128+
{t('bank')}: {t('donation_through_bank_details_bank')}
129+
<br />
130+
{t('branch')}: {t('donation_through_bank_details_branch')}
131+
<br />
132+
{t('account')}: {t('donation_through_bank_details_account')}
133+
<br />
134+
{t('account_name')}: {t('donation_through_bank_details_account_name')}
135+
</Typography>
136+
<sub>{t('donation_through_bank_details_additional_message')}</sub>
137+
</Grid>
132138
</Grid>
133-
</Grid>
139+
</Box>
134140
</Box>
135141
</Modal>
136142
)

0 commit comments

Comments
 (0)