diff --git a/crabfit-frontend/public/.well-known/microsoft-identity-association.json b/crabfit-frontend/public/.well-known/microsoft-identity-association.json index 4a95022..671e444 100644 --- a/crabfit-frontend/public/.well-known/microsoft-identity-association.json +++ b/crabfit-frontend/public/.well-known/microsoft-identity-association.json @@ -1,7 +1,7 @@ { "associatedApplications": [ { - "applicationId": "78739601-9834-4d41-a281-74ca2a50b2e6" + "applicationId": "5d1ab8af-1ba3-4b79-b033-b0ee509c2be6" } ] -} \ No newline at end of file +} 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/GoogleCalendar/GoogleCalendar.tsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx index b1517a0..74f5694 100644 --- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx +++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx @@ -113,8 +113,8 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { <Icon src={googleLogo} alt="" /> - {/* eslint-disable-next-line */} <strong>{t('event:you.google_cal.login')}</strong> + {/* eslint-disable-next-line */} (<a href="#" onClick={e => { e.preventDefault(); signOut(); diff --git a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts index fe31510..2afc26f 100644 --- a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts +++ b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts @@ -125,4 +125,8 @@ export const Icon = styled.img` height: 24px; width: 24px; margin-right: 12px; + + ${props => props.theme.mode === 'light' && ` + filter: invert(1); + `} `; 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/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx index cae2983..ce62594 100644 --- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx +++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx @@ -19,10 +19,12 @@ import { import outlookLogo from 'res/outlook.svg'; +const scopes = ['Calendars.Read', 'Calendars.Read.Shared']; + // Initialise the MSAL object const publicClientApplication = new PublicClientApplication({ auth: { - clientId: '78739601-9834-4d41-a281-74ca2a50b2e6', + clientId: '5d1ab8af-1ba3-4b79-b033-b0ee509c2be6', redirectUri: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000', }, cache: { @@ -61,9 +63,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { const signIn = async () => { try { - await publicClientApplication.loginPopup({ - scopes: ['Calendars.Read', 'Calendars.Read.Shared'], - }); + await publicClientApplication.loginPopup({ scopes }); } catch (e) { console.error(e); } finally { @@ -90,7 +90,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { // Try to get silently const result = await publicClientApplication.acquireTokenSilent({ - scopes: ['Calendars.Read', 'Calendars.Read.Shared'], + scopes, account: accounts[0], }); return result.accessToken; @@ -102,9 +102,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { 'no_account_in_silent_request' ].includes(e.message)) { // Try to get with popup - const result = await publicClientApplication.acquireTokenPopup({ - scopes: ['Calendars.Read', 'Calendars.Read.Shared'], - }); + const result = await publicClientApplication.acquireTokenPopup({ scopes }); return result.accessToken; } else { throw e; @@ -139,6 +137,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { .finally(() => setFreeBusyLoading(false)); }; + // eslint-disable-next-line useEffect(() => checkLogin(), []); useEffect(() => { @@ -158,6 +157,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { signOut(); }); } + // eslint-disable-next-line }, [client]); return ( @@ -180,8 +180,8 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { <CalendarList> <Title> <Icon src={outlookLogo} alt="" /> - {/* eslint-disable-next-line */} <strong>{t('event:you.outlook_cal')}</strong> + {/* eslint-disable-next-line */} (<a href="#" onClick={e => { e.preventDefault(); signOut(); 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`