login and registration forms with minor css improvs

src/User/UserButtons.scss

@@ -12,14 +12,18 @@
         padding-right: 10px;
         text-shadow: 0cm 0cm 0.08cm #fff;
 
+
         &.hover .user-name::before {
             transform: scaleX(1);
             transform-origin: bottom left;
         }
 
-        &.hover .arrow-icon {
-            width: 24px;
-            height: 24px;
+        transition: all 1s ease-in-out;
+        &:hover {
+            transform: scale(1.1);
+        }
+        .arrow-icon {
+
         }
 
         .user-name {

src/forms/LoginForm.js

@@ -1,27 +1,31 @@
 import './AddGameForm.scss'
 import './Form.scss'
-import React, { useState } from "react";
+import './LoginRegisterGameForm.scss'
+import React, {useState} from "react";
 import {UserService} from "../services/UserService";
+import {useNavigate} from "react-router-dom";
 
 function RegisterForm() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [message, setMessage] = useState(true);
 
+    const navigate = useNavigate();
+
     const handleSubmit = async (e) => {
         e.preventDefault();
 
         try {
             await UserService.loginUser(email, password)
-            setMessage('Login succesful.')
+            navigate("/")
         } catch (e) {
-            setMessage('There was a problem with the registration.')
+            setMessage('Invalid credentials.')
         }
     };
 
     return (
-        <div className="add-game-form">
-            <div className="form">
+        <div>
+            <div className="login-register-game-form">
                 <h1>Login</h1>
                 <form onSubmit={handleSubmit}>
                     <div className="form-group">
@@ -53,11 +57,11 @@ function RegisterForm() {
                     <div className="form-group actions">
                         <button type="submit" className="submit">Login</button>
 
-                        <button onClick={() => window.history.back()}type="button" className="cancel">Cancel</button>
+                        <button onClick={() => navigate("/")} type="button" className="cancel">Cancel</button>
                     </div>
                 </form>
+                <p>{message}</p>
             </div>
-            <p>{message}</p>
         </div>
     )
 }

src/forms/LoginRegisterGameForm.scss

@@ -0,0 +1,73 @@
+@import '../index';
+@import "../Home";
+
+.login-register-game-form {
+  @extend .color-primary-0;
+  @extend h1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  form {
+    @extend .menu-btns;
+    border: solid $color-primary-3 2px;
+    border-radius: 15px;
+    background-color: #181818;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 20px;
+
+      label {
+        @extend .color-primary-3;
+        font-size: 25px;
+        margin-bottom: 5px;
+      }
+
+      input, select, textarea {
+        width: 100%;
+        padding: 5px;
+        min-height: 25px;
+      }
+
+      &.short-input {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        label {
+          flex-basis: 48%;
+        }
+
+        input, select {
+          flex-basis: 48%;
+          max-width: 200px;
+        }
+      }
+    }
+
+    .actions {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+
+      .submit, .cancel {
+        @extend .btn;
+        width: auto;
+        flex-grow: 0;
+      }
+    }
+  }
+
+  p{
+    font-size: 20px;
+    color: red;
+  }
+
+}

src/forms/RegisterForm.js

@@ -1,7 +1,9 @@
 import './AddGameForm.scss'
 import './Form.scss'
-import React, { useState } from "react";
+import './LoginRegisterGameForm.scss'
+import React, {useState} from "react";
 import {UserService} from "../services/UserService";
+import {useNavigate} from "react-router-dom";
 
 function RegisterForm() {
     const [name, setName] = useState('');
@@ -11,6 +13,7 @@ function RegisterForm() {
     const [passwordsMatch, setPasswordsMatch] = useState(true);
     const [message, setMessage] = useState(true);
 
+    const navigate = useNavigate();
 
     const handlePasswordChange = (e) => {
         setPassword(e.target.value);
@@ -25,16 +28,17 @@ function RegisterForm() {
     const handleSubmit = async (e) => {
         e.preventDefault();
         try {
-            await UserService.registerUser(name, email, password, 1)
-            setMessage('Registered successfully')
+            await UserService.registerUser(name, email, password)
+            await UserService.loginUser(email, password)
+            navigate("/")
         } catch (e) {
             setMessage('There was a problem with the registration.')
         }
     };
 
     return (
-        <div className="add-game-form">
-            <div className="form">
+        <div>
+            <div className="login-register-game-form">
                 <h1>Register</h1>
                 <form onSubmit={handleSubmit}>
                     <div className="form-group">
@@ -89,12 +93,12 @@ function RegisterForm() {
 
                     </div>
 
-                    {!passwordsMatch && <p style={{ color: 'red' }}>Passwords do not match</p>}
+                    {!passwordsMatch && <p style={{color: 'red'}}>Passwords do not match</p>}
 
                     <div className="form-group actions">
                         {passwordsMatch && <button type="submit" className="submit">Register</button>}
 
-                        <button type="button" className="cancel">Cancel</button>
+                        <button type="button" className="cancel" onClick={() => navigate("/")}>Cancel</button>
                     </div>
                 </form>
             </div>

src/services/UserService.js

@@ -5,14 +5,14 @@ import store from '../User/store'
 
 export const UserService = {
 
-  registerUser: async function (username, email, password, roleId) {
+  registerUser: async function (username, email, password) {
     return await Api.req(() => {return Api.post('Player/registerPlayer', {
       email: email,
       login: username,
       password: password,
     })})
   },
-  registerAdmin: async function (username, email, password, roleId) {
+  registerAdmin: async function (username, email, password) {
     return await Api.req(() => {return Api.post('Player/registerAdmin', {
       email: email,
       login: username,