From 2d32a1b036daf5686325a26c2c8dfc8992d30a72 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 16 Aug 2022 15:07:13 +1000
Subject: [PATCH] Update home page

---
 crabfit-frontend/src/App.jsx                  |   6 +-
 .../AvailabilityViewer/AvailabilityViewer.jsx |  20 +--
 .../AvailabilityViewer.styles.js              |  23 +--
 .../src/components/Button/Button.jsx          |   2 +
 .../CalendarField/CalendarField.jsx           |  18 +--
 .../CalendarField/CalendarField.styles.js     |  12 +-
 .../src/components/Legend/Legend.jsx          |   4 +-
 .../src/components/Legend/Legend.styles.js    |   4 +-
 .../src/components/TextField/TextField.jsx    |   4 +-
 .../components/TextField/TextField.styles.js  |   4 +-
 .../TimeRangeField/TimeRangeField.jsx         |  12 +-
 .../TimeRangeField/TimeRangeField.styles.js   |  11 +-
 .../src/pages/Help/Help.styles.js             |   4 +-
 .../src/pages/Home/{Home.tsx => Home.jsx}     | 152 +++++++++---------
 .../src/pages/Home/Home.styles.js             |  10 +-
 crabfit-frontend/src/pages/index.js           |   4 +-
 crabfit-frontend/src/services/index.js        |  21 +--
 crabfit-frontend/src/theme/index.ts           |  26 ---
 18 files changed, 158 insertions(+), 179 deletions(-)
 rename crabfit-frontend/src/pages/Home/{Home.tsx => Home.jsx} (78%)
 delete mode 100644 crabfit-frontend/src/theme/index.ts

