From db0c64a60b99b6da4d423b0b88b42a70ee711ae7 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Thu, 3 Jun 2021 16:44:22 +1000 Subject: [PATCH 1/3] Outlook calendar sync use new app id --- .../microsoft-identity-association.json | 4 ++-- .../components/OutlookCalendar/OutlookCalendar.tsx | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) 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/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx index cae2983..cbbdce3 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; From 018b045a1e747d7c9a652bfef1db006a40f973ad Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Thu, 3 Jun 2021 17:28:16 +1000 Subject: [PATCH 2/3] Fix icon color in light mode --- .../src/components/GoogleCalendar/GoogleCalendar.tsx | 2 +- .../src/components/GoogleCalendar/googleCalendarStyle.ts | 4 ++++ .../src/components/OutlookCalendar/OutlookCalendar.tsx | 4 +++- 3 files changed, 8 insertions(+), 2 deletions(-) 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/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx index cbbdce3..ce62594 100644 --- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx +++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx @@ -137,6 +137,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { .finally(() => setFreeBusyLoading(false)); }; + // eslint-disable-next-line useEffect(() => checkLogin(), []); useEffect(() => { @@ -156,6 +157,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { signOut(); }); } + // eslint-disable-next-line }, [client]); return ( @@ -178,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(); From 7c8ede73cd043f62e2b2effbc9d9ad1f5700d0c6 Mon Sep 17 00:00:00 2001 From: Ben Grant <benjamin.grantGRA0007@gmail.com> Date: Thu, 3 Jun 2021 17:57:55 +1000 Subject: [PATCH 3/3] 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 = () => { <Wrapper> <a onClick={event => { - 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 = () => { }} > <img src={paypal_logo} alt="Donate with PayPal" /> - <a onClick={() => 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')}</a> - <a onClick={() => setIsOpen(false)} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer"><strong>{t('donate.options.$5')}</strong></a> - <a onClick={() => 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')}</a> - <a onClick={() => 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')}</a> + <a onClick={linkPressed} 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')}</a> + <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer"><strong>{t('donate.options.$5')}</strong></a> + <a onClick={linkPressed} 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')}</a> + <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a> </Options> </Wrapper> ); 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`