Más mejoras en la UI

webapp/src/App.css

@@ -3,6 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: center;
 }
 
 h1{

webapp/src/pages/Clasico/Clasico.css

@@ -1,37 +1,41 @@
-body{
-    font-family: "Consolas", sans-serif;
+body {
+  font-family: "Consolas", sans-serif;
 }
 
-.container h1{
-    text-align: center;
+.container h1 {
+  text-align: center;
 }
 
-.questionContainer{
-    display: grid;
-    justify-content: center;
-    align-items: center;
+.questionContainer {
+  display: grid;
+  justify-content: center;
+  align-items: center;
 }
 
 .responsesContainer {
-    display: grid;
-    justify-content: center;
-    grid-template-columns: repeat(2, 1fr); 
-    grid-template-rows: repeat(2, 1fr); 
-    gap: 1rem;
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+button{
+  margin: 0.25rem;
 }
 
 /* CSS */
 .responsesContainer button {
   appearance: none;
   background-color: transparent;
-  border: 0.13rem solid #0F0F0F;
+  border: 0.13rem solid #0f0f0f;
   border-radius: 15px;
   box-sizing: border-box;
-  color: #0F0F0F;
+  color: #0f0f0f;
   padding: 1rem;
   text-align: center;
   text-decoration: none;
-  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
@@ -45,12 +49,12 @@ body{
 
 .responsesContainer button:hover {
   color: #fff;
-  background-color: #1A1A1A;
+  background-color: #1a1a1a;
   box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
   transform: translateY(-2px);
 }
 
 .responsesContainer button:active {
   box-shadow: none;
   transform: translateY(0);
-}
+}

webapp/src/pages/Clasico/Clasico.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import './Clasico.css';
-import Preguntas from '../../components/Preguntas';
-import { useNavigate  } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import "./Clasico.css";
+import Preguntas from "../../components/Preguntas";
+import { useNavigate } from "react-router-dom";
 
 const JuegoPreguntas = () => {
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -20,7 +20,7 @@ const JuegoPreguntas = () => {
       }, 3000);
     }
     const timer = setInterval(() => {
-      setTiempoRestante(prevTiempo => prevTiempo <= 0 ? 0 : prevTiempo - 1);
+      setTiempoRestante((prevTiempo) => (prevTiempo <= 0 ? 0 : prevTiempo - 1));
     }, 1000);
     return () => clearInterval(timer);
   }, [tiempoRestante, indicePregunta]);
@@ -40,13 +40,13 @@ const JuegoPreguntas = () => {
   const estiloRespuesta = (respuesta) => {
     if (juegoTerminado) {
       if (respuesta === preguntaActual.respuestaCorrecta) {
-        return { backgroundColor: 'green' };
+        return { backgroundColor: "green" };
       } else if (respuesta === respuestaSeleccionada) {
-        return { backgroundColor: 'red' };
+        return { backgroundColor: "red" };
       }
     } else {
       if (respuesta === respuestaSeleccionada) {
-        return { backgroundColor: 'orange' };
+        return { backgroundColor: "orange" };
       }
     }
     return {};
@@ -76,14 +76,16 @@ const JuegoPreguntas = () => {
   };
 
   const handleVolverAlMenu = () => {
-    navigate('../home');
+    navigate("../home");
   };
 
   if (mostrarMenu) {
     return (
       <div className="menuContainer">
         <h2>¡Juego terminado!</h2>
-        <p>Tu puntuación: {puntuacion}/{Preguntas.length}</p>
+        <p>
+          Tu puntuación: {puntuacion}/{Preguntas.length}
+        </p>
         <button onClick={handleRepetirJuego}>Repetir Juego</button>
         <button onClick={handleVolverAlMenu}>Volver al Menú Principal</button>
       </div>

webapp/src/pages/Home/Home.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import './Home.css';
+import React from "react";
+import "./Home.css";
 import { Link } from "react-router-dom";
 
 const Home = () => {
-    return (
-        <div className='games-container'>
-            <h1>Bienvenido a WIQ. Selecciona un modo de juego</h1>
-            <ul>
-                <a href="clasico">Clásico</a>
-                <a href="bateria">Batería de sabios</a>
-                <a href="descartando">Descartando</a>
-                <a href="pregunta">La pregunta caliente</a>
-                <a href="descubriendo">Descubriendo ciudades</a>
-            </ul>
-        </div>
-    )
-}
+  return (
+    <div className="games-container">
+      <h1>Bienvenido a WIQ. Selecciona un modo de juego</h1>
+      <ul>
+        <a href="clasico">Clásico</a>
+        <a href="bateria">Batería de sabios</a>
+        <a href="descartando">Descartando</a>
+        <a href="pregunta">La pregunta caliente</a>
+        <a href="descubriendo">Descubriendo ciudades</a>
+      </ul>
+    </div>
+  );
+};
 
-export default Home;
+export default Home;

webapp/src/pages/WrongRoute/WrongRoute.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import './WrongRoute.css';
+import React from "react";
+import "./WrongRoute.css";
 
 const WrongRoute = () => {
-    return(
-        <div className="notFoundContainer">
-            <h1>404</h1>
-            <p>Página no encontrada</p>
-        </div>
-    );
-}
+  return (
+    <div className="notFoundContainer">
+      <h1>404</h1>
+      <p>Página no encontrada</p>
+    </div>
+  );
+};
 
-export default  WrongRoute;
+export default WrongRoute;