From 26c4b6629db76bb52371394f036b9bc7d6decd77 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 11 Mar 2021 01:27:01 +1100
Subject: [PATCH] Font optimise and settings on home page

---
 crabfit-frontend/public/fonts/molot.otf       | Bin 11900 -> 0 bytes
 crabfit-frontend/public/fonts/molot.woff      | Bin 0 -> 2864 bytes
 crabfit-frontend/public/fonts/molot.woff2     | Bin 0 -> 2052 bytes
 crabfit-frontend/public/fonts/samuraibob.ttf  | Bin 7932 -> 0 bytes
 crabfit-frontend/public/fonts/samuraibob.woff | Bin 0 -> 2808 bytes
 .../public/fonts/samuraibob.woff2             | Bin 0 -> 2100 bytes
 crabfit-frontend/public/index.css             |  16 +--
 crabfit-frontend/src/App.tsx                  |   5 +-
 .../CalendarField/CalendarField.tsx           |  24 +++--
 .../src/components/Settings/Settings.tsx      |  57 +++++++++++
 .../src/components/Settings/settingsStyle.ts  |  79 +++++++++++++++
 .../TimeRangeField/TimeRangeField.tsx         |  91 ++++++++++++------
 .../components/ToggleField/ToggleField.tsx    |  40 ++++++++
 .../ToggleField/toggleFieldStyle.ts           |  43 +++++++++
 crabfit-frontend/src/components/index.ts      |   2 +
 crabfit-frontend/src/pages/Home/Home.tsx      |   2 +-
 crabfit-frontend/src/stores/index.ts          |  13 +++
 17 files changed, 329 insertions(+), 43 deletions(-)
 delete mode 100644 crabfit-frontend/public/fonts/molot.otf
 create mode 100644 crabfit-frontend/public/fonts/molot.woff
 create mode 100644 crabfit-frontend/public/fonts/molot.woff2
 delete mode 100644 crabfit-frontend/public/fonts/samuraibob.ttf
 create mode 100644 crabfit-frontend/public/fonts/samuraibob.woff
 create mode 100644 crabfit-frontend/public/fonts/samuraibob.woff2
 create mode 100644 crabfit-frontend/src/components/Settings/Settings.tsx
 create mode 100644 crabfit-frontend/src/components/Settings/settingsStyle.ts
 create mode 100644 crabfit-frontend/src/components/ToggleField/ToggleField.tsx
 create mode 100644 crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
 create mode 100644 crabfit-frontend/src/stores/index.ts

diff --git a/crabfit-frontend/public/fonts/molot.otf b/crabfit-frontend/public/fonts/molot.otf
deleted file mode 100644
index 28c304933ce5498a93839614ffe46629b723e0c4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11900
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
On&EsbK^>c6lK%q%(K+}4

diff --git a/crabfit-frontend/public/fonts/molot.woff b/crabfit-frontend/public/fonts/molot.woff
new file mode 100644
index 0000000000000000000000000000000000000000..831ef3fb25d81d2547b674b3c3ef9e771fd5ad84
GIT binary patch
literal 2864
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
O8CqiuP_8rH1^f$^LaUSj

literal 0
HcmV?d00001

diff --git a/crabfit-frontend/public/fonts/molot.woff2 b/crabfit-frontend/public/fonts/molot.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..a5299b3dbec94d95de54100a3ac924fe46a43b7a
GIT binary patch
literal 2052
zcmV+f2>bVUPew8T0RR9100;yC5&!@I01<2e00*J~0RR9100000000000000000000
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

literal 0
HcmV?d00001

