Skip to content

Commit

Permalink
feat: add donations modal (#552)
Browse files Browse the repository at this point in the history
  • Loading branch information
NoamGaash authored May 15, 2024
1 parent 885d9f7 commit 8cda1a6
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 0 deletions.
96 changes: 96 additions & 0 deletions src/layout/header/DonationButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DollarOutlined } from '@ant-design/icons'
import { Box, Grid, Modal, Typography } from '@mui/material'
import i18n from 'src/locale/allTranslations'

const style = {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
maxWidth: 1000,
width: '90%',
bgcolor: 'background.paper',
boxShadow: 24,
p: 4,
} as const

export const DonationButton = () => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)

const tooltip_title = t('donate_title')

const onClose = () => setOpen(false)
const onOpen = () => setOpen(true)

return (
<>
<button
className="theme-icon"
onClick={onOpen}
aria-label={tooltip_title}
title={tooltip_title}>
<DollarOutlined style={{ fontSize: '1.5em' }} />
</button>
<Modal
open={open}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description">
<Box dir={i18n.dir()} sx={style}>
<button onClick={onClose} className="close-modal-icon">
X
</button>
<Typography id="modal-modal-title" variant="h6" component="h2">
כיצד לתרום?
</Typography>
<p>
מאחורי הקלעים של הפרוייקטים פועל צוות קטן ומסור, שדואג לארגון מפגשי הפיתוח וההאקתונים
ותחזוקת השרתים, שמכתת רגליו בין משרדי ממשלה כדי לשכנע, ללחוץ, ולנדנד לשחרר עוד ועוד
מאגרים; מוודא שהתקשורת תכיר את העבודה שלנו וגם תדע לפנות אלינו בשביל נתונים וניתוחים,
ועושה עוד המון עבודה שוטפת כדי שהפרוייקטים שלנו ייצרו שינוי בעולם. אנחנו זקוקים לתמיכה
של הקהילה כדי להמשיך ולפעול למען ממשל פתוח יותר. היו אבירי שקיפות והצטרפו בתמיכה חודשית.
</p>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
<h2>תרומה דרך אתר jgive.com</h2>
<a href="https://www.jgive.com/new/he/ils/donation-targets/3268">
<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="קישור לתרומה"
/>
<img
src="https://www.hasadna.org.il/wp-content/uploads/2018/08/button-300x73.png"
alt="תרום עכשיו"
/>
</a>
</Typography>
</Grid>
<Grid item xs={6}>
<h2>תרומה דרך העברה בנקאית</h2>
<p>
מומלץ לתרום דרך העברה בנקאית לחשבון הבנק של הסדנא לידע ציבורי, מכיוון שבאפיק זה
העמלה נמוכה יותר
</p>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
בנק: יו-בנק (26) <br />
סניף: רחביה (262)
<br />
חשבון: 419931
<br />
שם החשבון: הסדנא לידע ציבורי
</Typography>
<sub>
נא לציין שם מלא וליצור קשר במייל [email protected] לאחר התרומה על מנת שנוכל לשלוח
קבלה
</sub>
</Grid>
</Grid>
</Box>
</Modal>
</>
)
}
22 changes: 22 additions & 0 deletions src/layout/header/Header.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,28 @@
background: #303230;
}

.theme-icon {
border: none;
background: transparent;
cursor: pointer;
transition: all 0.1s;
}

.theme-icon:hover {
transform: scale(1.1);
}

.bulb-dark {
color: #fff;
}

.close-modal-icon {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
transition: all 0.1s;
border: none;
background: transparent;

}
2 changes: 2 additions & 0 deletions src/layout/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { MenuOutlined } from '@ant-design/icons'
import './Header.css'
import cn from 'classnames'
import ToggleThemeButton from './ToggleThemeButton'
import { DonationButton } from './DonationButton'
import HeaderLinks from './HeaderLinks/HeaderLinks'
import { LanguageToggle } from './LanguageToggle'

Expand All @@ -21,6 +22,7 @@ const MainHeader = () => {
<HeaderLinks>
<LanguageToggle />
<ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
<DonationButton />
</HeaderLinks>
</Header>
)
Expand Down
6 changes: 6 additions & 0 deletions src/routes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ export const PAGES = [
icon: <InfoCircleOutlined />,
element: <About />,
},
{
label: 'donate_title',
path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal',
icon: <DollarOutlined />,
element: null,
},
] as const

export const HEADER_LINKS = [
Expand Down

0 comments on commit 8cda1a6

Please sign in to comment.