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

Change non-navigating links to use button elements

Browse source
This commit is contained in:
Ben Grant 2021-06-15 21:06:45 +10:00
parent dd2fe9d8db
commit 9adb3d21ed
3 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import {
Options, Options,
Title, Title,
Icon, Icon,
LinkButton,
} from './googleCalendarStyle'; } from './googleCalendarStyle';
import googleLogo from 'res/google.svg'; import googleLogo from 'res/google.svg';
@ -111,26 +112,23 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
<Title> <Title>
<Icon src={googleLogo} alt="" /> <Icon src={googleLogo} alt="" />
<strong>{t('event:you.google_cal.login')}</strong> <strong>{t('event:you.google_cal.login')}</strong>
{/* eslint-disable-next-line */} (<LinkButton type="button" onClick={e => {
(<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
signOut(); signOut();
}}>{t('event:you.google_cal.logout')}</a>) }}>{t('event:you.google_cal.logout')}</LinkButton>)
</Title> </Title>
<Options> <Options>
{calendars !== undefined && !calendars.every(c => c.checked) && ( {calendars !== undefined && !calendars.every(c => c.checked) && (
/* eslint-disable-next-line */ <LinkButton type="button" onClick={e => {
<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
setCalendars(calendars.map(c => ({...c, checked: true}))); setCalendars(calendars.map(c => ({...c, checked: true})));
}}>{t('event:you.google_cal.select_all')}</a> }}>{t('event:you.google_cal.select_all')}</LinkButton>
)} )}
{calendars !== undefined && calendars.every(c => c.checked) && ( {calendars !== undefined && calendars.every(c => c.checked) && (
/* eslint-disable-next-line */ <LinkButton type="button" onClick={e => {
<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
setCalendars(calendars.map(c => ({...c, checked: false}))); setCalendars(calendars.map(c => ({...c, checked: false})));
}}>{t('event:you.google_cal.select_none')}</a> }}>{t('event:you.google_cal.select_none')}</LinkButton>
)} )}
</Options> </Options>
{calendars !== undefined ? calendars.map(calendar => ( {calendars !== undefined ? calendars.map(calendar => (

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

@ -119,3 +119,16 @@ export const Icon = styled.img`
filter: invert(1); filter: invert(1);
`} `}
`; `;
export const LinkButton = styled.button`
font: inherit;
color: ${props => props.theme.primary};
border: 0;
background: none;
text-decoration: underline;
padding: 0;
margin: 0;
display: inline;
cursor: pointer;
appearance: none;
`;

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

@ -14,6 +14,7 @@ import {
Options, Options,
Title, Title,
Icon, Icon,
LinkButton,
} from '../GoogleCalendar/googleCalendarStyle'; } from '../GoogleCalendar/googleCalendarStyle';
import outlookLogo from 'res/outlook.svg'; import outlookLogo from 'res/outlook.svg';
@ -178,26 +179,23 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
<Title> <Title>
<Icon src={outlookLogo} alt="" /> <Icon src={outlookLogo} alt="" />
<strong>{t('event:you.outlook_cal')}</strong> <strong>{t('event:you.outlook_cal')}</strong>
{/* eslint-disable-next-line */} (<LinkButton type="button" onClick={e => {
(<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
signOut(); signOut();
}}>{t('event:you.google_cal.logout')}</a>) }}>{t('event:you.google_cal.logout')}</LinkButton>)
</Title> </Title>
<Options> <Options>
{calendars !== undefined && !calendars.every(c => c.checked) && ( {calendars !== undefined && !calendars.every(c => c.checked) && (
/* eslint-disable-next-line */ <LinkButton type="button" onClick={e => {
<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
setCalendars(calendars.map(c => ({...c, checked: true}))); setCalendars(calendars.map(c => ({...c, checked: true})));
}}>{t('event:you.google_cal.select_all')}</a> }}>{t('event:you.google_cal.select_all')}</LinkButton>
)} )}
{calendars !== undefined && calendars.every(c => c.checked) && ( {calendars !== undefined && calendars.every(c => c.checked) && (
/* eslint-disable-next-line */ <LinkButton type="button" onClick={e => {
<a href="#" onClick={e => {
e.preventDefault(); e.preventDefault();
setCalendars(calendars.map(c => ({...c, checked: false}))); setCalendars(calendars.map(c => ({...c, checked: false})));
}}>{t('event:you.google_cal.select_none')}</a> }}>{t('event:you.google_cal.select_none')}</LinkButton>
)} )}
</Options> </Options>
{calendars !== undefined ? calendars.map(calendar => ( {calendars !== undefined ? calendars.map(calendar => (