Actualizaciñon css estadísticas

webapp/src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import AuthProvider from './components/login/AuthProvider';
 import Routes from './components/Routes';
+import Footer from "./components/footer/Footer"; 
 
 function App() {
 
@@ -9,7 +10,9 @@ function App() {
     <AuthProvider>
       <Routes />
     </AuthProvider>
+
     </main> 
+
   );
 }
 

webapp/src/components/Statistics.css

@@ -1,7 +1,9 @@
  /* Estilo para las celdas de la tabla */
  th, td {
-  padding: 1em;
   text-align: center;
+  color: #EE0E50; 
+  padding: 2vh 3vh; /* espaciado de las celdas */
+  border-bottom: vh solid #EE0E51; /* Borde inferior */
 }
 
 /* Estilo para el encabezado de la tabla */
@@ -17,7 +19,19 @@ th {
 /* Estilo para las filas al pasar el ratón */
 
 .principal{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   height: 100vh; /* Ocupar toda la altura de la pantalla */
   width: 100vw;  /* Ocupar toda la anchura de la pantalla */
   background-color: #fff;
-}
+}
+.principal p {
+  font-size: 1.2rem; /* Tamaño de fuente */
+  margin-bottom: 20px; /* Espacio debajo del mensaje */
+  color: #333; /* Color de texto */
+  font-weight: bold;
+}
+.table-stats{
+width: 50%;
+}

webapp/src/components/Statistics.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './Statistics.css';
 
+
 const Statistics= () => {
   const gatewayEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
   const [userData, setUserData] = useState(null);
@@ -25,9 +26,11 @@ const Statistics= () => {
       <div className="title">
         <img src="/estadisticas.png" alt="Título como imagen" className="title-image" />
         </div>
+
       {error ? ( // Verificar si hay un error
       <p>Error: {error}</p>
     ) : userData ? (
+      <div className='table.stats'> 
         <table>
           <thead>
             <tr>
@@ -46,14 +49,16 @@ const Statistics= () => {
             </tr>
           </tbody>
         </table>
-
+        </div>
       ) : (
         <p>Cargando estadísticas...</p>
       )}
 
     </div>
 
+
   );
+
 }
 
 export default Statistics;