Finished designing addGame

cthit · May 25, 2023 · 7cd1722 · 7cd1722
1 parent 27d23e8
commit 7cd1722
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 20 deletions.
diff --git a/frontend/src/components/AddGame/AddGame.module.scss b/frontend/src/components/AddGame/AddGame.module.scss
@@ -6,10 +6,11 @@
 	flex-direction: column;
 	min-height: 20rem;
 	width: 20rem;
-	align-self: center;
-	top: $margin-medium;
 	background-color: $color-bright;
 	position:absolute;
+	left:50%;
+	transform: translateX(-50%) translateY(-50%);
+	top:50%;
 	z-index:3;
 	padding: 1rem;
 }
@@ -59,5 +60,28 @@
 .divider {
 	height: 1px;
 	width: 100%;
+	margin-top: $margin-small;
 	background-color: $color-dark;
+}
+
+.playerInput {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	height:3rem;
+	/* max-width: 18rem; */
+}
+
+.playerDivider {
+	flex:1;
+	font-size: $text-big;
+	font-weight:bold;
+	text-align: center;
+}
+
+.playerBox {
+	display:flex;
+	flex-direction: column;
+	align-items: center;
 }
diff --git a/frontend/src/components/AddGame/AddGame.tsx b/frontend/src/components/AddGame/AddGame.tsx
@@ -170,23 +170,7 @@ const AddGame: FC<AddGameProps> = ({ showSelf }) => {
 					error={errors.playtime?.message}
 				/>
 				<br />
-				<FormInput
-					label="Minimum number of players"
-					name="playerMin"
-					type="number"
-					register={register}
-					registerOptions={{ valueAsNumber: true }}
-					error={errors.playerMin?.message}
-				/>
-				<br />
-				<FormInput
-					label="Maximum number of players"
-					name="playerMax"
-					type="number"
-					register={register}
-					registerOptions={{ valueAsNumber: true }}
-					error={errors.playerMax?.message}
-				/>
+				<PlayerInput register={register} errors={errors} />
 				<br />
 				<FormInput
 					label="Location of the game"
@@ -205,3 +189,32 @@ const AddGame: FC<AddGameProps> = ({ showSelf }) => {
 };
 
 export default AddGame;
+
+interface PlayerInputProps {
+	register: any;
+	errors: FieldErrors<AddGameForm>;
+}
+const PlayerInput: FC<PlayerInputProps> = ({ register, errors }) => {
+	return (
+		<div className={styles.playerBox}>
+			<h3>Amount of players</h3>
+			<div className={styles.playerInput}>
+				<FormInput
+
+					name="playerMin"
+					type="number"
+					register={register}
+					registerOptions={{ valueAsNumber: true }}
+					error={errors.playerMin?.message}
+				/>
+				<p className={styles.playerDivider}>-</p>
+				<FormInput
+
+					name="playerMax"
+					type="number"
+					register={register}
+					registerOptions={{ valueAsNumber: true }}
+					error={errors.playerMax?.message}
+				/>
+			</div></div>);
+}
diff --git a/frontend/src/components/Forms/FormInput/FormInput.module.scss b/frontend/src/components/Forms/FormInput/FormInput.module.scss
@@ -4,6 +4,7 @@
 	flex-direction: column;
 	margin: 0 $margin-small;
 	padding: $margin-small 0;
+	flex: 5;
 }
 
 .inputBox{
@@ -12,6 +13,7 @@
 	padding: $margin-smallest;
 	margin-top: $margin-smallest;
 	box-shadow: $shadow;
+	width:100%;
 
 }
 

diff --git a/frontend/src/components/Forms/FormSelect/FormSelect.tsx b/frontend/src/components/Forms/FormSelect/FormSelect.tsx
@@ -38,6 +38,7 @@ const FormSelect: FC<SelectProps> = ({
 			<Controller
 				control={control}
 				defaultValue={defaultValue}
+
 				name={name}
 				render={({ field: { onChange, value, ref } }) => (
 					<Select

diff --git a/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss b/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss
@@ -13,7 +13,8 @@
 	padding: $margin-smallest;
 	margin-top: $margin-smallest;
 	box-shadow: $shadow;
-	resize: vertical;
+	resize: none;
+	height: 3rem;
 }
 
 .label {