Skip to content

Commit 8feff64

Browse files
chaniBenzimanAvivAbachi
chaniBenziman
and
AvivAbachi
authored
refactor: improve donation button accessibility (#952)
Co-authored-by: aviv <[email protected]>
1 parent 5d220f2 commit 8feff64

File tree

4 files changed

+104
-70
lines changed

4 files changed

+104
-70
lines changed

‎src/layout/header/Header.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,3 @@
3333
.bulb-dark {
3434
color: #fff;
3535
}
36-
37-
.close-modal-icon {
38-
position: absolute;
39-
top: 10px;
40-
left: 10px;
41-
cursor: pointer;
42-
transition: all 0.1s;
43-
border: none;
44-
background: transparent;
45-
46-
}

‎src/locale/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"how_to_donate_title": "How can I donate?",
8383
"how_to_donate_text": "Behind the scenes of the projects is a small, dedicated team that takes care of organizing development and hackathon meetings and server maintenance, which has its feet between government offices to persuade, press, and swing to release more and more repositories; Make sure the media knows our work and also knows how to contact us for data and analytics, and does a lot of ongoing work to make our projects change in the world. We need community support to continue to work for a more open government. There were knights of transparency and joined in monthly support.",
8484

85+
"donate": "Donate",
8586
"donation_through_bank_title": "Donation through bank transfer",
8687
"donation_through_bank_reccomendation": "It is recommended to donate a bank transfer to the public knowledge workshop bank account, as this fee is lower",
8788
"donate_to_hasadna": "Donate to Hasadna",

‎src/locale/he.json

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

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

‎src/pages/DonateModal/DonateModal.tsx

Lines changed: 102 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React from 'react'
2-
import { Box, Grid, Modal, Typography, useMediaQuery, useTheme } from '@mui/material'
1+
import { ArrowBackIosNewRounded, CloseRounded } from '@mui/icons-material'
2+
import { Box, Button, Grid, Modal, Typography } from '@mui/material'
33
import { useTranslation } from 'react-i18next'
4+
import styled from 'styled-components'
5+
46
interface DonateModalProps {
57
isVisible: boolean
68
onClose: () => void
@@ -12,88 +14,129 @@ const boxStyle = {
1214
left: '50%',
1315
transform: 'translate(-50%, -50%)',
1416
maxWidth: '1250px',
15-
maxHeight: 'calc(100vh - 210px)',
16-
overflowY: 'auto',
1717
width: '80%',
1818
bgcolor: 'background.paper',
19+
outline: 'none',
20+
border: '1px solid #ccc',
1921
boxShadow: 24,
20-
p: 4,
22+
borderRadius: '8px',
2123
} as const
2224

23-
export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose }) => {
24-
/**
25-
* @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.
26-
*/
27-
const shouldImgCollapse = useMediaQuery('(max-width: 950px)')
28-
const { t } = useTranslation()
29-
const { direction } = useTheme()
25+
const ButtonDonate = styled.a`
26+
margin-top: 16px;
27+
outline: none;
28+
direction: rtl;
29+
display: inline-flex;
30+
align-items: stretch;
31+
color: white;
32+
flex-wrap: nowrap;
33+
text-decoration: none;
34+
font-weight: bold;
35+
width: 100%;
36+
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+
}
44+
`
45+
const ButtonDonateText = styled.span`
46+
background-color: #16a9ff;
47+
padding: 8px 32px 8px 8px;
48+
text-align: center;
49+
font-size: 32px;
50+
width: 100%;
51+
`
52+
53+
const ButtonDonateIcon = styled.span`
54+
padding: 16px;
55+
width: 32px;
56+
min-height: 32px;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
background-color: #1498e5;
61+
`
3062

31-
// Use Image with Hebrew text for RTL and English text for LTR
32-
const donateNowImageUrlEN =
33-
'https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png'
34-
const donateNowImageUrlHE =
35-
'https://www.hasadna.org.il/wp-content/uploads/2018/08/button-EN-300x73.png'
63+
const DonateModal = ({ isVisible, onClose }: DonateModalProps) => {
64+
const { t } = useTranslation()
3665

3766
return (
3867
<Modal
39-
dir={direction}
4068
open={isVisible}
4169
onClose={onClose}
4270
aria-modal="true"
4371
role="dialog"
4472
aria-labelledby="modal-modal-title"
4573
aria-describedby="modal-modal-description"
46-
sx={{
47-
textAlign: `${direction === 'ltr' ? 'right' : 'left'}` as const,
48-
color: 'text.primary', // Dynamically uses the theme’s text color
49-
}}>
50-
<Box dir={direction} sx={boxStyle}>
51-
<button onClick={onClose} className="close-modal-icon">
52-
X
53-
</button>
54-
<Typography id="modal-modal-title" variant="h6" component="h2">
55-
{t('how_to_donate_title')}
74+
sx={{ color: 'text.primary' }}>
75+
<Box sx={boxStyle}>
76+
<Typography
77+
component="div"
78+
display="flex"
79+
justifyContent="space-between"
80+
alignItems="start"
81+
padding={2}
82+
paddingBottom={0}>
83+
<h1 id="modal-modal-title" style={{ margin: 0 }}>
84+
{t('how_to_donate_title')}
85+
</h1>
86+
<Button
87+
color="inherit"
88+
sx={{ borderRadius: 1000, minWidth: 32, width: 32, height: 32, padding: '4px' }}
89+
onClick={onClose}>
90+
<CloseRounded sx={{ height: '100%', width: '100%' }} />
91+
</Button>
5692
</Typography>
57-
<p>{t('how_to_donate_text')}</p>
58-
<Grid container spacing={2} direction={shouldImgCollapse ? 'column-reverse' : 'row'}>
59-
<Grid size={{ xs: 6 }}>
60-
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
61-
<h2>{t('donate_through_jgive.com_title')}</h2>
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>
62100
<a
63101
href="https://www.jgive.com/new/he/ils/donation-targets/3268"
64102
target="_blank"
65-
rel="noreferrer">
103+
rel="noreferrer"
104+
style={{ textDecoration: 'none', color: 'inherit', outline: 'none' }}>
66105
<img
67106
src="https://www.hasadna.org.il/wp-content/uploads/2017/12/%D7%AA%D7%A8%D7%95%D7%9E%D7%95%D7%AA.jpg"
68107
alt={t('donation_link')}
69-
width={'90%'}
70-
style={{ maxWidth: '420px' }}
71-
/>
72-
<img
73-
width={'90%'}
74-
src={direction === 'rtl' ? donateNowImageUrlEN : donateNowImageUrlHE}
75-
alt={t('donate_to_hasadna')}
76-
// style={{ margin: shouldImgCollapse ? 'auto' : '', display: 'block' }}
77-
style={{ display: 'block', maxWidth: '300px' }}
108+
width="100%"
109+
style={{ maxWidth: '420px', borderRadius: 8 }}
78110
/>
79111
</a>
80-
</Typography>
81-
</Grid>
82-
<Grid dir={direction} size={{ xs: 6 }}>
83-
<h2>{t('donation_through_bank_title')}</h2>
84-
<p>{t('donation_through_bank_reccomendation')}</p>
85-
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
86-
{t('bank')}: {t('donation_through_bank_details_bank')}
87-
<br />
88-
{t('branch')}: {t('donation_through_bank_details_branch')}
89-
<br />
90-
{t('account')}: {t('donation_through_bank_details_account')}
91-
<br />
92-
{t('account_name')}: {t('donation_through_bank_details_account_name')}
93-
</Typography>
94-
<sub>{t('donation_through_bank_details_additional_message')}</sub>
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>
95138
</Grid>
96-
</Grid>
139+
</Box>
97140
</Box>
98141
</Modal>
99142
)

0 commit comments

Comments
 (0)