Merge pull request #23 from GRA0007/dev

Outlook new app id, a11y

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"
     }
   ]
-}
+}

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;
+      }
+    }
 	`}
 `;
 

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&currency_code=AUD&amount=2" target="_blank" rel="noreferrer">{t('donate.options.$2')}</a>
+        <a onClick={linkPressed} ref={firstLinkRef} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_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&currency_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&currency_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&currency_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&currency_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&currency_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a>
+        <a onClick={linkPressed} href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a>
       </Options>
   	</Wrapper>
   );

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;
+  }
 `;

crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx

@@ -113,8 +113,8 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
         <CalendarList>
           <Title>
             <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();

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);
+  `}
 `;

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...';
+    }
+  }
 `;

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`

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({
+      await publicClientApplication.loginPopup({ scopes });
-        scopes: ['Calendars.Read', 'Calendars.Read.Shared'],
-      });
     } 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({
+        const result = await publicClientApplication.acquireTokenPopup({ scopes });
-          scopes: ['Calendars.Read', 'Calendars.Read.Shared'],
-        });
         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();

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`

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`