Avances en la UI

Arquisoft · Feb 4, 2024 · 01c2d03 · 01c2d03
1 parent 2c627e5
commit 01c2d03
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 19 deletions.
diff --git a/webapp/src/App.css b/webapp/src/App.css
@@ -2,7 +2,6 @@
   height: 90vh;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: center;
   text-align: center;
 }
@@ -34,8 +33,7 @@ input, button, a{
 }
 
 input:hover, button:hover, a:hover {
-  color: #fff;
-  background-color: #1A1A1A;
-  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
-  transform: translateY(-2px);
+  background-color: #00ffc0;
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0;
+    box-shadow: 0 0 0 0 #000,0 0 0 2px #00ffc0
 }
diff --git a/webapp/src/components/Login/Login.css b/webapp/src/components/Login/Login.css
@@ -6,4 +6,8 @@
 
 .login-container h1{
     text-align: center;
+}
+
+a{
+    box-shadow: none;
 }
diff --git a/webapp/src/pages/Authenticate/Authenticate.js b/webapp/src/pages/Authenticate/Authenticate.js
@@ -5,6 +5,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import Footer from '../../components/Footer/Footer.js';
 
 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 import { PrivateRoute, useAuth } from 'react-auth-kit';
@@ -34,6 +35,7 @@ function Authenticate() {
           </Link>
         )}
       </Typography>
+      <Footer />
     </Container>
   );
 }

diff --git a/webapp/src/pages/Clasico/Clasico.css b/webapp/src/pages/Clasico/Clasico.css
@@ -2,6 +2,12 @@ body {
   font-family: "Consolas", sans-serif;
 }
 
+.menuContainer{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .container h1 {
   text-align: center;
 }

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
@@ -4,6 +4,7 @@ import Preguntas from "../../components/Preguntas";
 import { useNavigate } from "react-router-dom";
 import Nav from '../../components/Nav/Nav.js';
 import { Link } from 'react-router-dom';
+import Footer from "../../components/Footer/Footer.js";
 
 const JuegoPreguntas = () => {
   const [indicePregunta, setIndicePregunta] = useState(0);
@@ -77,20 +78,20 @@ const JuegoPreguntas = () => {
     setMostrarMenu(false);
   };
 
-  const handleVolverAlMenu = () => {
-    navigate("../home");
-  };
-
   if (mostrarMenu) {
     return (
-      <div className="menuContainer">
-        <h2>¡Juego terminado!</h2>
-        <p>
-          Tu puntuación: {puntuacion}/{Preguntas.length}
-        </p>
-        <button onClick={handleRepetirJuego}>Repetir Juego</button>
-        <Link to="home">Volver al Menú Principal</Link>
-      </div>
+      <>
+        <Nav />
+        <div className="menuContainer">
+          <h2>¡Juego terminado!</h2>
+          <p>
+            Tu puntuación: {puntuacion}/{Preguntas.length}
+          </p>
+          <button onClick={handleRepetirJuego}>Repetir Juego</button>
+          <Link to="/home">Volver al Menú Principal</Link>
+        </div>
+        <Footer />
+      </>
     );
   }
 
@@ -115,6 +116,7 @@ const JuegoPreguntas = () => {
         <div className="timer">Tiempo restante: {tiempoRestante}</div>
         <div className="points">Puntuación: {puntuacion}</div>
       </div>
+      <Footer />
     </>
   );
 };

diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css
@@ -5,12 +5,14 @@
 }
 
 ul{
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     grid-template-columns: 1fr;
     list-style-type: none;
     text-align: center;
     gap: 1rem;
-    margin: auto;
+    margin: 1rem;
     padding: 0;
 }
 

diff --git a/webapp/src/pages/WrongRoute/WrongRoute.css b/webapp/src/pages/WrongRoute/WrongRoute.css
@@ -2,6 +2,7 @@
     width: 90%;
     display: flex;
     justify-content: center;
+    margin: auto 0;
 }
 
 #notfound .notfound-bg>div {