From decfc2b7e6e5d17895c8788ff238dfc86f60c42b Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 01:02:48 +1000
Subject: [PATCH 1/7] Memoized heatmap

---
 .../AvailabilityViewer/AvailabilityViewer.tsx | 160 ++++++++++--------
 .../availabilityViewerStyle.ts                |   2 +-
 .../src/components/Legend/Legend.tsx          |   2 +-
 3 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index 881eaee..4597830 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, Fragment } from 'react';
+import { useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
@@ -65,6 +65,94 @@ const AvailabilityViewer = ({
     setTouched(people.length <= 1);
   }, [people]);
 
+  const heatmap = useMemo(() => (
+    <Container>
+      <TimeLabels>
+        {!!timeLabels.length && timeLabels.map((label, i) =>
+          <TimeSpace key={i}>
+            {label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
+          </TimeSpace>
+        )}
+      </TimeLabels>
+      {dates.map((date, i) => {
+        const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
+        const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
+        return (
+          <Fragment key={i}>
+            <Date>
+              {isSpecificDates && <DateLabel locale={locale}>{parsedDate.format('MMM D')}</DateLabel>}
+              <DayLabel>{parsedDate.format('ddd')}</DayLabel>
+
+              <Times
+                borderRight={last}
+                borderLeft={i === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[i-1], 'DDMMYYYY') : dayjs().day(dates[i-1]), 'day') > 1}
+              >
+                {timeLabels.map((timeLabel, i) => {
+                  if (!timeLabel.time) return null;
+                  if (!times.includes(`${timeLabel.time}-${date}`)) {
+                    return (
+                      <TimeSpace key={i} />
+                    );
+                  }
+                  const time = `${timeLabel.time}-${date}`;
+                  const peopleHere = tempFocus !== null
+                    ? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
+                    : people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name);
+
+                  return (
+                    <Time
+                      key={i}
+                      time={time}
+                      className="time"
+                      peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length}
+                      aria-label={peopleHere.join(', ')}
+                      maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
+                      minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
+                      highlight={highlight}
+                      onMouseEnter={(e) => {
+                        const cellBox = e.currentTarget.getBoundingClientRect();
+                        const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
+                        const timeText = timeFormat === '12h' ? `h${locales[locale].separator}mma` : `HH${locales[locale].separator}mm`;
+                        setTooltip({
+                          x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
+                          y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
+                          available: `${peopleHere.length} / ${people.length} ${t('event:available')}`,
+                          date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
+                          people: peopleHere,
+                        });
+                      }}
+                      onMouseLeave={() => {
+                        setTooltip(null);
+                      }}
+                    />
+                  );
+                })}
+              </Times>
+            </Date>
+            {last && dates.length !== i+1 && (
+              <Spacer />
+            )}
+          </Fragment>
+        );
+      })}
+    </Container>
+  ), [
+    people,
+    filteredPeople,
+    tempFocus,
+    focusCount,
+    highlight,
+    locale,
+    dates,
+    isSpecificDates,
+    max,
+    min,
+    t,
+    timeFormat,
+    timeLabels,
+    times,
+  ]);
+
 	return (
     <>
       <StyledMain>
@@ -108,76 +196,8 @@ const AvailabilityViewer = ({
 
   		<Wrapper ref={wrapper}>
     		<ScrollWrapper>
-    			<Container>
-    				<TimeLabels>
-    					{!!timeLabels.length && timeLabels.map((label, i) =>
-    						<TimeSpace key={i}>
-    							{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
-    						</TimeSpace>
-    					)}
-    				</TimeLabels>
-    				{dates.map((date, i) => {
-    					const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
-    					const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
-    					return (
-    						<Fragment key={i}>
-    							<Date>
-    								{isSpecificDates && <DateLabel locale={locale}>{parsedDate.format('MMM D')}</DateLabel>}
-    								<DayLabel>{parsedDate.format('ddd')}</DayLabel>
+    			{heatmap}
 
-    								<Times
-                      borderRight={last}
-                      borderLeft={i === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[i-1], 'DDMMYYYY') : dayjs().day(dates[i-1]), 'day') > 1}
-                    >
-    									{timeLabels.map((timeLabel, i) => {
-    										if (!timeLabel.time) return null;
-    										if (!times.includes(`${timeLabel.time}-${date}`)) {
-    											return (
-    												<TimeSpace key={i} />
-    											);
-    										}
-    										const time = `${timeLabel.time}-${date}`;
-    										const peopleHere = tempFocus !== null
-                          ? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
-                          : people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name);
-
-    										return (
-    											<Time
-    												key={i}
-    												time={time}
-    												className="time"
-    												peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length}
-    												aria-label={peopleHere.join(', ')}
-    												maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
-    												minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
-                            highlight={highlight}
-    												onMouseEnter={(e) => {
-    													const cellBox = e.currentTarget.getBoundingClientRect();
-    													const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 };
-                              const timeText = timeFormat === '12h' ? `h${locales[locale].separator}mma` : `HH${locales[locale].separator}mm`;
-    													setTooltip({
-    														x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
-    														y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
-    														available: `${peopleHere.length} / ${people.length} ${t('event:available')}`,
-    														date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
-    														people: peopleHere,
-    													});
-    												}}
-    												onMouseLeave={() => {
-    													setTooltip(null);
-    												}}
-    											/>
-    										);
-    									})}
-    								</Times>
-    							</Date>
-    							{last && dates.length !== i+1 && (
-    								<Spacer />
-    							)}
-    						</Fragment>
-    					);
-    				})}
-    			</Container>
     			{tooltip && (
     				<Tooltip
     					x={tooltip.x}
diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
index 3d2228b..d618abe 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
+++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
@@ -80,7 +80,7 @@ export const Time = styled.div`
 		border-top: 2px dotted ${props.theme.text};
 	`}
 
-  ${props => props.highlight && props.peopleCount === props.maxPeople ? `
+  ${props => props.highlight && props.peopleCount === props.maxPeople && props.peopleCount > 0 ? `
     background-image: repeating-linear-gradient(
       45deg,
   	  ${props.theme.primary},
diff --git a/crabfit-frontend/src/components/Legend/Legend.tsx b/crabfit-frontend/src/components/Legend/Legend.tsx
index e8477a0..2760ded 100644
--- a/crabfit-frontend/src/components/Legend/Legend.tsx
+++ b/crabfit-frontend/src/components/Legend/Legend.tsx
@@ -34,7 +34,7 @@ const Legend = ({
 					<Grade
             key={i}
             color={`${theme.primary}${Math.round((i/(max))*255).toString(16)}`}
-            highlight={highlight && i === max}
+            highlight={highlight && i === max && max > 0}
             onMouseOver={() => onSegmentFocus(i)}
           />
 				)}

From 2544f3b312440a95ed7f569dc55a0ae681e45cc3 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 02:45:15 +1000
Subject: [PATCH 2/7] A11y and donate popup

---
 crabfit-frontend/src/App.tsx                  |  9 ++--
 .../src/components/Donate/Donate.tsx          | 45 +++++++++++++---
 .../src/components/Donate/donateStyle.ts      | 52 +++++++++++++++++++
 .../src/components/Footer/Footer.tsx          | 21 ++------
 .../src/components/Footer/footerStyle.ts      | 16 ------
 .../src/components/Settings/Settings.tsx      | 15 ++++--
 .../src/components/Settings/settingsStyle.ts  |  4 +-
 .../components/ToggleField/ToggleField.tsx    |  2 +
 .../ToggleField/toggleFieldStyle.ts           |  1 +
 9 files changed, 118 insertions(+), 47 deletions(-)
 create mode 100644 crabfit-frontend/src/components/Donate/donateStyle.ts

diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx
index a31812d..743c72f 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -107,6 +107,11 @@ const App = () => {
 						},
 					})}
 				/>
