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