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);
+ }
}}
>
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 }) => {
Learn more about how to Crab Fit.