From 8e7c76ba8fecbbb8aefa9cc1994089c2323e62d1 Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Mon, 4 Mar 2024 23:46:39 +0200 Subject: [PATCH 1/4] feat: add donations modal --- index.html | 2 +- src/layout/header/DonationButton.tsx | 95 +++++++++++++++++++++ src/layout/header/GitHubLink/GitHubLink.tsx | 6 +- src/layout/header/Header.css | 15 +++- src/layout/header/Header.tsx | 2 + src/layout/header/ToggleThemeButton.tsx | 3 +- src/routes/index.tsx | 6 -- 7 files changed, 116 insertions(+), 13 deletions(-) create mode 100644 src/layout/header/DonationButton.tsx diff --git a/index.html b/index.html index 1d33f5ce..ab7aa7dd 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/layout/header/DonationButton.tsx b/src/layout/header/DonationButton.tsx new file mode 100644 index 00000000..26688464 --- /dev/null +++ b/src/layout/header/DonationButton.tsx @@ -0,0 +1,95 @@ +import { useState } from 'react' +import { useTranslation } from 'react-i18next' +import { DollarOutlined } from '@ant-design/icons' +import { Box, Grid, Modal, Typography } from '@mui/material' + +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 ( + <> + + + + + + כיצד לתרום? + +

+ מאחורי הקלעים של הפרוייקטים פועל צוות קטן ומסור, שדואג לארגון מפגשי הפיתוח וההאקתונים + ותחזוקת השרתים, שמכתת רגליו בין משרדי ממשלה כדי לשכנע, ללחוץ, ולנדנד לשחרר עוד ועוד + מאגרים; מוודא שהתקשורת תכיר את העבודה שלנו וגם תדע לפנות אלינו בשביל נתונים וניתוחים, + ועושה עוד המון עבודה שוטפת כדי שהפרוייקטים שלנו ייצרו שינוי בעולם. אנחנו זקוקים לתמיכה + של הקהילה כדי להמשיך ולפעול למען ממשל פתוח יותר. היו אבירי שקיפות והצטרפו בתמיכה חודשית. +

+ + + +

תרומה דרך אתר jgive.com

+ + קישור לתרומה + תרום עכשיו + + + + +

תרומה דרך העברה בנקאית

+

+ מומלץ לתרום דרך העברה בנקאית לחשבון הבנק של הסדנא לידע ציבורי, מכיוון שבאפיק זה + העמלה נמוכה יותר +

+ + בנק: יו-בנק (26)
+ סניף: רחביה (262) +
+ חשבון: 419931 +
+ שם החשבון: הסדנא לידע ציבורי + + + נא לציין שם מלא וליצור קשר במייל info@hasadna.org.il לאחר התרומה על מנת שנוכל לשלוח + קבלה + + + + + + + ) +} diff --git a/src/layout/header/GitHubLink/GitHubLink.tsx b/src/layout/header/GitHubLink/GitHubLink.tsx index 9ef92a90..c1acfa09 100644 --- a/src/layout/header/GitHubLink/GitHubLink.tsx +++ b/src/layout/header/GitHubLink/GitHubLink.tsx @@ -18,12 +18,12 @@ export default function GitHubLink() { }, []) return ( -
{data.icon} -
+ ) } diff --git a/src/layout/header/Header.css b/src/layout/header/Header.css index cffae04b..3f4f6c0a 100644 --- a/src/layout/header/Header.css +++ b/src/layout/header/Header.css @@ -10,10 +10,23 @@ } .theme-icon { - width: 1rem; + border: none; + background: transparent; + cursor: pointer; transition: all 0.1s; } .theme-icon:hover { transform: scale(1.1); } + +.close-modal-icon { + position: absolute; + top: 10px; + left: 10px; + cursor: pointer; + transition: all 0.1s; + border: none; + background: transparent; + +} diff --git a/src/layout/header/Header.tsx b/src/layout/header/Header.tsx index 8df8772b..eb65c28a 100644 --- a/src/layout/header/Header.tsx +++ b/src/layout/header/Header.tsx @@ -7,6 +7,7 @@ import GitHubLink from './GitHubLink/GitHubLink' import './Header.css' import cn from 'classnames' import ToggleThemeButton from './ToggleThemeButton' +import { DonationButton } from './DonationButton' const { Header } = Layout @@ -19,6 +20,7 @@ const MainHeader = () => {
 
+ ) } diff --git a/src/layout/header/ToggleThemeButton.tsx b/src/layout/header/ToggleThemeButton.tsx index b35be336..bca1af8e 100644 --- a/src/layout/header/ToggleThemeButton.tsx +++ b/src/layout/header/ToggleThemeButton.tsx @@ -17,8 +17,7 @@ const ToggleThemeButton: React.FC = ({ toggleTheme, isDa className="theme-icon" onClick={toggleTheme} aria-label={tooltip_title} - title={tooltip_title} - style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}> + title={tooltip_title}> {isDarkTheme ? ( ) : ( diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 077b27fd..32d39d35 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -82,12 +82,6 @@ export const PAGES = [ icon: , element: , }, - { - label: 'donate_title', - path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal', - icon: , - element: null, - }, ] as const const HIDDEN_PAGES = [ From f23d707891f9c8f0afbaa1f2cc0f6cb3b8418476 Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Tue, 5 Mar 2024 17:55:08 +0200 Subject: [PATCH 2/4] style: fix rtl --- index.html | 2 +- src/layout/header/DonationButton.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ab7aa7dd..1d33f5ce 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/layout/header/DonationButton.tsx b/src/layout/header/DonationButton.tsx index 26688464..2a28cc7f 100644 --- a/src/layout/header/DonationButton.tsx +++ b/src/layout/header/DonationButton.tsx @@ -2,6 +2,7 @@ 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', @@ -38,7 +39,7 @@ export const DonationButton = () => { onClose={onClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description"> - + From f77b5d01a02b852a8e953fdca90a9480cfb7a66d Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Tue, 14 May 2024 14:51:00 +0300 Subject: [PATCH 3/4] fix: restore old donation menu item --- src/routes/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 2b935895..df753c92 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -79,6 +79,12 @@ export const PAGES = [ icon: , element: , }, + { + label: 'donate_title', + path: 'https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal', + icon: , + element: null, + }, ] as const export const HEADER_LINKS = [ From 8b4043590e5e880f2756a99433b3e3686ede11e1 Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Wed, 15 May 2024 08:56:07 +0300 Subject: [PATCH 4/4] fix: css thing --- src/layout/header/Header.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/layout/header/Header.css b/src/layout/header/Header.css index fc8d11de..ade7f6ce 100644 --- a/src/layout/header/Header.css +++ b/src/layout/header/Header.css @@ -18,6 +18,8 @@ .theme-icon:hover { transform: scale(1.1); +} + .bulb-dark { color: #fff; }