Sign out button

crabfit-frontend/public/i18n/en/event.json

@@ -17,6 +17,7 @@
     "name": "Your name",
     "password": "Password (optional)",
     "button": "Login",
+    "logout_button": "Sign out",
     "info": "These details are only for this event. Use a password to prevent others from changing your availability.",
 
     "timezone": "Your time zone",

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -83,7 +83,7 @@ export const Pressable = styled.button`
 			left: calc(50% - 12px);
 			height: 18px;
 			width: 18px;
-			border: 3px solid #FFF;
+			border: 3px solid ${props.primaryColor ? '#FFF' : props.theme.background};
 			border-left-color: transparent;
 			border-radius: 100px;
 			animation: load .5s linear infinite;
@@ -92,7 +92,7 @@ export const Pressable = styled.button`
     @media (prefers-reduced-motion: reduce) {
       &:after {
         content: 'loading...';
-        color: #FFF;
+        color: ${props.primaryColor ? '#FFF' : props.theme.background};
         animation: none;
         width: initial;
         height: initial;

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

@@ -51,7 +51,7 @@ const Event = (props) => {
 
   const { t } = useTranslation(['common', 'event']);
 
-	const { register, handleSubmit, setFocus } = useForm();
+	const { register, handleSubmit, setFocus, reset } = useForm();
 	const { id } = props.match.params;
   const { offline } = props;
 	const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
@@ -270,6 +270,7 @@ const Event = (props) => {
       gtag('event', 'login', {
         'event_category': 'event',
       });
+      reset();
 		}
 	};
 
@@ -321,7 +322,14 @@ const Event = (props) => {
 					<LoginSection id="login">
 						<StyledMain>
 							{user ? (
-								<h2>{t('event:form.signed_in', { name: user.name })}</h2>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '20px 0', flexWrap: 'wrap', gap: '10px' }}>
+  								<h2 style={{ margin: 0 }}>{t('event:form.signed_in', { name: user.name })}</h2>
+                  <Button small onClick={() => {
+                    setTab('group');
+                    setUser(null);
+                    setPassword(null);
+                  }}>{t('event:form.logout_button')}</Button>
+                </div>
 							) : (
 								<>
 									<h2>{t('event:form.signed_out')}</h2>