diff --git a/crabfit-frontend/src/App.jsx b/crabfit-frontend/src/App.jsx
index d11a67a..7f0c73a 100644
--- a/crabfit-frontend/src/App.jsx
+++ b/crabfit-frontend/src/App.jsx
@@ -63,9 +63,9 @@ const App = () => {
         <Settings />
 
         <Routes>
-          {/* <Route path="/" element={<Pages.Home />} /> */}
-          {/* <Route path="/" element={<Pages.Help />} /> */}
-          <Route path="/" element={<Pages.Privacy />} />
+          <Route path="/" element={<Pages.Home />} />
+          <Route path="/how-to" element={<Pages.Help />} />
+          <Route path="/privacy" element={<Pages.Privacy />} />
           {/* <Route path="/create" element={<Pages.Create />} />
           <Route path="/:id" element={<Pages.Event />} /> */}
         </Routes>
diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx
index bed8848..7b5c74f 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx
@@ -84,8 +84,8 @@ const AvailabilityViewer = ({
               <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}
+                $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
@@ -102,13 +102,13 @@ const AvailabilityViewer = ({
                   return (
                     <Time
                       key={i}
-                      time={time}
+                      $time={time}
                       className="time"
-                      peopleCount={focusCount !== null && focusCount !== peopleHere.length ? 0 : peopleHere.length}
+                      $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}
+                      $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 }
@@ -170,7 +170,7 @@ const AvailabilityViewer = ({
               {people.map((person, i) =>
                 <Person
                   key={i}
-                  filtered={filteredPeople.includes(person.name)}
+                  $filtered={filteredPeople.includes(person.name)}
                   onClick={() => {
                     setTempFocus(null)
                     if (filteredPeople.includes(person.name)) {
@@ -200,8 +200,8 @@ const AvailabilityViewer = ({
 
           {tooltip && (
             <Tooltip
-              x={tooltip.x}
-              y={tooltip.y}
+              $x={tooltip.x}
+              $y={tooltip.y}
             >
               <TooltipTitle>{tooltip.available}</TooltipTitle>
               <TooltipDate>{tooltip.date}</TooltipDate>
diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
index a9b5627..4f8e6bd 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.styles.js
@@ -1,6 +1,7 @@
 import { styled } from 'goober'
+import { forwardRef } from 'react'
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled('div', forwardRef)`
   overflow-y: visible;
   margin: 20px 0;
   position: relative;
@@ -40,12 +41,12 @@ export const Times = styled('div')`
   border-left: 1px solid var(--text);
   border-right: 1px solid var(--text);
 
-  ${props => props.borderLeft && `
+  ${props => props.$borderLeft && `
     border-left: 2px solid var(--text);
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   `}
-  ${props => props.borderRight && `
+  ${props => props.$borderRight && `
     border-right: 2px solid var(--text);
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
@@ -75,19 +76,19 @@ export const Time = styled('div')`
   background-origin: border-box;
   transition: background-color .1s;
 
-  ${props => props.time.slice(2, 4) === '00' && `
+  ${props => props.$time.slice(2, 4) === '00' && `
     border-top: 2px solid var(--text);
   `}
-  ${props => props.time.slice(2, 4) !== '00' && `
+  ${props => props.$time.slice(2, 4) !== '00' && `
     border-top: 2px solid transparent;
   `}
-  ${props => props.time.slice(2, 4) === '30' && `
+  ${props => props.$time.slice(2, 4) === '30' && `
     border-top: 2px dotted var(--text);
   `}
 
-  background-color: ${props => `#FF0000${Math.round((props.peopleCount/props.maxPeople)*255).toString(16)}`};
+  background-color: ${props => `#FF0000${Math.round((props.$peopleCount/props.$maxPeople)*255).toString(16)}`};
 
-  ${props => props.highlight && props.peopleCount === props.maxPeople && props.peopleCount > 0 && `
+  ${props => props.$highlight && props.$peopleCount === props.$maxPeople && props.$peopleCount > 0 && `
     background-image: repeating-linear-gradient(
       45deg,
       transparent,
@@ -109,8 +110,8 @@ export const Spacer = styled('div')`
 
 export const Tooltip = styled('div')`
   position: absolute;
-  top: ${props => props.y}px;
-  left: ${props => props.x}px;
+  top: ${props => props.$y}px;
+  left: ${props => props.$x}px;
   transform: translateX(-50%);
   border: 1px solid var(--text);
   border-radius: 3px;
@@ -214,7 +215,7 @@ export const Person = styled('button')`
   padding: 2px 8px;
   user-select: none;
 
-  ${props => props.filtered && `
+  ${props => props.$filtered && `
     background: var(--primary);
     color: #FFFFFF;
     border-color: var(--primary);
diff --git a/crabfit-frontend/src/components/Button/Button.jsx b/crabfit-frontend/src/components/Button/Button.jsx
index 3de45b9..c069309 100644
--- a/crabfit-frontend/src/components/Button/Button.jsx
+++ b/crabfit-frontend/src/components/Button/Button.jsx
@@ -10,6 +10,7 @@ const Button = ({
   secondaryColor,
   small,
   size,
+  isLoading,
   ...props
 }) => (
   <Pressable
@@ -21,6 +22,7 @@ const Button = ({
     $secondaryColor={secondaryColor}
     $small={small}
     $size={size}
+    $isLoading={isLoading}
     {...props}
   >
     {icon}
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.jsx b/crabfit-frontend/src/components/CalendarField/CalendarField.jsx
index 9eea45b..478994f 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.jsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.jsx
@@ -160,12 +160,12 @@ const CalendarField = forwardRef(({
               dateRow.map((date, x) =>
                 <Date
                   key={y+x}
-                  otherMonth={date.month() !== month}
-                  isToday={date.isToday()}
+                  $otherMonth={date.month() !== month}
+                  $isToday={date.isToday()}
                   title={`${date.date()} ${dayjs.months()[date.month()]}${date.isToday() ? ` (${t('form.dates.tooltips.today')})` : ''}`}
-                  selected={selectedDates.includes(date.format('DDMMYYYY'))}
-                  selecting={selectingDates.includes(date)}
-                  mode={mode}
+                  $selected={selectedDates.includes(date.format('DDMMYYYY'))}
+                  $selecting={selectingDates.includes(date)}
+                  $mode={mode}
                   type="button"
                   onKeyPress={e => {
                     if (e.key === ' ' || e.key === 'Enter') {
@@ -213,11 +213,11 @@ const CalendarField = forwardRef(({
           {(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort()).map((name, i) =>
             <Date
               key={name}
-              isToday={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart === -1 ? 6 : dayjs().day()-weekStart] === name}
+              $isToday={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart === -1 ? 6 : dayjs().day()-weekStart] === name}
               title={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart === -1 ? 6 : dayjs().day()-weekStart] === name ? t('form.dates.tooltips.today') : ''}
-              selected={selectedDays.includes(((i + weekStart) % 7 + 7) % 7)}
-              selecting={selectingDays.includes(((i + weekStart) % 7 + 7) % 7)}
-              mode={mode}
+              $selected={selectedDays.includes(((i + weekStart) % 7 + 7) % 7)}
+              $selecting={selectingDays.includes(((i + weekStart) % 7 + 7) % 7)}
+              $mode={mode}
               type="button"
               onKeyPress={e => {
                 if (e.key === ' ' || e.key === 'Enter') {
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.styles.js b/crabfit-frontend/src/components/CalendarField/CalendarField.styles.js
index 5f6ad5b..c85554f 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.styles.js
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.styles.js
@@ -86,19 +86,19 @@ export const Date = styled('button')`
   user-select: none;
   touch-action: none;
 
-  ${props => props.otherMonth && `
+  ${props => props.$otherMonth && `
     color: var(--tertiary);
   `}
-  ${props => props.isToday && `
+  ${props => props.$isToday && `
     font-weight: 900;
     color: var(--secondary);
   `}
-  ${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
-    color: ${props.otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'};
+  ${props => (props.$selected || (props.$mode === 'add' && props.$selecting)) && `
+    color: ${props.$otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'};
     background-color: var(--primary);
   `}
-  ${props => props.mode === 'remove' && props.selecting && `
+  ${props => props.$mode === 'remove' && props.$selecting && `
     background-color: var(--surface);
-    color: ${props.isToday ? 'var(--secondary)' : (props.otherMonth ? 'var(--tertiary)' : 'inherit')};
+    color: ${props.$isToday ? 'var(--secondary)' : (props.$otherMonth ? 'var(--tertiary)' : 'inherit')};
   `}
 `
diff --git a/crabfit-frontend/src/components/Legend/Legend.jsx b/crabfit-frontend/src/components/Legend/Legend.jsx
index 175ac1b..0c7cd15 100644
--- a/crabfit-frontend/src/components/Legend/Legend.jsx
+++ b/crabfit-frontend/src/components/Legend/Legend.jsx
@@ -31,8 +31,8 @@ const Legend = ({
         {[...Array(max+1-min).keys()].map(i => i+min).map(i =>
           <Grade
             key={i}
-            color={`#FF0000${Math.round((i/(max))*255).toString(16)}`}
-            highlight={highlight && i === max && max > 0}
+            $color={`#FF0000${Math.round((i/(max))*255).toString(16)}`}
+            $highlight={highlight && i === max && max > 0}
             onMouseOver={() => onSegmentFocus(i)}
           />
         )}
diff --git a/crabfit-frontend/src/components/Legend/Legend.styles.js b/crabfit-frontend/src/components/Legend/Legend.styles.js
index d8a37f0..c1423e1 100644
--- a/crabfit-frontend/src/components/Legend/Legend.styles.js
+++ b/crabfit-frontend/src/components/Legend/Legend.styles.js
@@ -38,9 +38,9 @@ export const Bar = styled('div')`
 
 export const Grade = styled('div')`
   flex: 1;
-  background-color: ${props => props.color};
+  background-color: ${props => props.$color};
 
-  ${props => props.highlight && `
+  ${props => props.$highlight && `
     background-image: repeating-linear-gradient(
       45deg,
       var(--primary),
diff --git a/crabfit-frontend/src/components/TextField/TextField.jsx b/crabfit-frontend/src/components/TextField/TextField.jsx
index 8abd3c2..a0d7a85 100644
--- a/crabfit-frontend/src/components/TextField/TextField.jsx
+++ b/crabfit-frontend/src/components/TextField/TextField.jsx
@@ -14,8 +14,8 @@ const TextField = forwardRef(({
   inline = false,
   ...props
 }, ref) => (
-  <Wrapper inline={inline}>
-    {label && <StyledLabel htmlFor={id} inline={inline}>{label}</StyledLabel>}
+  <Wrapper $inline={inline}>
+    {label && <StyledLabel htmlFor={id} $inline={inline}>{label}</StyledLabel>}
     {subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
     <StyledInput id={id} ref={ref} {...props} />
   </Wrapper>
diff --git a/crabfit-frontend/src/components/TextField/TextField.styles.js b/crabfit-frontend/src/components/TextField/TextField.styles.js
index f469330..8fb60f2 100644
--- a/crabfit-frontend/src/components/TextField/TextField.styles.js
+++ b/crabfit-frontend/src/components/TextField/TextField.styles.js
@@ -4,7 +4,7 @@ import { forwardRef } from 'react'
 export const Wrapper = styled('div')`
   margin: 30px 0;
 
-  ${props => props.inline && `
+  ${props => props.$inline && `
     margin: 0;
   `}
 `
@@ -14,7 +14,7 @@ export const StyledLabel = styled('label')`
   padding-bottom: 4px;
   font-size: 18px;
 
-  ${props => props.inline && `
+  ${props => props.$inline && `
     font-size: 16px;
   `}
 `
diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.jsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.jsx
index 34e2a3a..5179896 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.jsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.jsx
@@ -68,12 +68,12 @@ const TimeRangeField = forwardRef(({
       />
 
       <Range ref={rangeRef}>
-        <Selected start={start} end={start > end ? 24 : end} />
-        {start > end && <Selected start={start > end ? 0 : start} end={end} />}
+        <Selected $start={start} $end={start > end ? 24 : end} />
+        {start > end && <Selected $start={start > end ? 0 : start} $end={end} />}
         <Handle
-          value={start}
+          $value={start}
           label={timeFormat === '24h' ? times[start] : dayjs().hour(times[start]).format('ha')}
-          extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
+          $extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
           onMouseDown={() => {
             document.addEventListener('mousemove', handleMouseMove)
             isStartMoving.current = true
@@ -105,9 +105,9 @@ const TimeRangeField = forwardRef(({
           }}
         />
         <Handle
-          value={end}
+          $value={end}
           label={timeFormat === '24h' ? times[end] : dayjs().hour(times[end]).format('ha')}
-          extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
+          $extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
           onMouseDown={() => {
             document.addEventListener('mousemove', handleMouseMove)
             isEndMoving.current = true
diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js
index 09b479c..ed7baa5 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.styles.js
@@ -1,4 +1,5 @@
 import { styled } from 'goober'
+import { forwardRef } from 'react'
 
 export const Wrapper = styled('div')`
   margin: 30px 0;
@@ -17,7 +18,7 @@ export const StyledSubLabel = styled('label')`
   opacity: .6;
 `
 
-export const Range = styled('div')`
+export const Range = styled('div', forwardRef)`
   user-select: none;
   background-color: var(--surface);
   border: 1px solid var(--primary);
@@ -35,7 +36,7 @@ export const Handle = styled('div')`
   border-radius: 3px;
   position: absolute;
   top: -10px;
-  left: calc(${props => props.value * 4.166}% - 11px);
+  left: calc(${props => props.$value * 4.166}% - 11px);
   cursor: ew-resize;
   touch-action: none;
   transition: left .1s;
@@ -65,15 +66,15 @@ export const Handle = styled('div')`
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
-    ${props => props.extraPadding}
+    ${props => props.$extraPadding}
   }
 `
 
 export const Selected = styled('div')`
   position: absolute;
   height: 100%;
-  left: ${props => props.start * 4.166}%;
-  right: calc(100% - ${props => props.end * 4.166}%);
+  left: ${props => props.$start * 4.166}%;
+  right: calc(100% - ${props => props.$end * 4.166}%);
   top: 0;
   background-color: var(--primary);
   border-radius: 2px;
diff --git a/crabfit-frontend/src/pages/Help/Help.styles.js b/crabfit-frontend/src/pages/Help/Help.styles.js
index 7dad2e2..bb52dfc 100644
--- a/crabfit-frontend/src/pages/Help/Help.styles.js
+++ b/crabfit-frontend/src/pages/Help/Help.styles.js
@@ -63,7 +63,7 @@ export const FakeTimeRange = styled('div')`
     height: calc(100% + 20px);
     width: 20px;
     border: 1px solid var(--primary);
-    background-color: var(--secondary);
+    background-color: var(--tertiary);
     border-radius: 3px;
     position: absolute;
     top: -10px;
@@ -79,7 +79,7 @@ export const FakeTimeRange = styled('div')`
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--tertiary);
+      color: var(--secondary);
     }
 
     &:before {
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.jsx
similarity index 78%
rename from crabfit-frontend/src/pages/Home/Home.tsx
rename to crabfit-frontend/src/pages/Home/Home.jsx
index b37ac67..92cbf07 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.jsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useHistory, Link } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-import { useTranslation, Trans } from 'react-i18next';
+import { useEffect, useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useForm } from 'react-hook-form'
+import { useTranslation, Trans } from 'react-i18next'
 
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
 
 import {
   TextField,
@@ -18,7 +18,7 @@ import {
   Error,
   Footer,
   Recents,
-} from 'components';
+} from '/src/components'
 
 import {
   StyledMain,
@@ -37,82 +37,82 @@ import {
   ButtonArea,
   VideoWrapper,
   VideoLink,
-} from './homeStyle';
+} from './Home.styles'
 
-import api from 'services';
-import { detect_browser } from 'utils';
-import { useTWAStore } from 'stores';
+import api from '/src/services'
+import { detect_browser } from '/src/utils'
+import { useTWAStore } from '/src/stores'
 
-import logo from 'res/logo.svg';
-import video_thumb from 'res/video_thumb.jpg';
-import timezones from 'res/timezones.json';
+import logo from '/src/res/logo.svg'
+import video_thumb from '/src/res/video_thumb.jpg'
+import timezones from '/src/res/timezones.json'
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(customParseFormat);
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(customParseFormat)
 
 const Home = ({ offline }) => {
   const { register, handleSubmit, setValue } = useForm({
     defaultValues: {
       timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     },
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(null)
   const [stats, setStats] = useState({
     eventCount: null,
     personCount: null,
     version: 'loading...',
-  });
-  const [browser, setBrowser] = useState(undefined);
-  const [videoPlay, setVideoPlay] = useState(false);
-  const { push } = useHistory();
-  const { t } = useTranslation(['common', 'home']);
-  const isTWA = useTWAStore(state => state.TWA);
+  })
+  const [browser, setBrowser] = useState(undefined)
+  const [videoPlay, setVideoPlay] = useState(false)
+  const navigate = useNavigate()
+  const { t } = useTranslation(['common', 'home'])
+  const isTWA = useTWAStore(state => state.TWA)
 
   useEffect(() => {
     const fetch = async () => {
       try {
-        const response = await api.get('/stats');
-        setStats(response.data);
+        const response = await api.get('/stats')
+        setStats(response.data)
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
-    };
+    }
 
-    fetch();
-    document.title = 'Crab Fit';
-    setBrowser(detect_browser());
-  }, []);
+    fetch()
+    document.title = 'Crab Fit'
+    setBrowser(detect_browser())
+  }, [])
 
   const onSubmit = async data => {
-    setIsLoading(true);
-    setError(null);
+    setIsLoading(true)
+    setError(null)
     try {
-      const { start, end } = JSON.parse(data.times);
-      const dates = JSON.parse(data.dates);
+      const { start, end } = JSON.parse(data.times)
+      const dates = JSON.parse(data.dates)
 
       if (dates.length === 0) {
-        return setError(t('home:form.errors.no_dates'));
+        return setError(t('home:form.errors.no_dates'))
       }
-      const isSpecificDates = typeof dates[0] === 'string' && dates[0].length === 8;
+      const isSpecificDates = typeof dates[0] === 'string' && dates[0].length === 8
       if (start === end) {
-        return setError(t('home:form.errors.same_times'));
+        return setError(t('home:form.errors.same_times'))
       }
 
-      let times = dates.reduce((times, date) => {
-        let day = [];
+      const times = dates.reduce((times, date) => {
+        const day = []
         for (let i = start; i < (start > end ? 24 : end); i++) {
           if (isSpecificDates) {
             day.push(
               dayjs.tz(date, 'DDMMYYYY', data.timezone)
-              .hour(i).minute(0).utc().format('HHmm-DDMMYYYY')
-            );
+                .hour(i).minute(0).utc().format('HHmm-DDMMYYYY')
+            )
           } else {
             day.push(
               dayjs().tz(data.timezone)
-              .day(date).hour(i).minute(0).utc().format('HHmm-d')
-            );
+                .day(date).hour(i).minute(0).utc().format('HHmm-d')
+            )
           }
         }
         if (start > end) {
@@ -120,21 +120,21 @@ const Home = ({ offline }) => {
             if (isSpecificDates) {
               day.push(
                 dayjs.tz(date, 'DDMMYYYY', data.timezone)
-                .hour(i).minute(0).utc().format('HHmm-DDMMYYYY')
-              );
+                  .hour(i).minute(0).utc().format('HHmm-DDMMYYYY')
+              )
             } else {
               day.push(
                 dayjs().tz(data.timezone)
-                .day(date).hour(i).minute(0).utc().format('HHmm-d')
-              );
+                  .day(date).hour(i).minute(0).utc().format('HHmm-d')
+              )
             }
           }
         }
-        return [...times, ...day];
-      }, []);
+        return [...times, ...day]
+      }, [])
 
       if (times.length === 0) {
-        return setError(t('home:form.errors.no_time'));
+        return setError(t('home:form.errors.no_time'))
       }
 
       const response = await api.post('/event', {
@@ -143,18 +143,18 @@ const Home = ({ offline }) => {
           times: times,
           timezone: data.timezone,
         },
-      });
-      push(`/${response.data.id}`);
+      })
+      navigate(`/${response.data.id}`)
       gtag('event', 'create_event', {
         'event_category': 'home',
-      });
+      })
     } catch (e) {
-      setError(t('home:form.errors.unknown'));
-      console.error(e);
+      setError(t('home:form.errors.unknown'))
+      console.error(e)
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   return (
     <>
@@ -162,7 +162,7 @@ const Home = ({ offline }) => {
         <Center>
           <Logo src={logo} alt="" />
         </Center>
-        <TitleSmall altChars={/^[A-Za-z ]+$/.test(t('home:create'))}>{t('home:create')}</TitleSmall>
+        <TitleSmall $altChars={/^[A-Za-z ]+$/.test(t('home:create'))}>{t('home:create')}</TitleSmall>
         <TitleLarge>CRAB FIT</TitleLarge>
         <Links>
           <a href="#about">{t('home:nav.about')}</a> / <a href="#donate">{t('home:nav.donate')}</a>
@@ -228,11 +228,11 @@ const Home = ({ offline }) => {
           <h2>{t('home:about.name')}</h2>
           <Stats>
             <Stat>
-              <StatNumber>{stats.eventCount ?? '1100+'}</StatNumber>
+              <StatNumber>{new Intl.NumberFormat().format(stats.eventCount ?? 7000)}{!stats.eventCount && '+'}</StatNumber>
               <StatLabel>{t('home:about.events')}</StatLabel>
             </Stat>
             <Stat>
-              <StatNumber>{stats.personCount ?? '3700+'}</StatNumber>
+              <StatNumber>{new Intl.NumberFormat().format(stats.personCount ?? 25000)}{!stats.personCount && '+'}</StatNumber>
               <StatLabel>{t('home:about.availabilities')}</StatLabel>
             </Stat>
           </Stats>
@@ -240,14 +240,14 @@ const Home = ({ offline }) => {
 
           {videoPlay ? (
             <VideoWrapper>
-              <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+              <iframe width="560" height="315" src="https://www.youtube.com/embed/yXGd4VXZzcY?modestbranding=1&rel=0&autoplay=1" title={t('common:video.title')} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
             </VideoWrapper>
           ) : (
             <VideoLink
               href="https://www.youtube.com/watch?v=yXGd4VXZzcY"
               onClick={e => {
-                e.preventDefault();
-                setVideoPlay(true);
+                e.preventDefault()
+                setVideoPlay(true)
               }}
             >
               <img src={video_thumb} alt={t('common:video.button')} />
@@ -274,10 +274,10 @@ const Home = ({ offline }) => {
                   rel="noreferrer noopener"
                   secondary
                 >{{
-                  chrome: t('home:about.chrome_extension'),
-                  firefox: t('home:about.firefox_extension'),
-                  safari: t('home:about.safari_extension'),
-                }[browser]}</Button>
+                    chrome: t('home:about.chrome_extension'),
+                    firefox: t('home:about.firefox_extension'),
+                    safari: t('home:about.safari_extension'),
+                  }[browser]}</Button>
               )}
               <Button
                 href="https://play.google.com/store/apps/details?id=fit.crab"
@@ -298,7 +298,7 @@ const Home = ({ offline }) => {
 
       <Footer />
     </>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home
diff --git a/crabfit-frontend/src/pages/Home/Home.styles.js b/crabfit-frontend/src/pages/Home/Home.styles.js
index 1b7f061..af670c5 100644
--- a/crabfit-frontend/src/pages/Home/Home.styles.js
+++ b/crabfit-frontend/src/pages/Home/Home.styles.js
@@ -21,7 +21,7 @@ export const TitleSmall = styled('span')`
   line-height: 1em;
   text-transform: uppercase;
 
-  ${props => !props.altChars && `
+  ${props => !props.$altChars && `
     font-family: sans-serif;
     font-size: 2rem;
     font-weight: 600;
@@ -163,10 +163,10 @@ export const VideoLink = styled('a')`
   margin: 0 auto;
   transition: transform .15s;
 
-  :hover, :focus {
+  &:hover, &:focus {
     transform: translateY(-2px);
   }
-  :active {
+  &:active {
     transform: translateY(-1px);
   }
 
@@ -188,7 +188,7 @@ export const VideoLink = styled('a')`
     text-shadow: 0 0 20px rgba(0,0,0,.8);
     user-select: none;
 
-    ::before {
+    &::before {
       content: '';
       display: block;
       height: 2em;
@@ -196,7 +196,7 @@ export const VideoLink = styled('a')`
       background: currentColor;
       border-radius: 100%;
       margin: 0 auto .4em;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='${props => encodeURIComponent(props.theme.primaryDark)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='red' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
       background-position: center;
       background-repeat: no-repeat;
       background-size: 1em;
diff --git a/crabfit-frontend/src/pages/index.js b/crabfit-frontend/src/pages/index.js
index 919dae9..8946c0d 100644
--- a/crabfit-frontend/src/pages/index.js
+++ b/crabfit-frontend/src/pages/index.js
@@ -1,7 +1,7 @@
 import { lazy } from 'react'
 
-//export const Home = lazy(() => import('./Home/Home'))
+export const Home = lazy(() => import('./Home/Home'))
 //export const Event = lazy(() => import('./Event/Event'))
 //export const Create = lazy(() => import('./Create/Create'))
-//export const Help = lazy(() => import('./Help/Help'))
+export const Help = lazy(() => import('./Help/Help'))
 export const Privacy = lazy(() => import('./Privacy/Privacy'))
diff --git a/crabfit-frontend/src/services/index.js b/crabfit-frontend/src/services/index.js
index ff9d9a2..a43ebe7 100644
--- a/crabfit-frontend/src/services/index.js
+++ b/crabfit-frontend/src/services/index.js
@@ -8,30 +8,31 @@ const handleError = error => {
 }
 
 const api = {
-  get: async (endpoint, data) => {
+  get: async endpoint => {
     try {
       const response = await fetch(API_URL + endpoint)
-      return Promise.resolve(response)
+      const json = await response.json()
+      return Promise.resolve(json)
     } catch (error) {
       return handleError(error)
     }
   },
   post: async (endpoint, data, options = {}) => {
     try {
-      const response = await instance.post(endpoint, data, options);
-      return Promise.resolve(response);
+      const response = await fetch(API_URL + endpoint, data, options)
+      return Promise.resolve(response)
     } catch (error) {
-      return handleError(error);
+      return handleError(error)
     }
   },
   patch: async (endpoint, data) => {
     try {
-      const response = await instance.patch(endpoint, data);
-      return Promise.resolve(response);
+      const response = await fetch(API_URL + endpoint, data)
+      return Promise.resolve(response)
     } catch (error) {
-      return handleError(error);
+      return handleError(error)
     }
   },
-};
+}
 
-export default api;
+export default api
diff --git a/crabfit-frontend/src/theme/index.ts b/crabfit-frontend/src/theme/index.ts
deleted file mode 100644
index d3c434c..0000000
--- a/crabfit-frontend/src/theme/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const theme = {
-  light: {
-    mode: 'light',
-    background: '#FFFFFF',
-    text: '#000000',
-    primary: '#F79E00',
-    primaryDark: '#F48600',
-    primaryLight: '#F4BB60',
-    primaryBackground: '#FEF2DD',
-    error: '#D32F2F',
-    loading: '#DDDDDD',
-  },
-  dark: {
-    mode: 'dark',
-    background: '#111111',
-    text: '#DDDDDD',
-    primary: '#F79E00',
-    primaryDark: '#CC7313',
-    primaryLight: '#F4BB60',
-    primaryBackground: '#30240F',
-    error: '#E53935',
-    loading: '#444444',
-  },
-};
-
-export default theme;