From 17290562c83182bc3d70fb748a8ddef5cb93a8d5 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Mon, 31 May 2021 20:33:37 +1000
Subject: [PATCH] Cleaned up styles, squishy crab, better language switching

---
 crabfit-frontend/public/index.html            |  2 +-
 crabfit-frontend/src/App.tsx                  |  6 +-
 .../CalendarField/CalendarField.tsx           | 22 ++-----
 crabfit-frontend/src/components/Logo/Logo.tsx | 31 +++++++++
 .../src/components/Logo/logoStyle.ts          | 64 +++++++++++++++++++
 .../src/components/Settings/Settings.tsx      | 21 +++++-
 crabfit-frontend/src/components/index.ts      |  1 +
 crabfit-frontend/src/i18n/index.ts            |  2 +-
 crabfit-frontend/src/pages/Event/Event.tsx    | 30 ++-------
 .../src/pages/Event/eventStyle.ts             | 21 ------
 crabfit-frontend/src/pages/Help/Help.tsx      | 18 ++----
 crabfit-frontend/src/pages/Help/helpStyle.ts  | 32 ----------
 crabfit-frontend/src/pages/Home/Home.tsx      |  4 +-
 .../src/pages/Privacy/Privacy.tsx             | 17 ++---
 .../{dayjs_locales.js => dayjs_locales.ts}    |  0
 crabfit-frontend/src/stores/index.ts          |  2 +-
 16 files changed, 140 insertions(+), 133 deletions(-)
 create mode 100644 crabfit-frontend/src/components/Logo/Logo.tsx
 create mode 100644 crabfit-frontend/src/components/Logo/logoStyle.ts
 rename crabfit-frontend/src/res/{dayjs_locales.js => dayjs_locales.ts} (100%)
diff --git a/crabfit-frontend/public/index.html b/crabfit-frontend/public/index.html
index 7e8066b..0ff263d 100644
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@@ -36,7 +36,7 @@
     </script>
   </head>
   <body>
-    <noscript><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/src/App.tsx b/crabfit-frontend/src/App.tsx
index ef16fa0..a31812d 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -1,9 +1,5 @@
 import { useState, useEffect, useCallback, Suspense, lazy } from 'react';
-import {
-	BrowserRouter,
-  Switch,
-  Route,
-} from 'react-router-dom';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { ThemeProvider, Global } from '@emotion/react';
 
 import { Settings, Loading, Egg } from 'components';
diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
index 20f4ad3..96c7eb4 100644
--- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
+++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx
@@ -19,8 +19,6 @@ import {
 	Day,
 } from './calendarFieldStyle';
 
-import localeImports from 'res/dayjs_locales';
-
 dayjs.extend(isToday);
 dayjs.extend(localeData);
 dayjs.extend(updateLocale);
