Timezones, mobile calendar support

crabfit-frontend/src/pages/Home/Home.tsx

@@ -4,7 +4,9 @@ import {
 	TextField,
 	CalendarField,
 	TimeRangeField,
+	SelectField,
 	Button,
+	Center,
 } from 'components';
 
 import {
@@ -12,15 +14,26 @@ import {
 	CreateForm,
 	TitleSmall,
 	TitleLarge,
+	Logo,
 } from './homeStyle';
 
+import logo from 'res/logo.svg';
+import timezones from 'res/timezones.json';
+
 const Home = () => {
-	const { register, handleSubmit } = useForm();
+	const { register, handleSubmit } = useForm({
+		defaultValues: {
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		},
+	});
 
 	const onSubmit = data => console.log('submit', data);
 
 	return (
 		<StyledMain>
+			<Center>
+				<Logo src={logo} alt="" />
+			</Center>
 			<TitleSmall>Create a</TitleSmall>
 			<TitleLarge>CRAB FIT</TitleLarge>
 
@@ -50,7 +63,18 @@ const Home = () => {
 					register={register}
 				/>
 
-				<Button type="submit">Create</Button>
+				<SelectField
+					label="And the timezone"
+					name="timezone"
+					id="timezone"
+					register={register}
+					options={timezones}
+					required
+				/>
+
+				<Center>
+					<Button type="submit">Create</Button>
+				</Center>
 			</CreateForm>
 		</StyledMain>
 	);

crabfit-frontend/src/pages/Home/homeStyle.ts

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 
 export const StyledMain = styled.main`
 	width: 600px;
-	margin: 30px auto;
-	max-width: calc(100% - 30px);
+	margin: 20px auto;
+	max-width: calc(100% - 60px);
 `;
 
 export const CreateForm = styled.form`
@@ -11,7 +11,7 @@ export const CreateForm = styled.form`
 
 export const TitleSmall = styled.span`
 	display: block;
-	margin: 20px 0 0;
+	margin: 0;
 	font-size: 3rem;
 	text-align: center;
 	font-family: 'CF Samurai Bob';
@@ -30,3 +30,7 @@ export const TitleLarge = styled.h1`
 	text-shadow: 0 4px 0 ${props => props.theme.primaryDark};
 	line-height: 1em;
 `;
+
+export const Logo = styled.img`
+	width: 80px;
+`;