Mejorar UI

webapp/src/App.css

@@ -64,3 +64,12 @@ a:hover {
   -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
   box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
 }
+
+.logo {
+  font-family: oswald, sans-serif;
+  width: 100%;
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 4px 4px 0 var(--shadow);
+}

webapp/src/components/Footer/Footer.css

@@ -0,0 +1,4 @@
+.footer{
+    border-top: 3px solid var(--borders);
+    width: 100%;
+}

webapp/src/components/Footer/Footer.js

@@ -3,7 +3,7 @@ import './Footer.css';
 
 const Footer = () => {
     return(
-        <footer>
+        <footer className="footer">
             <h2>WIQ!</h2>
             <p>Copyright 2024 ® Grupo 1A de Arquitectura del Software</p>
         </footer>

webapp/src/components/Login/Login.css

@@ -1,7 +1,13 @@
+.main .logo{
+    margin-top: 3rem;
+}
+
 .login-container {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
+    justify-content: center;
+    margin: auto 0;
 }
 
 .login-container h1{

webapp/src/components/Login/Login.js

@@ -1,81 +1,75 @@
 // src/components/Login.js
-import React, { useState } from 'react';
-import axios from 'axios';
-import {useNavigate} from "react-router-dom";
-import './Login.css';
-
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import "./Login.css";
 
 const Login = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const [loginSuccess, setLoginSuccess] = useState(false);
   //const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
   const navigate = useNavigate();
 
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const apiEndpoint =
+    process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
   const loginUser = async () => {
-    try {
-      const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-      console.log(response);
-      // Extract data from the response
-      //const { createdAt: userCreatedAt } = response.data;
-      const token = response.data;
-
-      //setCreatedAt(userCreatedAt);
-      setLoginSuccess(true);
+    await axios
+      .post(`${apiEndpoint}/login`, { username, password })
+      .then((response) => {
+        const token = response.data;
 
-      setOpenSnackbar(true);
-      localStorage.setItem('token', token);
+        setLoginSuccess(true);
 
-      localStorage.setItem('username', username);
+        setOpenSnackbar(true);
+        localStorage.setItem("token", token);
 
-    } catch (error) {
-      //console.log(error);
-      setError(error.response.data.error);
-    }
+        localStorage.setItem("username", username);
+      })
+      .catch((err) => {
+        setError(err.message);
+      });
   };
 
   return (
-    <div className="login-container">
-      {loginSuccess ? (
-        navigate("/home")
-      ) : (
-        <>
-          <h1 className="login-header">Login</h1>
-          <input
-            className="login-input"
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <input
-            className="login-input"
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <button className="login-button" onClick={loginUser}>
-            Login
-          </button>
-          {openSnackbar && (
-            <div className="login-snackbar">
-              Login successful
-            </div>
-          )}
-          {error && (
-            <div className="login-error">
-              Error: {error}
-            </div>
-          )}
-        </>
-      )}
+    <div className="main">
+      <div className="login-container">
+        {loginSuccess ? (
+          navigate("/home")
+        ) : (
+          <>
+            <h1 className="login-header">Identifícate</h1>
+            <label for="login-username">Introduce tu nombre:</label>
+            <input
+              className="login-input"
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+            <label for="login-password">Introduce tu contraseña:</label>
+            <input
+              className="login-input"
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <button className="login-button" onClick={loginUser}>
+              Login
+            </button>
+            {openSnackbar && (
+              <div className="login-snackbar">Login successful</div>
+            )}
+            {error && <div className="login-error">Error: {error}</div>}
+          </>
+        )}
       </div>
-    )
-}  
+    </div>
+  );
+};
 
 export default Login;

webapp/src/components/Nav/Nav.css

@@ -1,43 +1,42 @@
-.logo {
-  font-family: oswald, sans-serif;
-  width: 100%;
-  font-size: 5rem;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 4px 4px 0 var(--shadow);
+nav .logo{
+  margin-left: 3rem;
 }
 
 nav {
-  width: 80vw;
-  display: flex;
-  flex-wrap: wrap;
-  border: 3px solid var(--borders);
-  border-radius: 1rem;
-  padding: 1rem;
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  border-bottom: 3px solid var(--borders);
+  justify-content: space-between;
+  align-items: center;
+}
+
+nav * {
   margin: 1rem;
-  justify-content: center;
-  -webkit-box-shadow: 10px 10px 5px 0px var(--shadow);
-  -moz-box-shadow: 10px 10px 5px 0px var(--shadow);
-  box-shadow: 10px 10px 5px 0px var(--shadow);
 }
 
-nav ul {
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
+.menuItems *, .rightItems * {
+  height: 100%;
 }
 
-nav li {
-  display: flex;
-  flex-direction: row;
+.rightItems{
+  display: grid;
+  grid-auto-flow: column;
+  column-gap: 2rem;
+  align-items: center;
+}
+
+.disconnect{
+  margin-left: auto;
 }
 
 .theme-toggle{
-  width: 5%;
-  height: 10%;
-  margin-left: 90%;
+  background-size: contain;
 }
 
-.disconnect{
-  margin-left: 70%;
+.progressBar{
+  background-color: var(--shadow);
+  height: 1rem;
+  border-radius: 1rem;
+  margin-top: 0.5rem;
 }

webapp/src/components/Nav/Nav.js

@@ -5,11 +5,10 @@ import "./Nav.css";
 const Nav = () => {
   // Definimos el estado para controlar el tema actual
   const [isDarkTheme, setIsDarkTheme] = useState(false);
-  const navigate = useNavigate()
-  
+  const navigate = useNavigate();
+
   // Función para alternar entre temas claro y oscuro
   const toggleTheme = () => {
-
     const root = document.getElementById("root");
     const currentTheme = root.getAttribute("data-theme");
     const newTheme = currentTheme === "light" ? "dark" : "light";
@@ -19,31 +18,35 @@ const Nav = () => {
 
   const Logout = () => {
     localStorage.removeItem("token");
-    navigate("/")
+    navigate("/");
   };
 
   return (
     <nav>
-      <input
-        type="checkbox"
-        class="theme-toggle"
-        onChange={toggleTheme}
-        checked={isDarkTheme}
-        value="Texto dentro del input"
-      />
       <h1 className="logo">WIQ!</h1>
-      <ul>
-        <li>
-          <Link to="/home">Home</Link>
-        </li>
-        <li>
-          <Link to="/sobre">Sobre nosotros</Link>
-        </li>
-        <li>
-          <Link to="/stats">Stats</Link>
-        </li>
-      </ul>
-      <button class="disconnect" onClick={() => Logout()}>Desconectarse</button>
+      <div className="menuItems">
+        <Link to="/home">Home</Link>
+        <Link to="/sobre">Sobre nosotros</Link>
+        <Link to="/stats">Stats</Link>
+        <Link to="/ranking">Ránking</Link>
+      </div>
+      <div className="rightItems">
+        <input
+          type="checkbox"
+          class="theme-toggle"
+          onChange={toggleTheme}
+          checked={isDarkTheme}
+        />
+        <button className="profile">
+          Perfil
+        </button>
+        <button className="profile">
+          Opciones
+        </button>
+        <button className="disconnect" onClick={() => Logout()}>
+          Desconectarse
+        </button>
+      </div>
     </nav>
   );
 };

webapp/src/components/Register/Register.css

@@ -0,0 +1,15 @@
+.register-container{
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.register-container label{
+    margin-top: 1rem;
+}
+
+.register-button{
+    box-shadow: none;
+}