Everything but formselect

cthit · May 25, 2023 · 27d23e8 · 27d23e8
1 parent 992eb31
commit 27d23e8
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 34 deletions.
diff --git a/frontend/src/components/AddGame/AddGame.module.scss b/frontend/src/components/AddGame/AddGame.module.scss
@@ -0,0 +1,63 @@
+@import 'src/styles/variables';
+.addGameContainer {
+	border: $border;
+	border-radius:$margin-smallest;
+	display: flex;
+	flex-direction: column;
+	min-height: 20rem;
+	width: 20rem;
+	align-self: center;
+	top: $margin-medium;
+	background-color: $color-bright;
+	position:absolute;
+	z-index:3;
+	padding: 1rem;
+}
+.button {
+	border: none;
+	border-radius: 999999rem; // Pill shaped
+	background-color: $color-accent;
+	color: $text-bright;
+	padding: 0.5rem 1rem;
+	box-shadow: $shadow;
+	cursor: pointer;
+	transition: all 200ms ease-in;
+	align-self: center;
+
+	&:hover {
+		filter: brightness(1.2);
+	}
+
+	&:active {
+		box-shadow: none;
+		filter: brightness(0.8);
+	}
+
+	&:disabled {
+		filter: brightness(0.8);
+		box-shadow: none;
+		cursor: default;
+	}
+}
+
+.lightBox {
+	background-color: rgba($color-dark, 0.5);
+	position: fixed;
+	top: 0;
+	left: 0;
+	right:0;
+	bottom: 0;
+	z-index: 2;
+}
+
+.title {
+	font-size: $text-big;
+	font-weight: bold;
+	align-self: center;
+}
+
+.divider {
+	height: 1px;
+	width: 100%;
+	background-color: $color-dark;
+}
diff --git a/frontend/src/components/AddGame/AddGame.tsx b/frontend/src/components/AddGame/AddGame.tsx
@@ -7,9 +7,12 @@ import { FieldErrors, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import FormInput from '../Forms/FormInput/FormInput';
 import FormTextArea from '../Forms/FormTextArea/FormTextArea';
-import FormSelect from '../Forms/FromSelect/FormSelect';
+import FormSelect from '../Forms/FormSelect/FormSelect';
+import styles from './AddGame.module.scss';
 
-interface AddGameProps {}
+interface AddGameProps {
+	showSelf: (b: boolean) => void;
+}
 
 const addGameSchema = z
 	.object({
@@ -52,7 +55,7 @@ const addGameSchema = z
 
 type AddGameForm = z.infer<typeof addGameSchema>;
 
-const AddGame: FC<AddGameProps> = () => {
+const AddGame: FC<AddGameProps> = ({ showSelf }) => {
 	const { data, error, isLoading } = usePlatforms();
 
 	const {
@@ -114,7 +117,15 @@ const AddGame: FC<AddGameProps> = () => {
 
 	return (
 		<>
-			<form onSubmit={handleSubmit(submitHandler, invalidFormHandler)}>
+
+			<div className={styles.lightBox} onClick={() => {
+				showSelf(false);
+			}} />
+			<form className={styles.addGameContainer} onSubmit={() => {
+				handleSubmit(submitHandler, invalidFormHandler);
+			}}>
+				<h2 className={styles.title}>Add new game</h2>
+				<div className={styles.divider} />
 				<FormInput
 					label="Name of the game"
 					name="name"
@@ -123,15 +134,13 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.name?.message}
 				/>
 				<br />
-
 				<FormTextArea
-					label="Description fo the game"
+					label="Description of the game"
 					register={register}
 					name="description"
 					error={errors.description?.message}
 				/>
 				<br />
-
 				<FormSelect
 					label="Platform"
 					options={data.map((platform) => {
@@ -143,7 +152,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.platform?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Release date"
 					name="releaseDate"
@@ -153,7 +161,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.releaseDate?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Expected playtime"
 					name="playtime"
@@ -163,7 +170,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playtime?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Minimum number of players"
 					name="playerMin"
@@ -173,7 +179,6 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playerMin?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Maximum number of players"
 					name="playerMax"
@@ -183,21 +188,19 @@ const AddGame: FC<AddGameProps> = () => {
 					error={errors.playerMax?.message}
 				/>
 				<br />
-
 				<FormInput
 					label="Location of the game"
 					name="location"
 					type="text"
 					register={register}
 					error={errors.location?.message}
 				/>
-				<br />
 
 				{errors.root ? <p>Error: {errors.root.message}</p> : null}
 
-				<input type="submit" disabled={postLoading} value="Submit" />
+				<input className={styles.button} type="submit" disabled={postLoading} value="Submit" />
 			</form>
-		</>
+		</ >
 	);
 };
 

diff --git a/frontend/src/components/AddSuggestion/AddSuggestion.tsx b/frontend/src/components/AddSuggestion/AddSuggestion.tsx
@@ -5,7 +5,7 @@ import * as z from 'zod';
 import { toast } from 'react-toastify';
 import FormInput from '../Forms/FormInput/FormInput';
 import FormTextArea from '../Forms/FormTextArea/FormTextArea';
-import FormSelect from '../Forms/FromSelect/FormSelect';
+import FormSelect from '../Forms/FormSelect/FormSelect';
 import { useAddGameSuggestion } from '@/src/hooks/api/useAddGameSuggestion';
 import { usePlatforms } from '@/src/hooks/api/usePlatforms';
 

diff --git a/frontend/src/components/Forms/FormInput/FormInput.module.scss b/frontend/src/components/Forms/FormInput/FormInput.module.scss
@@ -0,0 +1,23 @@
+@import 'src/styles/variables';
+.container {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
diff --git a/frontend/src/components/Forms/FormInput/FormInput.tsx b/frontend/src/components/Forms/FormInput/FormInput.tsx
@@ -1,5 +1,6 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { UseFormRegister, RegisterOptions } from 'react-hook-form';
+import styles from './FormInput.module.scss';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 	name: string;
@@ -21,9 +22,9 @@ const FormInput: FC<InputProps> = ({
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
-			<input
+		<div className={styles.container}>
+			{label && <label htmlFor={name} className={styles.label} >{label}</label>}<br />
+			<input className={styles.inputBox}
 				aria-invalid={error ? 'true' : 'false'}
 				{...(register ? register(name, registerOptions) : {})}
 				{...rest}

diff --git a/frontend/src/components/Forms/FormSelect/FormSelect.module.scss b/frontend/src/components/Forms/FormSelect/FormSelect.module.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/variables';
+
+.box {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+	resize: vertical;
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
diff --git a/...omponents/Forms/FromSelect/FormSelect.tsx → ...omponents/Forms/FormSelect/FormSelect.tsx b/...omponents/Forms/FromSelect/FormSelect.tsx → ...omponents/Forms/FormSelect/FormSelect.tsx
@@ -7,6 +7,7 @@ import {
 	Control
 } from 'react-hook-form';
 import Option from 'react-select/dist/declarations/src/components/Option';
+import styles from './FormSelect.module.scss';
 
 interface Option {
 	value: string;
@@ -19,7 +20,6 @@ interface SelectProps extends Props {
 	error?: string;
 	options: Option[];
 	control?: Control<any, any>;
-	wrapperClass?: string;
 	value?: Option;
 }
 
@@ -29,19 +29,19 @@ const FormSelect: FC<SelectProps> = ({
 	label,
 	control,
 	options,
-	wrapperClass,
 	value: defaultValue,
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
+		<div className={styles.box}>
+			{label && <label className={styles.label} htmlFor={name}>{label}</label>}
 			<Controller
 				control={control}
 				defaultValue={defaultValue}
 				name={name}
 				render={({ field: { onChange, value, ref } }) => (
 					<Select
+						className={styles.inputBox}
 						ref={ref}
 						value={
 							Array.isArray(value)

diff --git a/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss b/frontend/src/components/Forms/FormTextArea/FormTextArea.module.scss
@@ -0,0 +1,24 @@
+@import 'src/styles/variables';
+
+.box {
+	display: flex;
+	flex-direction: column;
+	margin: 0 $margin-small;
+	padding: $margin-small 0;
+}
+
+.inputBox{
+	border:$border;
+	border-radius: $margin-smallest;
+	padding: $margin-smallest;
+	margin-top: $margin-smallest;
+	box-shadow: $shadow;
+	resize: vertical;
+}
+
+.label {
+	font-size: $text-normal;
+	font-weight: bold;
+	display:block;
+	align-self:center;
+}
diff --git a/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx b/frontend/src/components/Forms/FormTextArea/FormTextArea.tsx
@@ -1,13 +1,13 @@
 import React, { FC, TextareaHTMLAttributes } from 'react';
 import { UseFormRegister, FieldValues, RegisterOptions } from 'react-hook-form';
+import styles from './FormTextArea.module.scss';
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 	name: string;
 	label?: string;
 	error?: string;
 	register?: UseFormRegister<any>;
 	registerOptions?: RegisterOptions;
-	wrapperClass?: string;
 	className?: string;
 }
 
@@ -17,13 +17,12 @@ const FormTextArea: FC<TextAreaProps> = ({
 	name,
 	error,
 	label,
-	wrapperClass,
 	...rest
 }) => {
 	return (
-		<div className={wrapperClass}>
-			{label && <label htmlFor={name}>{label}</label>}
-			<textarea
+		<div className={styles.box}>
+			{label && <label className={styles.label} htmlFor={name}>{label}</label>}
+			<textarea className={styles.inputBox}
 				aria-invalid={error ? 'true' : 'false'}
 				{...(register ? register(name, registerOptions) : {})}
 				{...rest}