From b97569feaf28be63c770fa7a69818c1be937a65a Mon Sep 17 00:00:00 2001
From: iyanfdezz <uo288231@uniovi.es>
Date: Thu, 7 Mar 2024 22:41:43 +0100
Subject: [PATCH] CSS fixes

---
 webapp/src/pages/Stats/Stats.css |  95 ++++++++++++++++++--------
 webapp/src/pages/Stats/Stats.js  | 113 ++++++++++++++-----------------
 2 files changed, 120 insertions(+), 88 deletions(-)

diff --git a/webapp/src/pages/Stats/Stats.css b/webapp/src/pages/Stats/Stats.css
index a2d1506e..e87e5e7a 100644
--- a/webapp/src/pages/Stats/Stats.css
+++ b/webapp/src/pages/Stats/Stats.css
@@ -1,27 +1,68 @@
-input, button, a{
-    appearance: none;
-    background-color: transparent;
-    border: 0.13rem solid #0F0F0F;
-    border-radius: 15px;
-    box-sizing: border-box;
-    color: #0F0F0F;
-    padding: 1rem;
-    text-align: center;
-    text-decoration: none;
-    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    width: 100%;
-    will-change: transform;
-    -webkit-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    -moz-box-shadow: 10px 10px 6px 0px rgba(0,255,192,1);
-    box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
-  }
-
-  strong {
-    font-size: 18px;
-    color: #6b456c;
-    font-family: "Times New Roman", serif;
-
-}
\ No newline at end of file
+/* Stats.css */
+body {
+  font-family: 'Arial', sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  font-family: 'Arial', sans-serif;
+  color: #333;
+}
+
+p {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  color: #666;
+}
+
+#usernameInput {
+  margin-bottom: 2rem;
+  
+}
+
+#usernameInput input[type="text"] {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+
+table {
+  width: 100%;
+  border: 1px solid rgba(0,255,192,1);
+  border-radius: 15px;
+  border-collapse: collapse;
+  background-color: #f9f9f9;
+  box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
+}
+
+table th,
+table td {
+  border: 1px solid rgba(0,255,192,1);
+  padding: 0.75rem;
+  text-align: center;
+}
+
+table th {
+  background-color: #eee;
+  font-weight: bold;
+  color: #333;
+  box-shadow: 5px 5px 6px 0px rgba(0,255,192,1);
+}
+
+table td {
+  font-size: 1rem;
+  color: #555;
+}
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index f9e5117c..511654e1 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -81,72 +81,63 @@ const Stats = () => {
 
   return (
     <>
-      <Nav />
-      <div>
-        <h2>Estadísticas de Usuario</h2>
-        <label htmlFor="usernameInput">
-          {" "}
-          <strong>Nombre de Usuario: </strong>
-        </label>
-        <input
-          type="text"
-          id="usernameInput"
-          value={username}
-          onChange={handleUsernameChange}
-        />
-        {stats === null && !isLoading && (
+    <Nav />
+    <div>
+      <h2>Estadísticas de Usuario</h2>
+      <label htmlFor="usernameInput"> <strong>Nombre de Usuario: </strong></label>
+      <input
+        type="text"
+        id="usernameInput"
+        value={username}
+        onChange={handleUsernameChange}
+      />
+      {stats === null && !isLoading && (
           <div>
             <p>El usuario no ha jugado ninguna partida.</p>
           </div>
         )}
-        {stats && (
-          <div>
-            <hr></hr>
-            <p>
-              <strong>Usuario: </strong>
-              {stats.username}
-            </p>
-            <pre>
-              {" "}
-              <strong>Juegos Jugados: </strong>
-              {stats.nGamesPlayed}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Promedio de Puntos: </strong>
-              {stats.avgPoints}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Puntos Totales: </strong>
-              {stats.totalPoints}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Preguntas Correctas Totales: </strong>
-              {stats.totalCorrectQuestions}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Preguntas Incorrectas Totales: </strong>
-              {stats.totalIncorrectQuestions}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Ratio Correctas/Incorrectas: </strong>
-              {stats.ratioCorrectToIncorrect}
-            </pre>
-            <pre>
-              {" "}
-              <strong>Tiempo por pregunta (s): </strong>
-              {stats.avgTime}
-            </pre>
-            <hr></hr>
-          </div>
-        )}
-      </div>
-      <Footer />
+      {stats && (
+        <div>
+          <table>
+            <tr>
+              <td><strong>Usuario:</strong></td>
+              <td>{stats.username}</td>
+            </tr>
+            <tr>
+              <td><strong>Juegos Jugados:</strong></td>
+              <td>{stats.nGamesPlayed}</td>
+            </tr>
+            <tr>
+              <td><strong>Promedio de Puntos:</strong></td>
+              <td>{stats.avgPoints.toFixed(2)}</td>
+             </tr>
+            <tr>
+              <td><strong>Puntos Totales:</strong></td>
+              <td>{stats.totalPoints}</td>
+            </tr>
+            <tr>
+              <td><strong>Preguntas Correctas Totales:</strong></td>
+              <td>{stats.totalCorrectQuestions}</td>
+            </tr>
+            <tr>
+              <td><strong>Preguntas Incorrectas Totales:</strong></td>
+              <td>{stats.totalIncorrectQuestions}</td>
+            </tr>
+            <tr>
+              <td><strong>Ratio Correctas/Incorrectas:</strong></td>
+              <td>{stats.ratioCorrectToIncorrect.toFixed(2)}</td>
+            </tr>
+            <tr>
+              <td><strong>Tiempo por pregunta (s):</strong></td>
+              <td>{stats.avgTime.toFixed(2)}</td>
+            </tr>
+          </table>
+        </div>
+      )}
+    </div>
+    <Footer />
     </>
+    
   );
 };