Update react-hook-form, focus login on tab press

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

@@ -51,7 +51,7 @@ const Event = (props) => {
 
   const { t } = useTranslation(['common', 'event']);
 
-	const { register, handleSubmit } = useForm();
+	const { register, handleSubmit, setFocus } = useForm();
 	const { id } = props.match.params;
   const { offline } = props;
 	const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
@@ -329,20 +329,18 @@ const Event = (props) => {
 										<TextField
 											label={t('event:form.name')}
 											type="text"
-											name="name"
 											id="name"
 											inline
 											required
-											register={register}
+											{...register('name')}
 										/>
 
 										<TextField
 											label={t('event:form.password')}
 											type="password"
-											name="password"
 											id="password"
 											inline
-											register={register}
+											{...register('password')}
 										/>
 
 										<Button
@@ -394,7 +392,9 @@ const Event = (props) => {
 									e.preventDefault();
 									if (user) {
 										setTab('you');
-									}
+									} else {
+                    setFocus('name');
+                  }
 								}}
 								selected={tab === 'you'}
 								disabled={!user}

crabfit-frontend/src/pages/Event/eventStyle.ts

@@ -109,7 +109,7 @@ export const Tab = styled.a`
 	color: ${props => props.theme.text};
 	padding: 8px 18px;
 	background-color: ${props => props.theme.primaryBackground};
-	border: 1px solid ${props => props.theme.primaryLight};
+	border: 1px solid ${props => props.theme.primary};
 	border-bottom: 0;
 	margin: 0 4px;
 	border-top-left-radius: 5px;