From 7e872b34de8fe19a0a360c82e0cc2f4aabe8d0b0 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 1 Jun 2021 14:17:17 +1000 Subject: [PATCH 1/4] Fix calendar field weekdays selector --- .../src/components/CalendarField/CalendarField.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx index 2ce8897..0844a8b 100644 --- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx +++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx @@ -220,6 +220,16 @@ const CalendarField = ({ selected={selectedDays.includes(((i + weekStart) % 7 + 7) % 7)} selecting={selectingDays.includes(((i + weekStart) % 7 + 7) % 7)} mode={mode} + type="button" + onKeyPress={e => { + if (e.key === ' ' || e.key === 'Enter') { + if (selectedDays.includes(((i + weekStart) % 7 + 7) % 7)) { + setSelectedDays(selectedDays.filter(d => d !== ((i + weekStart) % 7 + 7) % 7)); + } else { + setSelectedDays([...selectedDays, ((i + weekStart) % 7 + 7) % 7]); + } + } + }} onPointerDown={(e) => { startPos.current = i; setMode(selectedDays.includes(((i + weekStart) % 7 + 7) % 7) ? 'remove' : 'add'); From f292f6047096f7dc9e406107180b32ece0af554d Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 1 Jun 2021 14:29:09 +1000 Subject: [PATCH 2/4] Paypal logo in donate popup --- .../src/components/Donate/Donate.tsx | 3 ++ .../src/components/Donate/donateStyle.ts | 9 +++++ crabfit-frontend/src/res/paypal.svg | 39 +++++++++++++++++++ 3 files changed, 51 insertions(+) create mode 100644 crabfit-frontend/src/res/paypal.svg 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 From 8dff37fd9ea689282d7b50d2988e31821a3ca1c9 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 1 Jun 2021 14:55:12 +1000 Subject: [PATCH 3/4] Crab go squoosh --- .../src/components/Logo/logoStyle.ts | 4 ---- crabfit-frontend/src/pages/Home/homeStyle.ts | 22 +++++++++++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts index 2709403..1243b21 100644 --- a/crabfit-frontend/src/components/Logo/logoStyle.ts +++ b/crabfit-frontend/src/components/Logo/logoStyle.ts @@ -11,19 +11,15 @@ export const A = styled.a` @keyframes jelly { from,to { - -webkit-transform: scale(1,1); transform: scale(1,1) } 25% { - -webkit-transform: scale(.9,1.1); transform: scale(.9,1.1) } 50% { - -webkit-transform: scale(1.1,.9); transform: scale(1.1,.9) } 75% { - -webkit-transform: scale(.95,1.05); transform: scale(.95,1.05) } } diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 976f8d8..a214baa 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -47,6 +47,28 @@ export const TitleLarge = styled.h1` export const Logo = styled.img` width: 80px; + transition: transform .2s; + animation: jelly .5s 1 .1s; + + @keyframes jelly { + from,to { + transform: scale(1,1) + } + 25% { + transform: scale(.9,1.1) + } + 50% { + transform: scale(1.1,.9) + } + 75% { + transform: scale(.95,1.05) + } + } + + &:active { + animation: none; + transform: scale(.85); + } `; export const Links = styled.nav` From ff169a6de23233489fb4c686a0b233a10ee9a3e6 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 1 Jun 2021 15:32:36 +1000 Subject: [PATCH 4/4] New tab recents on extension --- crabfit-frontend/src/components/Recents/Recents.tsx | 4 ++-- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- crabfit-frontend/src/pages/Home/homeStyle.ts | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/crabfit-frontend/src/components/Recents/Recents.tsx b/crabfit-frontend/src/components/Recents/Recents.tsx index 779a725..035ac99 100644 --- a/crabfit-frontend/src/components/Recents/Recents.tsx +++ b/crabfit-frontend/src/components/Recents/Recents.tsx @@ -8,7 +8,7 @@ import { Recent } from './recentsStyle'; dayjs.extend(relativeTime); -const Recents = () => { +const Recents = ({ target }) => { const recents = useRecentsStore(state => state.recents); const locale = useLocaleUpdateStore(state => state.locale); const { t } = useTranslation(['home', 'common']); @@ -18,7 +18,7 @@ const Recents = () => {

{t('home:recently_visited')}

{recents.map(event => ( - + {event.name} {t('common:created', { date: dayjs.unix(event.created).fromNow() })} diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index fc8083e..e766316 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -170,7 +170,7 @@ const Create = ({ offline }) => { ) : ( <> - + {offline ? ( diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index a214baa..2dd67a2 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -47,8 +47,9 @@ export const TitleLarge = styled.h1` export const Logo = styled.img` width: 80px; - transition: transform .2s; - animation: jelly .5s 1 .1s; + transition: transform .15s; + animation: jelly .5s 1 .05s; + user-select: none; @keyframes jelly { from,to {