diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx
index 5d0b194..db42fb3 100644
--- a/crabfit-frontend/src/components/Donate/Donate.tsx
+++ b/crabfit-frontend/src/components/Donate/Donate.tsx
@@ -5,7 +5,7 @@ import { useTWAStore } from 'stores';
const PAYMENT_METHOD = 'https://play.google.com/billing';
const SKU = 'crab_donation';
-const Donate = () => {
+const Donate = ({ onDonate = null }) => {
const store = useTWAStore();
useEffect(() => {
@@ -80,9 +80,12 @@ const Donate = () => {
alert('Cannot make donation through Google. Please try donating through the website crab.fit 🦀');
}
}
+ } else if (onDonate !== null) {
+ event.preventDefault();
+ onDonate();
}
}}
- href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD"
+ href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5"
target="_blank"
rel="noreferrer"
>
diff --git a/crabfit-frontend/src/components/Footer/Footer.tsx b/crabfit-frontend/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..388a484
--- /dev/null
+++ b/crabfit-frontend/src/components/Footer/Footer.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+import { Donate } from 'components';
+import { Wrapper, Link } from './footerStyle';
+
+const Footer = () => {
+ const [donateMode, setDonateMode] = useState(false);
+
+ return (
+
+ {donateMode ? (
+ <>
+ Donate $5
+ Thank you for using Crab Fit. If you like it, consider donating.
+ setDonateMode(true)} />
+
+ )}
+
+ );
+};
+
+export default Footer;
diff --git a/crabfit-frontend/src/components/Footer/footerStyle.ts b/crabfit-frontend/src/components/Footer/footerStyle.ts
new file mode 100644
index 0000000..b15a9e1
--- /dev/null
+++ b/crabfit-frontend/src/components/Footer/footerStyle.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.footer`
+ width: 600px;
+ margin: 20px auto;
+ max-width: calc(100% - 60px);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ ${props => props.donateMode && `
+ flex-wrap: wrap;
+ `}
+`;
+
+export const Link = styled.a`
+ padding: 11px 10px;
+ white-space: nowrap;
+
+ & strong {
+ font-weight: 800;
+ }
+`;
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index ada1a57..0d60028 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -15,3 +15,4 @@ export { default as Center } from './Center/Center';
export { default as Donate } from './Donate/Donate';
export { default as Settings } from './Settings/Settings';
export { default as Egg } from './Egg/Egg';
+export { default as Footer } from './Footer/Footer';
diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index 2d4c8e8..a0184e1 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -9,7 +9,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
import {
Center,
- Donate,
+ Footer,
TextField,
SelectField,
Button,
@@ -20,7 +20,6 @@ import {
import {
StyledMain,
- Footer,
Logo,
Title,
EventName,
@@ -442,10 +441,7 @@ const Event = (props) => {
)}
-
- Thank you for using Crab Fit. If you like it, consider donating.
-
+
);
};
diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts
index c427909..f5f3354 100644
--- a/crabfit-frontend/src/pages/Event/eventStyle.ts
+++ b/crabfit-frontend/src/pages/Event/eventStyle.ts
@@ -6,15 +6,6 @@ export const StyledMain = styled.div`
max-width: calc(100% - 60px);
`;
-export const Footer = styled.footer`
- width: 600px;
- margin: 50px auto 20px;
- max-width: calc(100% - 60px);
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx
index d3c7b9e..4141f87 100644
--- a/crabfit-frontend/src/pages/Help/Help.tsx
+++ b/crabfit-frontend/src/pages/Help/Help.tsx
@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
import {
Button,
Center,
- Donate,
+ Footer,
AvailabilityViewer,
Legend,
} from 'components';
@@ -14,7 +14,6 @@ import {
Logo,
Title,
AboutSection,
- Footer,
P,
Step,
FakeCalendar,
@@ -94,10 +93,7 @@ const Help = () => {
-
- Thank you for using Crab Fit. If you like it, consider donating.
-
+
);
};
diff --git a/crabfit-frontend/src/pages/Help/helpStyle.ts b/crabfit-frontend/src/pages/Help/helpStyle.ts
index 2b45abe..dbd11d0 100644
--- a/crabfit-frontend/src/pages/Help/helpStyle.ts
+++ b/crabfit-frontend/src/pages/Help/helpStyle.ts
@@ -27,15 +27,6 @@ export const AboutSection = styled.section`
padding: 20px 0;
`;
-export const Footer = styled.footer`
- width: 600px;
- margin: 20px auto;
- max-width: calc(100% - 60px);
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
export const P = styled.p`
font-weight: 500;
line-height: 1.6em;
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx
index f900e5e..2c2870a 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@@ -14,8 +14,8 @@ import {
SelectField,
Button,
Center,
- Donate,
Error,
+ Footer,
} from 'components';
import {
@@ -26,7 +26,6 @@ import {
Logo,
Links,
AboutSection,
- Footer,
P,
Stats,
Stat,
@@ -245,18 +244,15 @@ 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.
{/* eslint-disable-next-line */}
- Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser!
+ Create a lot of Crab Fits? Get the Chrome extension or Firefox extension for your browser! You can also download the Android app to Crab Fit on the go.
{/* eslint-disable-next-line */}
Created by Ben Grant , Crab Fit is the modern-day solution to your group event planning debates.
- The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository .
+ The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository . By using Crab Fit you agree to the
Crab Fit costs more than $100 per month to run. Consider donating below if it helped you out so it can stay free for everyone. 🦀
-
- Thank you for using Crab Fit. If you like it, consider donating.
-
+
);
};
diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts
index a3fb4d1..b48af89 100644
--- a/crabfit-frontend/src/pages/Home/homeStyle.ts
+++ b/crabfit-frontend/src/pages/Home/homeStyle.ts
@@ -51,15 +51,6 @@ export const AboutSection = styled.section`
padding: 20px 0;
`;
-export const Footer = styled.footer`
- width: 600px;
- margin: 20px auto;
- max-width: calc(100% - 60px);
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
export const P = styled.p`
font-weight: 500;
line-height: 1.6em;
diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
index 5bb5677..03c95c9 100644
--- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx
+++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
import {
Button,
Center,
- Donate,
+ Footer,
} from 'components';
import {
@@ -12,7 +12,6 @@ import {
Logo,
Title,
AboutSection,
- Footer,
P,
} from '../Help/helpStyle';
@@ -95,10 +94,7 @@ const Privacy = () => {
-
- Thank you for using Crab Fit. If you like it, consider donating.
-
+
);
};