diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index d245e57..d981890 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -8,6 +8,8 @@ import { Options, } from './donateStyle'; +import paypal_logo from 'res/paypal.svg'; + const PAYMENT_METHOD = 'https://play.google.com/billing'; const SKU = 'crab_donation'; @@ -127,6 +129,7 @@ const Donate = () => { setIsOpen(false); }} > + Donate with PayPal setIsOpen(false)} ref={firstLinkRef} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=2" target="_blank" rel="noreferrer">{t('donate.options.$2')} setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer">{t('donate.options.$5')} setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=10" target="_blank" rel="noreferrer">{t('donate.options.$10')} diff --git a/crabfit-frontend/src/components/Donate/donateStyle.ts b/crabfit-frontend/src/components/Donate/donateStyle.ts index 280813f..ff9d4c2 100644 --- a/crabfit-frontend/src/components/Donate/donateStyle.ts +++ b/crabfit-frontend/src/components/Donate/donateStyle.ts @@ -34,6 +34,12 @@ export const Options = styled.div` visibility: visible; `} + & img { + width: 80px; + margin: 10px auto 0; + display: block; + } + & a { display: block; white-space: nowrap; @@ -48,5 +54,8 @@ export const Options = styled.div` &:hover { text-decoration: underline; } + & strong { + font-weight: 800; + } } `; diff --git a/crabfit-frontend/src/res/paypal.svg b/crabfit-frontend/src/res/paypal.svg new file mode 100644 index 0000000..4c06471 --- /dev/null +++ b/crabfit-frontend/src/res/paypal.svg @@ -0,0 +1,39 @@ + +image/svg+xml