diff --git a/crabfit-frontend/public/fonts/samuraibob.ttf b/crabfit-frontend/public/fonts/samuraibob.ttf
deleted file mode 100644
index 8ab735c3493513c60aeee1df8a979e49ee6a8d91..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7932
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
R=~8}8DnY4f*jT>V{u@l5v*G{%

diff --git a/crabfit-frontend/public/fonts/samuraibob.woff b/crabfit-frontend/public/fonts/samuraibob.woff
new file mode 100644
index 0000000000000000000000000000000000000000..a0ac9b4fcf69d7a8094133009e3c38b805a0daf1
GIT binary patch
literal 2808
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

literal 0
HcmV?d00001

diff --git a/crabfit-frontend/public/fonts/samuraibob.woff2 b/crabfit-frontend/public/fonts/samuraibob.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..69f0a9336d70365a6a11b6715643711d8f29db98
GIT binary patch
literal 2100
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

literal 0
HcmV?d00001

diff --git a/crabfit-frontend/public/index.css b/crabfit-frontend/public/index.css
index 1101eb6..952af59 100644
--- a/crabfit-frontend/public/index.css
+++ b/crabfit-frontend/public/index.css
@@ -5,13 +5,17 @@
 }
 
 @font-face {
-	font-family: 'Samurai Bob';
-	src: url('fonts/samuraibob.ttf') format('truetype');
-	font-weight: 400;
+  font-family: 'Samurai Bob';
+  src: url('fonts/samuraibob.woff2') format('woff2'),
+    url('fonts/samuraibob.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
-	font-family: 'Molot';
-	src: url('fonts/molot.otf') format('opentype');
-	font-weight: 400;
+  font-family: 'Molot';
+  src: url('fonts/molot.woff2') format('woff2'),
+    url('fonts/molot.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
 }
diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx
index 28cb828..74cdd38 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 import { ThemeProvider, Global } from '@emotion/react';
 
+import { Settings } from 'components';
 import {
 	Home,
 	Event,
@@ -22,7 +23,7 @@ const App = () => {
   return (
 		<BrowserRouter>
 			<ThemeProvider theme={theme[isDark ? 'dark' : 'light']}>
-				{process.env.NODE_ENV !== 'production' && <button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0 }}>{isDark ? 'dark' : 'light'}</button>}
+				{process.env.NODE_ENV !== 'production' && <button onClick={() => setIsDark(!isDark)} style={{ position: 'absolute', top: 0, left: 0, zIndex: 1000 }}>{isDark ? 'dark' : 'light'}</button>}
 				<Global
 					styles={theme => ({
 						html: {
@@ -63,6 +64,8 @@ const App = () => {
 					<Route path="/" component={Home} exact />
 					<Route path="/:id" component={Event} exact />
 				</Switch>
+
+        <Settings />
 			</ThemeProvider>
 		</BrowserRouter>
   );
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 3f79424..dea287e 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -2,8 +2,11 @@ import { useState, useEffect, useRef } from 'react';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
 import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
 
 import { Button } from 'components';
+import { useSettingsStore } from 'stores';
+
 import {
 	Wrapper,
 	StyledLabel,
@@ -17,12 +20,13 @@ import {
 
 dayjs.extend(isToday);
 dayjs.extend(localeData);
+dayjs.extend(updateLocale);
 
-const calculateMonth = (month, year) => {
+const calculateMonth = (month, year, weekStart) => {
 	const date = dayjs().month(month).year(year);
 	const daysInMonth = date.daysInMonth();
-	const daysBefore = date.date(1).day();
-	const daysAfter = 6 - date.date(daysInMonth).day();
+	const daysBefore = date.date(1).day() - weekStart;
+	const daysAfter = 6 - date.date(daysInMonth).day() + weekStart;
 
 	let dates = [];
 	let curDate = date.date(1).subtract(daysBefore, 'day');
@@ -49,7 +53,9 @@ const CalendarField = ({
 	register,
 	...props
 }) => {
-	const [dates, setDates] = useState(calculateMonth(dayjs().month(), dayjs().year()));
+  const weekStart = useSettingsStore(state => state.weekStart);
+
+	const [dates, setDates] = useState(calculateMonth(dayjs().month(), dayjs().year(), weekStart));
 	const [month, setMonth] = useState(dayjs().month());
 	const [year, setYear] = useState(dayjs().year());
 
@@ -70,8 +76,14 @@ const CalendarField = ({
 	};
 
 	useEffect(() => {
-		setDates(calculateMonth(month, year));
-	}, [month, year]);
+    if (weekStart !== dayjs.Ls.en.weekStart) {
+      dayjs.updateLocale('en', {
+        weekStart: weekStart,
+        weekdaysShort: weekStart ? 'Mon_Tue_Wed_Thu_Fri_Sat_Sun'.split('_') : 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
+      });
+    }
+		setDates(calculateMonth(month, year, weekStart));
+	}, [weekStart, month, year]);
 
 	return (
 		<Wrapper>
diff --git a/crabfit-frontend/src/components/Settings/Settings.tsx b/crabfit-frontend/src/components/Settings/Settings.tsx
new file mode 100644
index 0000000..a2ac8d2
--- /dev/null
+++ b/crabfit-frontend/src/components/Settings/Settings.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+
+import { ToggleField } from 'components';
+
+import { useSettingsStore } from 'stores';
+
+import {
+  OpenButton,
+  Modal,
+  Heading,
+  Cover,
+} from './settingsStyle';
+
+const Settings = () => {
+  const theme = useTheme();
+  const store = useSettingsStore();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <OpenButton
+        isOpen={isOpen}
+        tabIndex="1"
+        type="button"
+        onClick={() => setIsOpen(!isOpen)} title="Options"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={theme.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+      </OpenButton>
+
+      <Cover isOpen={isOpen} onClick={() => setIsOpen(false)} />
+      <Modal isOpen={isOpen}>
+        <Heading>Options</Heading>
+
+        <ToggleField
+          label="Week starts on"
+          name="weekStart"
+          id="weekStart"
+          options={['Sunday', 'Monday']}
+          value={store.weekStart === 1 ? 'Monday' : 'Sunday'}
+          onChange={value => store.setWeekStart(value === 'Monday' ? 1 : 0)}
+        />
+
+        <ToggleField
+          label="Time format"
+          name="timeFormat"
+          id="timeFormat"
+          options={['12h', '24h']}
+          value={store.timeFormat}
+          onChange={value => store.setTimeFormat(value)}
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default Settings;
diff --git a/crabfit-frontend/src/components/Settings/settingsStyle.ts b/crabfit-frontend/src/components/Settings/settingsStyle.ts
new file mode 100644
index 0000000..2c4fe75
--- /dev/null
+++ b/crabfit-frontend/src/components/Settings/settingsStyle.ts
@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+
+export const OpenButton = styled.button`
+	border: 0;
+	background: none;
+	height: 50px;
+	width: 50px;
+	cursor: pointer;
+	color: inherit;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 200;
+  border-radius: 100%;
+  transition: background-color .15s;
+  transition: transform .15s;
+  padding: 0;
+
+  &:focus {
+    outline: 0;
+  }
+  &:focus-visible {
+    background-color: ${props => props.theme.text}22;
+  }
+
+  ${props => props.isOpen && `
+    transform: rotate(-45deg);
+  `}
+`;
+
+export const Cover = styled.div`
+	position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: none;
+
+  ${props => props.isOpen && `
+    display: block;
+  `}
+`;
+
+export const Modal = styled.div`
+	position: absolute;
+  top: 70px;
+  right: 12px;
+  background-color: ${props => props.theme.background};
+  border: 1px solid ${props => props.theme.primaryBackground};
+  z-index: 150;
+  padding: 10px 18px;
+  border-radius: 3px;
+  width: 250px;
+  box-sizing: border-box;
+  max-width: calc(100% - 20px);
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);
+
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity .15s, transform .15s;
+
+  ${props => props.isOpen && `
+    pointer-events: all;
+    opacity: 1;
+    transform: translateY(0);
+  `}
+`;
+
+export const Heading = styled.span`
+	font-size: 1.5rem;
+  display: block;
+  margin: 6px 0;
+  line-height: 1em;
+`;
diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
index d044b4d..dfb0695 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 
+import { useSettingsStore } from 'stores';
+
 import {
 	Wrapper,
 	StyledLabel,
@@ -9,33 +11,62 @@ import {
 	Selected,
 } from './timeRangeFieldStyle';
 
-const times = [
-	'12am',
-	'1am',
-	'2am',
-	'3am',
-	'4am',
-	'5am',
-	'6am',
-	'7am',
-	'8am',
-	'9am',
-	'10am',
-	'11am',
-	'12pm',
-	'1pm',
-	'2pm',
-	'3pm',
-	'4pm',
-	'5pm',
-	'6pm',
-	'7pm',
-	'8pm',
-	'9pm',
-	'10pm',
-	'11pm',
-	'12am',
-];
+const times = {
+  '12h': [
+  	'12am',
+  	'1am',
+  	'2am',
+  	'3am',
+  	'4am',
+  	'5am',
+  	'6am',
+  	'7am',
+  	'8am',
+  	'9am',
+  	'10am',
+  	'11am',
+  	'12pm',
+  	'1pm',
+  	'2pm',
+  	'3pm',
+  	'4pm',
+  	'5pm',
+  	'6pm',
+  	'7pm',
+  	'8pm',
+  	'9pm',
+  	'10pm',
+  	'11pm',
+  	'12am',
+  ],
+  '24h': [
+    '00',
+  	'01',
+  	'02',
+  	'03',
+  	'04',
+  	'05',
+  	'06',
+  	'07',
+  	'08',
+  	'09',
+  	'10',
+  	'11',
+  	'12',
+  	'13',
+  	'14',
+  	'15',
+  	'16',
+  	'17',
+  	'18',
+  	'19',
+  	'20',
+  	'21',
+  	'22',
+  	'23',
+  	'0',
+  ],
+};
 
 const TimeRangeField = ({
 	label,
@@ -44,6 +75,8 @@ const TimeRangeField = ({
 	register,
 	...props
 }) => {
+  const timeFormat = useSettingsStore(state => state.timeFormat);
+
 	const [start, setStart] = useState(9);
 	const [end, setEnd] = useState(17);
 
@@ -90,7 +123,7 @@ const TimeRangeField = ({
 				{start > end && <Selected start={start > end ? 0 : start} end={end} />}
 				<Handle
 					value={start}
-					label={times[start]}
+					label={times[timeFormat][start]}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isStartMoving.current = true;
@@ -112,7 +145,7 @@ const TimeRangeField = ({
 				/>
 				<Handle
 					value={end}
-					label={times[end]}
+					label={times[timeFormat][end]}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isEndMoving.current = true;
diff --git a/crabfit-frontend/src/components/ToggleField/ToggleField.tsx b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx
new file mode 100644
index 0000000..83aa3b7
--- /dev/null
+++ b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx
@@ -0,0 +1,40 @@
+import {
+	Wrapper,
+  ToggleContainer,
+	StyledLabel,
+	Option,
+	HiddenInput,
+  LabelButton,
+} from './toggleFieldStyle';
+
+const ToggleField = ({
+	label,
+	id,
+  name,
+	options = [],
+  value,
+  onChange,
+	...props
+}) => (
+	<Wrapper>
+		{label && <StyledLabel>{label}</StyledLabel>}
+
+    <ToggleContainer>
+      {options.map(option =>
+        <Option key={option}>
+          <HiddenInput
+            type="radio"
+            name={name}
+            value={option}
+            id={`${name}-${option}`}
+            checked={value === option}
+            onChange={() => onChange(option)}
+          />
+          <LabelButton htmlFor={`${name}-${option}`}>{option}</LabelButton>
+        </Option>
+      )}
+    </ToggleContainer>
+	</Wrapper>
+);
+
+export default ToggleField;
diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
new file mode 100644
index 0000000..a1e91aa
--- /dev/null
+++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+	margin: 10px 0;
+`;
+
+export const ToggleContainer = styled.div`
+	display: flex;
+  border: 1px solid ${props => props.theme.primary};
+  border-radius: 3px;
+  overflow: hidden;
+`;
+
+export const StyledLabel = styled.label`
+	display: block;
+	padding-bottom: 4px;
+	font-size: .9rem;
+`;
+
+export const Option = styled.div`
+	flex: 1;
+`;
+
+export const HiddenInput = styled.input`
+  height: 0;
+  width: 0;
+  position: absolute;
+  right: -1000px;
+  top: 0;
+
+  &:checked + label {
+    color: ${props => props.theme.background};
+    background-color: ${props => props.theme.primary};
+  }
+`;
+
+export const LabelButton = styled.label`
+  padding: 6px;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+`;
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index 3ce1ec4..2cff948 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -2,6 +2,7 @@ export { default as TextField } from './TextField/TextField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as CalendarField } from './CalendarField/CalendarField';
 export { default as TimeRangeField } from './TimeRangeField/TimeRangeField';
+export { default as ToggleField } from './ToggleField/ToggleField';
 
 export { default as Button } from './Button/Button';
 export { default as Legend } from './Legend/Legend';
@@ -11,3 +12,4 @@ export { default as Error } from './Error/Error';
 
 export { default as Center } from './Center/Center';
 export { default as Donate } from './Donate/Donate';
+export { default as Settings } from './Settings/Settings';
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx
index 97aea75..4e718a3 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@@ -136,7 +136,7 @@ const Home = () => {
 				<Center>
 					<Logo src={logo} alt="" />
 				</Center>
-				<TitleSmall>Create a</TitleSmall>
+				<TitleSmall>CREATE A</TitleSmall>
 				<TitleLarge>CRAB FIT</TitleLarge>
 				<Links>
 					<a href="#about">About</a> / <a href="#donate">Donate</a>
diff --git a/crabfit-frontend/src/stores/index.ts b/crabfit-frontend/src/stores/index.ts
new file mode 100644
index 0000000..7eea586
--- /dev/null
+++ b/crabfit-frontend/src/stores/index.ts
@@ -0,0 +1,13 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const useSettingsStore = create(persist(
+  set => ({
+    weekStart: 0,
+    timeFormat: '12h',
+
+    setWeekStart: weekStart => set({ weekStart }),
+    setTimeFormat: timeFormat => set({ timeFormat }),
+  }),
+  { name: 'crabfit-settings' },
+));