diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index 05581a5..c55fbed 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -20,6 +20,7 @@ const Donate = () => { const firstLinkRef = useRef(); const modalRef = useRef(); const [isOpen, _setIsOpen] = useState(false); + const [closed, setClosed] = useState(false); const setIsOpen = open => { _setIsOpen(open); @@ -100,6 +101,10 @@ const Donate = () => { small title={t('donate.title')} onClick={event => { + if (closed) { + event.preventDefault(); + return setClosed(false); + } if (store.TWA) { gtag('event', 'donate', { 'event_category': 'donate' }); event.preventDefault(); @@ -116,6 +121,7 @@ const Donate = () => { href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer" + id="donate_button" style={{ whiteSpace: 'nowrap' }} >{t('donate.button')} @@ -125,6 +131,9 @@ const Donate = () => { onBlur={e => { if (modalRef.current.contains(e.relatedTarget)) return; setIsOpen(false); + if (e.relatedTarget && e.relatedTarget.id === 'donate_button') { + setClosed(true); + } }} > Donate with PayPal diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 59c7dee..267c990 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -232,27 +232,32 @@ const Home = ({ offline }) => {

Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.
Learn more about how to Crab Fit.

- {['chrome', 'firefox'].includes(browser) && ( + {['chrome', 'firefox', 'safari'].includes(browser) && ( )}