Modificaciones CSS WebApp

questionService/package.json

@@ -13,6 +13,6 @@
   "dependencies": {
     "axios": "^1.6.7",
     "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "express": "^4.18.3"
   }
 }

webapp/package.json

@@ -16,6 +16,7 @@
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
     "react-router-bootstrap": "^0.26.2",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },

webapp/src/App.css

@@ -1,10 +1,12 @@
 .App {
   text-align: center;
+  background-color: #282c34;
 }
 
 .App-logo {
   height: 40vmin;
   pointer-events: none;
+  animation: App-logo-spin infinite 20s linear;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -14,7 +16,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #6A48C4;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -38,5 +40,7 @@
 }
 
 .h1 {
-  color: #6A48C4
+  color: #FFFFFF; /* Cambiamos el color del título a blanco para que contraste con el fondo */
+  font-size: 3em; /* Aumentamos el tamaño del título */
 }
+

webapp/src/components/Estilos/home.css

@@ -0,0 +1,42 @@
+/* src/Estilos/home.css */
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+/* Estilizamos el título del juego */
+.titulo {
+    /* Cambiamos el color del texto a un tono de azul */
+    color: #efeff1;
+    /* Aumentamos el tamaño de la fuente */
+    font-size: 10em;
+    /* Añadimos un margen inferior para separar el título de los botones */
+    margin-bottom: 0.5em;
+    font-family: 'Monaco', monospace;
+}
+
+/* Estilizamos el contenedor de los botones */
+.button-container {
+    /* Cambiamos la dirección de los elementos a columna para que los botones se apilen verticalmente */
+    display: flex;
+    flex-direction: column;
+    /* Añadimos un espacio entre los botones */
+    gap: 1em;
+}
+
+/* TODO: CORREGIR ESTA REGLA */
+/* Estilizamos los botones */
+.button {
+    /* Aumentamos el tamaño de la fuente */
+    font-size: 3em; 
+    /* Añadimos padding para dar más espacio alrededor del texto del botón */
+    padding: 2em 4em; 
+}
+
+#btJugar, #btEstadisticas{
+    /* Aumentamos el tamaño de la fuente */
+    font-size: 2em; 
+    font-weight: 400;
+    /* Añadimos padding para dar más espacio alrededor del texto del botón */
+    padding: 1em 4em; 
+    font-family:'Trebuchet MS';
+}
+

webapp/src/components/Estilos/juego.css

@@ -1,10 +1,13 @@
 #botonSiguiente{
-    width: 200px;
-    padding: 10px 20px;
+    width: 6em;
+    font-size: 2em;
+    padding: 0.1em;
+    margin-top: 1em;
     color: #ffffff; /* Color del texto */
     background-color: #4CAF50; /* Color de fondo verde */
     border: 2px solid #4CAF50; /* Borde verde */
-    }
+    text-align: center;
+}
 
 .temporizador {
       position: fixed;