Event page and availability viewer

crabfit-frontend/src/components/TextField/TextField.tsx

@@ -9,11 +9,12 @@ const TextField = ({
 	label,
 	subLabel,
 	id,
+	inline = false,
 	register,
 	...props
 }) => (
-	<Wrapper>
-		{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
+	<Wrapper inline={inline}>
+		{label && <StyledLabel htmlFor={id} inline={inline}>{label}</StyledLabel>}
 		{subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
 		<StyledInput id={id} ref={register} {...props} />
 	</Wrapper>

crabfit-frontend/src/components/TextField/textFieldStyle.ts

@@ -2,12 +2,20 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
 	margin: 30px 0;
+
+	${props => props.inline && `
+		margin: 0;
+	`}
 `;
 
 export const StyledLabel = styled.label`
 	display: block;
 	padding-bottom: 4px;
 	font-size: 18px;
+
+	${props => props.inline && `
+		font-size: 16px;
+	`}
 `;
 
 export const StyledSubLabel = styled.label`