scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #23 from GRA0007/dev

Browse source 
Outlook new app id, a11y
This commit is contained in:
Benjamin Grant 2021-06-03 17:59:42 +10:00 committed by GitHub
parent eaeecea527 7c8ede73cd
commit c58f8e1b8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 78 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crabfit-frontend/public/.well-known/microsoft-identity-association.json
View file

@ -1,7 +1,7 @@
{
"associatedApplications": [
{
"applicationId": "78739601-9834-4d41-a281-74ca2a50b2e6"
"applicationId": "5d1ab8af-1ba3-4b79-b033-b0ee509c2be6"
}
]
}
}

18
crabfit-frontend/src/components/Button/buttonStyle.ts
View file

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

15
crabfit-frontend/src/components/Donate/Donate.tsx
View file

@ -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={() => 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={() => 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={() => 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} 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} 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=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" target="_blank" rel="noreferrer">{t('donate.options.choose')}</a>
</Options>
</Wrapper>
);

4
crabfit-frontend/src/components/Donate/donateStyle.ts
View file

@ -58,4 +58,8 @@ export const Options = styled.div`
font-weight: 800;
}
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`;

2
crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
View file

@ -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();

4
crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
View file

@ -125,4 +125,8 @@ export const Icon = styled.img`
height: 24px;
width: 24px;
margin-right: 12px;
${props => props.theme.mode === 'light' && `
filter: invert(1);
`}
`;

9
crabfit-frontend/src/components/Loading/loadingStyle.ts
View file

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

5
crabfit-frontend/src/components/Logo/logoStyle.ts
View file

@ -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`

18
crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
View file

@ -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();

8
crabfit-frontend/src/components/Settings/settingsStyle.ts
View file

@ -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`

8
crabfit-frontend/src/pages/Home/homeStyle.ts
View file

@ -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`