diff --git a/frontend/src/components/AddGame/AddGame.module.scss b/frontend/src/components/AddGame/AddGame.module.scss index 0a456b0..fad0e62 100644 --- 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; } \ No newline at end of file diff --git a/frontend/src/components/AddGame/AddGame.tsx b/frontend/src/components/AddGame/AddGame.tsx index 7f8de1e..96c41a2 100644 --- a/frontend/src/components/AddGame/AddGame.tsx +++ b/frontend/src/components/AddGame/AddGame.tsx @@ -170,23 +170,7 @@ const AddGame: FC = ({ showSelf }) => { error={errors.playtime?.message} />
- -
- +
= ({ showSelf }) => { }; export default AddGame; + +interface PlayerInputProps { + register: any; + errors: FieldErrors; +} +const PlayerInput: FC = ({ register, errors }) => { + return ( +
+

Amount of players

+
+ +

-

+ +
); +} diff --git a/frontend/src/components/Forms/FormInput/FormInput.module.scss b/frontend/src/components/Forms/FormInput/FormInput.module.scss index 476fd4c..cf5e70d 100644 --- 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 index b62a6f6..22cd6ea 100644 --- a/frontend/src/components/Forms/FormSelect/FormSelect.tsx +++ b/frontend/src/components/Forms/FormSelect/FormSelect.tsx @@ -38,6 +38,7 @@ const FormSelect: FC = ({ (