@@ -58,8 +56,7 @@ const CalendarField = ({
 }) => {
   const weekStart = useSettingsStore(state => state.weekStart);
   const locale = useLocaleUpdateStore(state => state.locale);
-  const setLocale = useLocaleUpdateStore(state => state.setLocale);
-  const { t, i18n } = useTranslation('home');
+  const { t } = useTranslation('home');
 
 	const [type, setType] = useState(0);
 
@@ -92,22 +89,11 @@ const CalendarField = ({
 	};
 
 	useEffect(() => {
-    if (Object.keys(localeImports).includes(i18n.language)) {
-      localeImports[i18n.language]().then(() => {
-        dayjs.locale(i18n.language);
-        setLocale(dayjs.locale());
-        if (weekStart !== dayjs.Ls[i18n.language].weekStart) {
-          dayjs.updateLocale(i18n.language, { weekStart });
-        }
-      });
-    } else {
-      // Fallback
-      if (weekStart !== dayjs.Ls.en.weekStart) {
-        dayjs.updateLocale('en', { weekStart });
-      }
+    if (dayjs.Ls.hasOwnProperty(locale) && weekStart !== dayjs.Ls[locale].weekStart) {
+      dayjs.updateLocale(locale, { weekStart });
     }
 		setDates(calculateMonth(month, year, weekStart));
-	}, [weekStart, month, year, i18n.language, setLocale]);
+	}, [weekStart, month, year, locale]);
 
 	return (
 		<Wrapper locale={locale}>
diff --git a/crabfit-frontend/src/components/Logo/Logo.tsx b/crabfit-frontend/src/components/Logo/Logo.tsx
new file mode 100644
index 0000000..181bf0e
--- /dev/null
+++ b/crabfit-frontend/src/components/Logo/Logo.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import {
+  Wrapper,
+  A,
+  Top,
+  Image,
+  Title,
+  Tagline,
+} from './logoStyle';
+
+import image from 'res/logo.svg';
+
+const Logo = () => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Wrapper>
+      <A as={Link} to="/">
+        <Top>
+          <Image src={image} alt="" />
+          <Title>CRAB FIT</Title>
+        </Top>
+        <Tagline>{t('common:tagline')}</Tagline>
+      </A>
+    </Wrapper>
+  );
+};
+
+export default Logo;
diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts
new file mode 100644
index 0000000..2709403
--- /dev/null
+++ b/crabfit-frontend/src/components/Logo/logoStyle.ts
@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const A = styled.a`
+	text-decoration: none;
+
+  @keyframes jelly {
+    from,to {
+      -webkit-transform: scale(1,1);
+      transform: scale(1,1)
+    }
+    25% {
+      -webkit-transform: scale(.9,1.1);
+      transform: scale(.9,1.1)
+    }
+    50% {
+      -webkit-transform: scale(1.1,.9);
+      transform: scale(1.1,.9)
+    }
+    75% {
+      -webkit-transform: scale(.95,1.05);
+      transform: scale(.95,1.05)
+    }
+  }
+
+  &:hover img {
+    animation: jelly .5s 1;
+  }
+`;
+
+export const Top = styled.div`
+	display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Image = styled.img`
+	width: 2.5rem;
+	margin-right: 16px;
+`;
+
+export const Title = styled.span`
+	display: block;
+	font-size: 2rem;
+	color: ${props => props.theme.primary};
+	font-family: 'Molot', sans-serif;
+	font-weight: 400;
+	text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
+	line-height: 1em;
+`;
+
+export const Tagline = styled.span`
+	text-decoration: underline;
+  font-size: 14px;
+  padding-top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/crabfit-frontend/src/components/Settings/Settings.tsx b/crabfit-frontend/src/components/Settings/Settings.tsx
index 9a29629..807b986 100644
--- a/crabfit-frontend/src/components/Settings/Settings.tsx
+++ b/crabfit-frontend/src/components/Settings/Settings.tsx
@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 import { ToggleField, SelectField } from 'components';
 
-import { useSettingsStore } from 'stores';
+import { useSettingsStore, useLocaleUpdateStore } from 'stores';
 
 import {
   OpenButton,
@@ -13,11 +14,27 @@ import {
   Cover,
 } from './settingsStyle';
 
+import localeImports from 'res/dayjs_locales';
+
 const Settings = () => {
   const theme = useTheme();
   const store = useSettingsStore();
   const [isOpen, setIsOpen] = useState(false);
   const { t, i18n } = useTranslation('common');
+  const setLocale = useLocaleUpdateStore(state => state.setLocale);
+
+  useEffect(() => {
+    if (Object.keys(localeImports).includes(i18n.language)) {
+      localeImports[i18n.language]().then(() => {
+        dayjs.locale(i18n.language);
+        setLocale(dayjs.locale());
+        document.documentElement.setAttribute('lang', i18n.language);
+      });
+    } else {
+      setLocale('en');
+      document.documentElement.setAttribute('lang', 'en')
+    }
+  }, [i18n.language, setLocale]);
 
   return (
     <>
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index 7808dcb..c0f472f 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -18,3 +18,4 @@ export { default as Settings } from './Settings/Settings';
 export { default as Egg } from './Egg/Egg';
 export { default as Footer } from './Footer/Footer';
 export { default as Recents } from './Recents/Recents';
+export { default as Logo } from './Logo/Logo';
diff --git a/crabfit-frontend/src/i18n/index.ts b/crabfit-frontend/src/i18n/index.ts
index 7febfcc..82c582c 100644
--- a/crabfit-frontend/src/i18n/index.ts
+++ b/crabfit-frontend/src/i18n/index.ts
@@ -21,6 +21,6 @@ i18n
     backend: {
       loadPath: '/i18n/{{lng}}/{{ns}}.json',
     },
-  });
+  }).then(() => document.documentElement.setAttribute('lang', i18n.language));
 
 export default i18n;
diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index 0bafde3..14b3e9e 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { useState, useEffect } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
@@ -10,7 +9,6 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import {
-	Center,
 	Footer,
 	TextField,
 	SelectField,
@@ -18,12 +16,12 @@ import {
 	AvailabilityViewer,
 	AvailabilityEditor,
 	Error,
+  Logo,
 } from 'components';
 
+import { StyledMain } from '../Home/homeStyle';
+
 import {
-	StyledMain,
-	Logo,
-	Title,
 	EventName,
   EventDate,
 	LoginForm,
@@ -37,9 +35,7 @@ import {
 import api from 'services';
 import { useSettingsStore, useRecentsStore, useLocaleUpdateStore } from 'stores';
 
-import logo from 'res/logo.svg';
 import timezones from 'res/timezones.json';
-import localeImports from 'res/dayjs_locales';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -51,10 +47,9 @@ const Event = (props) => {
   const weekStart = useSettingsStore(state => state.weekStart);
 
   const addRecent = useRecentsStore(state => state.addRecent);
-  const setLocale = useLocaleUpdateStore(state => state.setLocale);
   const locale = useLocaleUpdateStore(state => state.locale);
 
-  const { t, i18n } = useTranslation(['common', 'event']);
+  const { t } = useTranslation(['common', 'event']);
 
 	const { register, handleSubmit } = useForm();
 	const { id } = props.match.params;
@@ -77,15 +72,6 @@ const Event = (props) => {
 
 	const [copied, setCopied] = useState(null);
 
-  useEffect(() => {
-    if (Object.keys(localeImports).includes(i18n.language)) {
-      localeImports[i18n.language]().then(() => {
-        dayjs.locale(i18n.language);
-        setLocale(dayjs.locale());
-      });
-    }
-  }, [i18n.language, setLocale]);
-
 	useEffect(() => {
 		const fetchEvent = async () => {
 			try {
@@ -290,13 +276,7 @@ const Event = (props) => {
 	return (
 		<>
 			<StyledMain>
-				<Link to="/" style={{ textDecoration: 'none' }}>
-					<Center>
-						<Logo src={logo} alt="" />
-						<Title>CRAB FIT</Title>
-					</Center>
-					<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
-				</Link>
+				<Logo />
 
 				{(!!event || isLoading) ? (
 					<>
diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts
index 73796c9..60080e6 100644
--- a/crabfit-frontend/src/pages/Event/eventStyle.ts
+++ b/crabfit-frontend/src/pages/Event/eventStyle.ts
@@ -1,26 +1,5 @@
 import styled from '@emotion/styled';
 
-export const StyledMain = styled.div`
-	width: 600px;
-	margin: 20px auto;
-	max-width: calc(100% - 60px);
-`;
-
-export const Logo = styled.img`
-	width: 2.5rem;
-	margin-right: 16px;
-`;
-
-export const Title = styled.span`
-	display: block;
-	font-size: 2rem;
-	color: ${props => props.theme.primary};
-	font-family: 'Molot', sans-serif;
-	font-weight: 400;
-	text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
-	line-height: 1em;
-`;
-
 export const EventName = styled.h1`
 	text-align: center;
 	font-weight: 800;
diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx
index 24f0301..57bab1b 100644
--- a/crabfit-frontend/src/pages/Help/Help.tsx
+++ b/crabfit-frontend/src/pages/Help/Help.tsx
@@ -7,21 +7,21 @@ import {
 	Center,
 	Footer,
   AvailabilityViewer,
+  Logo,
 } from 'components';
 
 import {
-	StyledMain,
-	Logo,
-  Title,
+  StyledMain,
 	AboutSection,
 	P,
+} from '../Home/homeStyle';
+
+import {
   Step,
   FakeCalendar,
   FakeTimeRange,
 } from './helpStyle';
 
-import logo from 'res/logo.svg';
-
 const Help = () => {
   const { push } = useHistory();
   const { t } = useTranslation(['common', 'help']);
@@ -33,13 +33,7 @@ const Help = () => {
 	return (
 		<>
 			<StyledMain>
-        <Link to="/" style={{ textDecoration: 'none' }}>
-					<Center>
-						<Logo src={logo} alt="" />
-						<Title>CRAB FIT</Title>
-					</Center>
-					<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
-				</Link>
+        <Logo />
       </StyledMain>
 
       <StyledMain>
diff --git a/crabfit-frontend/src/pages/Help/helpStyle.ts b/crabfit-frontend/src/pages/Help/helpStyle.ts
index dbd11d0..fc96326 100644
--- a/crabfit-frontend/src/pages/Help/helpStyle.ts
+++ b/crabfit-frontend/src/pages/Help/helpStyle.ts
@@ -1,37 +1,5 @@
 import styled from '@emotion/styled';
 
-export const StyledMain = styled.div`
-	width: 600px;
-	margin: 20px auto;
-	max-width: calc(100% - 60px);
-`;
-
-export const Logo = styled.img`
-	width: 2.5rem;
-	margin-right: 16px;
-`;
-
-export const Title = styled.span`
-	display: block;
-	font-size: 2rem;
-	color: ${props => props.theme.primary};
-	font-family: 'Molot', sans-serif;
-	font-weight: 400;
-	text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
-	line-height: 1em;
-`;
-
-export const AboutSection = styled.section`
-	margin: 30px 0 0;
-	background-color: ${props => props.theme.primaryBackground};
-	padding: 20px 0;
-`;
-
-export const P = styled.p`
-	font-weight: 500;
-	line-height: 1.6em;
-`;
-
 export const Step = styled.h2`
 	text-decoration-color: ${props => props.theme.primary};
   text-decoration-style: solid;
diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx
index e7b61fa..5a135cc 100644
--- a/crabfit-frontend/src/pages/Home/Home.tsx
+++ b/crabfit-frontend/src/pages/Home/Home.tsx
@@ -222,11 +222,11 @@ const Home = ({ offline }) => {
 					<h2>{t('home:about.name')}</h2>
 					<Stats>
 						<Stat>
-							<StatNumber>{stats.eventCount ?? '300+'}</StatNumber>
+							<StatNumber>{stats.eventCount ?? '350+'}</StatNumber>
 							<StatLabel>{t('home:about.events')}</StatLabel>
 						</Stat>
 						<Stat>
-							<StatNumber>{stats.personCount ?? '400+'}</StatNumber>
+							<StatNumber>{stats.personCount ?? '500+'}</StatNumber>
 							<StatLabel>{t('home:about.availabilities')}</StatLabel>
 						</Stat>
 					</Stats>
diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
index 79b4210..e9f0eff 100644
--- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx
+++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx
@@ -1,22 +1,19 @@
 import { useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
 
 import {
 	Button,
 	Center,
 	Footer,
+  Logo,
 } from 'components';
 
 import {
 	StyledMain,
-	Logo,
-  Title,
 	AboutSection,
 	P,
-} from '../Help/helpStyle';
-
-import logo from 'res/logo.svg';
+} from '../Home/homeStyle';
 
 const Privacy = () => {
   const { push } = useHistory();
@@ -29,13 +26,7 @@ const Privacy = () => {
 	return (
 		<>
 			<StyledMain>
-        <Link to="/" style={{ textDecoration: 'none' }}>
-					<Center>
-						<Logo src={logo} alt="" />
-						<Title>CRAB FIT</Title>
-					</Center>
-					<Center style={{ textDecoration: 'underline', fontSize: 14, paddingTop: 6 }}>{t('common:tagline')}</Center>
-				</Link>
+        <Logo />
       </StyledMain>
 
       <StyledMain>
diff --git a/crabfit-frontend/src/res/dayjs_locales.js b/crabfit-frontend/src/res/dayjs_locales.ts
similarity index 100%
rename from crabfit-frontend/src/res/dayjs_locales.js
rename to crabfit-frontend/src/res/dayjs_locales.ts
diff --git a/crabfit-frontend/src/stores/index.ts b/crabfit-frontend/src/stores/index.ts
index 612f06f..e9ce967 100644
--- a/crabfit-frontend/src/stores/index.ts
+++ b/crabfit-frontend/src/stores/index.ts
@@ -41,6 +41,6 @@ export const useTWAStore = create(set => ({
 }));
 
 export const useLocaleUpdateStore = create(set => ({
-  locale: undefined,
+  locale: 'en',
   setLocale: locale => set({ locale }),
 }));