+        
+        <Suspense fallback={<Loading />}>
+          <Settings />
+        </Suspense>
+
 		    <Switch>
 					<Route path="/" exact render={props => (
             <Suspense fallback={<Loading />}>
@@ -135,10 +140,6 @@ const App = () => {
           )} />
 				</Switch>
 
-        <Suspense fallback={<Loading />}>
-          <Settings />
-        </Suspense>
-
         {eggVisible && <Egg eggKey={eggKey} onClose={() => setEggVisible(false)} />}
 			</ThemeProvider>
 		</BrowserRouter>
diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx
index 03dabfe..d245e57 100644
--- a/crabfit-frontend/src/components/Donate/Donate.tsx
+++ b/crabfit-frontend/src/components/Donate/Donate.tsx
@@ -1,15 +1,33 @@
-import { useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Button } from 'components';
 import { useTWAStore } from 'stores';
 import { useTranslation } from 'react-i18next';
 
+import {
+  Wrapper,
+  Options,
+} from './donateStyle';
+
 const PAYMENT_METHOD = 'https://play.google.com/billing';
 const SKU = 'crab_donation';
 
-const Donate = ({ onDonate = null }) => {
+const Donate = () => {
   const store = useTWAStore();
   const { t } = useTranslation('common');
 
+  const firstLinkRef = useRef();
+  const buttonRef = useRef();
+  const modalRef = useRef();
+  const [isOpen, _setIsOpen] = useState(false);
+
+  const setIsOpen = open => {
+    _setIsOpen(open);
+
+    if (open) {
+      window.setTimeout(() => firstLinkRef.current.focus(), 150);
+    }
+  };
+
   useEffect(() => {
     if (store.TWA === undefined) {
       store.setTWA(document.referrer.includes('android-app://fit.crab'));
@@ -71,7 +89,7 @@ const Donate = ({ onDonate = null }) => {
   };
 
   return (
-  	<div style={{ marginTop: 6, marginLeft: 12 }}>
+  	<Wrapper>
   		<a
         onClick={event => {
           gtag('event', 'donate', { 'event_category': 'donate' });
@@ -82,14 +100,15 @@ const Donate = ({ onDonate = null }) => {
                 alert(t('donate.messages.error'));
               }
             }
-          } else if (onDonate !== null) {
+          } else {
             event.preventDefault();
-            onDonate();
+            setIsOpen(true);
           }
         }}
         href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5"
         target="_blank"
         rel="noreferrer"
+        ref={buttonRef}
       >
   			<Button
   				buttonHeight="30px"
@@ -99,7 +118,21 @@ const Donate = ({ onDonate = null }) => {
           title={t('donate.title')}
   			>{t('donate.button')}</Button>
   		</a>
-  	</div>
+
+      <Options
+        isOpen={isOpen}
+        ref={modalRef}
+        onBlur={e => {
+          if (modalRef.current.contains(e.relatedTarget)) return;
+          setIsOpen(false);
+        }}
+      >
+        <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>
+      </Options>
+  	</Wrapper>
   );
 }
 
diff --git a/crabfit-frontend/src/components/Donate/donateStyle.ts b/crabfit-frontend/src/components/Donate/donateStyle.ts
new file mode 100644
index 0000000..280813f
--- /dev/null
+++ b/crabfit-frontend/src/components/Donate/donateStyle.ts
@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  margin-top: 6px;
+  margin-left: 12px;
+  position: relative;
+`;
+
+export const Options = styled.div`
+	position: absolute;
+  bottom: calc(100% + 20px);
+  right: 0;
+  background-color: ${props => props.theme.background};
+  ${props => props.theme.mode === 'dark' && `
+    border: 1px solid ${props.theme.primaryBackground};
+  `}
+  z-index: 60;
+  padding: 4px 10px;
+  border-radius: 14px;
+  box-sizing: border-box;
+  max-width: calc(100vw - 20px);
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);
+
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(5px);
+  transition: opacity .15s, transform .15s, visibility .15s;
+
+  ${props => props.isOpen && `
+    pointer-events: all;
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  `}
+
+  & a {
+    display: block;
+    white-space: nowrap;
+    text-align: center;
+    padding: 4px 20px;
+    margin: 6px 0;
+    text-decoration: none;
+    border-radius: 100px;
+    background-color: ${props => props.theme.primary};
+    color: ${props => props.theme.background};
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
diff --git a/crabfit-frontend/src/components/Footer/Footer.tsx b/crabfit-frontend/src/components/Footer/Footer.tsx
index cbbfcef..8603aaf 100644
--- a/crabfit-frontend/src/components/Footer/Footer.tsx
+++ b/crabfit-frontend/src/components/Footer/Footer.tsx
@@ -1,28 +1,15 @@
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Donate } from 'components';
-import { Wrapper, Link } from './footerStyle';
+import { Wrapper } from './footerStyle';
 
 const Footer = (props) => {
-  const [donateMode, setDonateMode] = useState(false);
   const { t } = useTranslation('common');
 
   return (
-    <Wrapper id="donate" donateMode={donateMode} {...props}>
-      {donateMode ? (
-        <>
-          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=2" target="_blank">{t('donate.options.$2')}</Link>
-          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=5" target="_blank"><strong>{t('donate.options.$5')}</strong></Link>
-          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD&amount=10" target="_blank">{t('donate.options.$10')}</Link>
-          <Link href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank">{t('donate.options.choose')}</Link>
-        </>
-      ) : (
-        <>
-          <span>{t('donate.info')}</span>
-          <Donate onDonate={() => setDonateMode(true)} />
-        </>
-      )}
+    <Wrapper id="donate" {...props}>
+      <span>{t('donate.info')}</span>
+      <Donate />
     </Wrapper>
   );
 };
diff --git a/crabfit-frontend/src/components/Footer/footerStyle.ts b/crabfit-frontend/src/components/Footer/footerStyle.ts
index dd03a69..4e04db7 100644
--- a/crabfit-frontend/src/components/Footer/footerStyle.ts
+++ b/crabfit-frontend/src/components/Footer/footerStyle.ts
@@ -19,20 +19,4 @@ export const Wrapper = styled.footer`
       margin-bottom: 20px;
     }
   `}
-
-  ${props => props.donateMode && `
-    display: flex;
-  	align-items: center;
-  	justify-content: space-between;
-    flex-wrap: wrap;
-  `}
-`;
-
-export const Link = styled.a`
-	padding: 11px 10px;
-  white-space: nowrap;
-
-  & strong {
-    font-weight: 800;
-  }
 `;
diff --git a/crabfit-frontend/src/components/Settings/Settings.tsx b/crabfit-frontend/src/components/Settings/Settings.tsx
index c8c7308..301d8f2 100644
--- a/crabfit-frontend/src/components/Settings/Settings.tsx
+++ b/crabfit-frontend/src/components/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
@@ -27,9 +27,18 @@ const setDefaults = (lang, store) => {
 const Settings = () => {
   const theme = useTheme();
   const store = useSettingsStore();
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, _setIsOpen] = useState(false);
   const { t, i18n } = useTranslation('common');
   const setLocale = useLocaleUpdateStore(state => state.setLocale);
+  const firstControlRef = useRef();
+
+  const setIsOpen = open => {
+    _setIsOpen(open);
+
+    if (open) {
+      window.setTimeout(() => firstControlRef.current.focus(), 150);
+    }
+  };
 
   useEffect(() => {
     if (Object.keys(locales).includes(i18n.language)) {
@@ -57,7 +66,6 @@ const Settings = () => {
     <>
       <OpenButton
         isOpen={isOpen}
-        tabIndex="1"
         type="button"
         onClick={() => setIsOpen(!isOpen)} title={t('options.name')}
       >
@@ -78,6 +86,7 @@ const Settings = () => {
           }}
           value={store.weekStart === 0 ? 'Sunday' : 'Monday'}
           onChange={value => store.setWeekStart(value === 'Sunday' ? 0 : 1)}
+          inputRef={firstControlRef}
         />
 
         <ToggleField
diff --git a/crabfit-frontend/src/components/Settings/settingsStyle.ts b/crabfit-frontend/src/components/Settings/settingsStyle.ts
index 9ded568..6a28798 100644
--- a/crabfit-frontend/src/components/Settings/settingsStyle.ts
+++ b/crabfit-frontend/src/components/Settings/settingsStyle.ts
@@ -64,12 +64,14 @@ export const Modal = styled.div`
   pointer-events: none;
   opacity: 0;
   transform: translateY(-10px);
-  transition: opacity .15s, transform .15s;
+  visibility: hidden;
+  transition: opacity .15s, transform .15s, visibility .15s;
 
   ${props => props.isOpen && `
     pointer-events: all;
     opacity: 1;
     transform: translateY(0);
+    visibility: visible;
   `}
 `;
 
diff --git a/crabfit-frontend/src/components/ToggleField/ToggleField.tsx b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx
index d1a73f8..2387faf 100644
--- a/crabfit-frontend/src/components/ToggleField/ToggleField.tsx
+++ b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx
@@ -15,6 +15,7 @@ const ToggleField = ({
 	options = [],
   value,
   onChange,
+  inputRef,
 	...props
 }) => (
 	<Wrapper>
@@ -30,6 +31,7 @@ const ToggleField = ({
             id={`${name}-${label}`}
             checked={value === key}
             onChange={() => onChange(key)}
+            ref={inputRef}
           />
           <LabelButton htmlFor={`${name}-${label}`}>{label}</LabelButton>
         </Option>
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
index 461676d..e5301f0 100644
--- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -9,6 +9,7 @@ export const ToggleContainer = styled.div`
   border: 1px solid ${props => props.theme.primary};
   border-radius: 3px;
   overflow: hidden;
+  
   &:focus-within {
     outline: Highlight auto 1px;
     outline: -webkit-focus-ring-color auto 1px;

From 70085defcf5add2f9fd3d60472881d86fdeb791c Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 02:55:24 +1000
Subject: [PATCH 3/7] Esc to close options menu

---
 crabfit-frontend/src/components/Settings/Settings.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/crabfit-frontend/src/components/Settings/Settings.tsx b/crabfit-frontend/src/components/Settings/Settings.tsx
index 301d8f2..9559211 100644
--- a/crabfit-frontend/src/components/Settings/Settings.tsx
+++ b/crabfit-frontend/src/components/Settings/Settings.tsx
@@ -32,11 +32,20 @@ const Settings = () => {
   const setLocale = useLocaleUpdateStore(state => state.setLocale);
   const firstControlRef = useRef();
 
+  const onEsc = e => {
+    if (e.key === 'Escape') {
+      setIsOpen(false);
+    }
+  };
+
   const setIsOpen = open => {
     _setIsOpen(open);
 
     if (open) {
       window.setTimeout(() => firstControlRef.current.focus(), 150);
+      document.addEventListener('keyup', onEsc, true);
+    } else {
+      document.removeEventListener('keyup', onEsc);
     }
   };
 

From f502ea79ed263a88775f6be620e629d6801cfea9 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 03:39:59 +1000
Subject: [PATCH 4/7] Calendar field a11y

---
 .../components/CalendarField/CalendarField.tsx  | 12 +++++++++++-
 .../CalendarField/calendarFieldStyle.ts         | 16 +++++++++++-----
 .../components/ToggleField/toggleFieldStyle.ts  | 17 +++++++++++++----
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 96c7eb4..2ce8897 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -168,7 +168,17 @@ const CalendarField = ({
     							selected={selectedDates.includes(date.format('DDMMYYYY'))}
     							selecting={selectingDates.includes(date)}
     							mode={mode}
-    							onPointerDown={(e) => {
+                  type="button"
+                  onKeyPress={e => {
+                    if (e.key === ' ' || e.key === 'Enter') {
+                      if (selectedDates.includes(date.format('DDMMYYYY'))) {
+                        setSelectedDates(selectedDates.filter(d => d !== date.format('DDMMYYYY')));
+                      } else {
+                        setSelectedDates([...selectedDates, date.format('DDMMYYYY')]);
+                      }
+                    }
+                  }}
+    							onPointerDown={e => {
     								startPos.current = {x, y};
     								setMode(selectedDates.includes(date.format('DDMMYYYY')) ? 'remove' : 'add');
     								setSelectingDates([date]);
diff --git a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
index b664e32..e351b19 100644
--- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
+++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
@@ -51,21 +51,27 @@ export const CalendarBody = styled.div`
 	grid-template-columns: repeat(7, 1fr);
 	grid-gap: 2px;
 
-	& div:first-of-type {
+	& button:first-of-type {
 		border-top-left-radius: 3px;
 	}
-	& div:nth-of-type(7) {
+	& button:nth-of-type(7) {
 		border-top-right-radius: 3px;
 	}
-	& div:nth-last-of-type(7) {
+	& button:nth-last-of-type(7) {
 		border-bottom-left-radius: 3px;
 	}
-	& div:last-of-type {
+	& button:last-of-type {
 		border-bottom-right-radius: 3px;
 	}
 `;
 
-export const Date = styled.div`
+export const Date = styled.button`
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  appearance: none;
+
 	background-color: ${props => props.theme.primaryBackground};
 	border: 1px solid ${props => props.theme.primaryLight};
 	display: flex;
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
index e5301f0..2ef21c4 100644
--- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -9,10 +9,16 @@ export const ToggleContainer = styled.div`
   border: 1px solid ${props => props.theme.primary};
   border-radius: 3px;
   overflow: hidden;
-  
-  &:focus-within {
-    outline: Highlight auto 1px;
-    outline: -webkit-focus-ring-color auto 1px;
+
+  &:focus-within label {
+    box-shadow: inset 0 -3px 0 0 var(--focus-color);
+  }
+
+  & > div:first-child label {
+    border-end-start-radius: 2px;
+  }
+  & > div:last-child label {
+    border-end-end-radius: 2px;
   }
 `;
 
@@ -36,6 +42,7 @@ export const HiddenInput = styled.input`
   &:checked + label {
     color: ${props => props.theme.background};
     background-color: ${props => props.theme.primary};
+    --focus-color: ${props => props.theme.primaryDark};
   }
 `;
 
@@ -49,4 +56,6 @@ export const LabelButton = styled.label`
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
+  transition: box-shadow .15s;
+  --focus-color: ${props => props.theme.primary};
 `;

From 67247dc032600af4149dda68cd4dae9cfb885a8a Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 03:50:01 +1000
Subject: [PATCH 5/7] Time range a11y

---
 .../TimeRangeField/TimeRangeField.tsx         | 22 +++++++++++++++++++
 .../ToggleField/toggleFieldStyle.ts           |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
index 7a6544f..8493e73 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -90,6 +90,17 @@ const TimeRangeField = ({
 						step = Math.abs(step);
 						setStart(step);
 					}}
+          tabIndex="0"
+          onKeyDown={e => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+              e.preventDefault();
+              setStart(Math.max(start-1, 0));
+            }
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+              e.preventDefault();
+              setStart(Math.min(start+1, 24));
+            }
+          }}
 				/>
 				<Handle
 					value={end}
@@ -113,6 +124,17 @@ const TimeRangeField = ({
 						step = Math.abs(step);
 						setEnd(step);
 					}}
+          tabIndex="0"
+          onKeyDown={e => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+              e.preventDefault();
+              setEnd(Math.max(end-1, 0));
+            }
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+              e.preventDefault();
+              setEnd(Math.min(end+1, 24));
+            }
+          }}
 				/>
 			</Range>
 		</Wrapper>
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
index 2ef21c4..7b2e9d8 100644
--- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -14,10 +14,10 @@ export const ToggleContainer = styled.div`
     box-shadow: inset 0 -3px 0 0 var(--focus-color);
   }
 
-  & > div:first-child label {
+  & > div:first-of-type label {
     border-end-start-radius: 2px;
   }
-  & > div:last-child label {
+  & > div:last-of-type label {
     border-end-end-radius: 2px;
   }
 `;

From bfa9127da8a30b51041b76c2fea009e09d92b44d Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 04:45:07 +1000
Subject: [PATCH 6/7] Webpack file name override

---
 crabfit-frontend/config-overrides.js | 7 +++++++
 crabfit-frontend/package.json        | 9 ++++++---
 crabfit-frontend/public/index.html   | 2 +-
 crabfit-frontend/yarn.lock           | 7 +++++++
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 crabfit-frontend/config-overrides.js

diff --git a/crabfit-frontend/config-overrides.js b/crabfit-frontend/config-overrides.js
new file mode 100644
index 0000000..5be481b
--- /dev/null
+++ b/crabfit-frontend/config-overrides.js
@@ -0,0 +1,7 @@
+module.exports = function override(config, env) {
+  config.output.filename = env === 'production'
+    ? 'static/js/[name].[contenthash].js'
+    : env === 'development' && 'static/js/bundle.js';
+
+  return config;
+}
diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json
index aeefe16..32303b8 100644
--- a/crabfit-frontend/package.json
+++ b/crabfit-frontend/package.json
@@ -41,9 +41,9 @@
     "zustand": "^3.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -63,5 +63,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-app-rewired": "^2.1.8"
   }
 }
diff --git a/crabfit-frontend/public/index.html b/crabfit-frontend/public/index.html
index 0ff263d..49cc9b7 100644
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@@ -36,7 +36,7 @@
     </script>
   </head>
   <body>
-    <noscript style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.<p></noscript>
+    <noscript style="font-family: Karla, sans-serif; text-align: center; margin: 20vh 0; display: block;"><h1>🦀 Crab Fit doesn't work without Javascript 🏋️</h1><p>Enable Javascript or try a different browser.</p></noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/crabfit-frontend/yarn.lock b/crabfit-frontend/yarn.lock
index f799fc3..140d018 100644
--- a/crabfit-frontend/yarn.lock
+++ b/crabfit-frontend/yarn.lock
@@ -9151,6 +9151,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-app-rewired@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.8.tgz#e192f93b98daf96889418d33d3e86cf863812b56"
+  integrity sha512-wjXPdKPLscA7mn0I1de1NHrbfWdXz4S1ladaGgHVKdn1hTgKK5N6EdGIJM0KrS6bKnJBj7WuqJroDTsPKKr66Q==
+  dependencies:
+    semver "^5.6.0"
+
 react-dev-utils@^11.0.3:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.3.tgz#b61ed499c7d74f447d4faddcc547e5e671e97c08"

From 3d263580867d26c00d7794c94b96d1e98befee1c Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 04:52:01 +1000
Subject: [PATCH 7/7] Override chunk names

---
 crabfit-frontend/config-overrides.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/crabfit-frontend/config-overrides.js b/crabfit-frontend/config-overrides.js
index 5be481b..44e3ac7 100644
--- a/crabfit-frontend/config-overrides.js
+++ b/crabfit-frontend/config-overrides.js
@@ -3,5 +3,9 @@ module.exports = function override(config, env) {
     ? 'static/js/[name].[contenthash].js'
     : env === 'development' && 'static/js/bundle.js';
 
+  config.output.chunkFilename = env === 'production'
+    ? 'static/js/[name].[contenthash].chunk.js'
+    : env === 'development' && 'static/js/[name].chunk.js';
+
   return config;
 }