From 7c8ede73cd043f62e2b2effbc9d9ad1f5700d0c6 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Thu, 3 Jun 2021 17:57:55 +1000 Subject: [PATCH] Respect prefers-reduced-motion --- .../src/components/Button/buttonStyle.ts | 18 ++++++++++++++++++ .../src/components/Donate/Donate.tsx | 15 ++++++++++----- .../src/components/Donate/donateStyle.ts | 4 ++++ .../src/components/Loading/loadingStyle.ts | 9 +++++++++ .../src/components/Logo/logoStyle.ts | 5 +++++ .../src/components/Settings/settingsStyle.ts | 8 ++++++++ crabfit-frontend/src/pages/Home/homeStyle.ts | 8 ++++++++ 7 files changed, 62 insertions(+), 5 deletions(-) diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index 7a31fcb..c3a6338 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -64,6 +64,24 @@ export const Top = styled.button` border-radius: 100px; animation: load .5s linear infinite; } + + @media (prefers-reduced-motion: reduce) { + &:after { + content: 'loading...'; + color: #FFF; + animation: none; + width: initial; + height: initial; + left: 50%; + transform: translateX(-50%); + border: 0; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + } + } `} `; diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index d981890..30ced8c 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -30,6 +30,11 @@ const Donate = () => { } }; + const linkPressed = () => { + setIsOpen(false); + gtag('event', 'donate', { 'event_category': 'donate' }); + }; + useEffect(() => { if (store.TWA === undefined) { store.setTWA(document.referrer.includes('android-app://fit.crab')); @@ -94,8 +99,8 @@ const Donate = () => { { - gtag('event', 'donate', { 'event_category': 'donate' }); if (store.TWA) { + gtag('event', 'donate', { 'event_category': 'donate' }); event.preventDefault(); if (window.confirm(t('donate.messages.about'))) { if (purchase() === false) { @@ -130,10 +135,10 @@ const Donate = () => { }} > 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')} - setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')} + {t('donate.options.$2')} + {t('donate.options.$5')} + {t('donate.options.$10')} + {t('donate.options.choose')} ); diff --git a/crabfit-frontend/src/components/Donate/donateStyle.ts b/crabfit-frontend/src/components/Donate/donateStyle.ts index ff9d4c2..ad32073 100644 --- a/crabfit-frontend/src/components/Donate/donateStyle.ts +++ b/crabfit-frontend/src/components/Donate/donateStyle.ts @@ -58,4 +58,8 @@ export const Options = styled.div` font-weight: 800; } } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } `; diff --git a/crabfit-frontend/src/components/Loading/loadingStyle.ts b/crabfit-frontend/src/components/Loading/loadingStyle.ts index 44bd8bb..84665ff 100644 --- a/crabfit-frontend/src/components/Loading/loadingStyle.ts +++ b/crabfit-frontend/src/components/Loading/loadingStyle.ts @@ -23,4 +23,13 @@ export const Loader = styled.div` border-left-color: transparent; border-radius: 100px; animation: load .5s linear infinite; + + @media (prefers-reduced-motion: reduce) { + animation: none; + border: 0; + + &::before { + content: 'loading...'; + } + } `; diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts index 1243b21..5edeace 100644 --- a/crabfit-frontend/src/components/Logo/logoStyle.ts +++ b/crabfit-frontend/src/components/Logo/logoStyle.ts @@ -27,6 +27,11 @@ export const A = styled.a` &:hover img { animation: jelly .5s 1; } + @media (prefers-reduced-motion: reduce) { + &:hover img { + animation: none; + } + } `; export const Top = styled.div` diff --git a/crabfit-frontend/src/components/Settings/settingsStyle.ts b/crabfit-frontend/src/components/Settings/settingsStyle.ts index 6a28798..0f42b74 100644 --- a/crabfit-frontend/src/components/Settings/settingsStyle.ts +++ b/crabfit-frontend/src/components/Settings/settingsStyle.ts @@ -29,6 +29,10 @@ export const OpenButton = styled.button` ${props => props.isOpen && ` transform: rotate(-45deg); `} + + @media (prefers-reduced-motion: reduce) { + transition: none; + } `; export const Cover = styled.div` @@ -73,6 +77,10 @@ export const Modal = styled.div` transform: translateY(0); visibility: visible; `} + + @media (prefers-reduced-motion: reduce) { + transition: none; + } `; export const Heading = styled.span` diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 2dd67a2..16e1f89 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -70,6 +70,14 @@ export const Logo = styled.img` animation: none; transform: scale(.85); } + + @media (prefers-reduced-motion: reduce) { + animation: none; + transition: none; + &:active { + transform: none; + } + } `; export const Links = styled.nav`