From 9adb3d21ed6438cefb96b5f0a6081e97e45b32e3 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 15 Jun 2021 21:06:45 +1000
Subject: [PATCH] Change non-navigating links to use button elements

---
 .../components/GoogleCalendar/GoogleCalendar.tsx | 16 +++++++---------
 .../GoogleCalendar/googleCalendarStyle.ts        | 13 +++++++++++++
 .../OutlookCalendar/OutlookCalendar.tsx          | 16 +++++++---------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
index 0c14f07..335f779 100644
--- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
+++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx
@@ -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 => (
diff --git a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
index ca7c0f8..00fd0f8 100644
--- a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
+++ b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts
@@ -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;
+`;
diff --git a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
index ebc590b..05242ee 100644
--- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
+++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx
@@ -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 => (