Merge pull request #172 from Arquisoft/cambiosInterfaz2

Ajustes de interfaz
Arquisoft · Apr 27, 2024 · 5e8065d · 5e8065d
2 parents 2ed2ac3 + cc7281c
commit 5e8065d
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 19 deletions.
diff --git a/webapp/src/components/Home.css b/webapp/src/components/Home.css
@@ -33,7 +33,7 @@
 
 .imagenHome{
     padding-top: 10vh;
-    padding-bottom: 10vh;
+    padding-bottom: 5vh;
 }
 
 .row 
@@ -63,6 +63,8 @@
 #param > h2
 {
     text-align: center;
-    background-color: #fff;
+    background-color: #ffffff85;
     border-radius: 0.5em;
-}
+    font-weight: 800;
+    font-size: 1.8rem;
+}
diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js
@@ -8,6 +8,6 @@ test('renders navbar', () => {
   const linkElement = screen.getByText("Home");
   expect(linkElement).toBeInTheDocument();
 
-  const linkElement2 = screen.getByText("Login");
+  const linkElement2 = screen.getByText("Ranking");
   expect(linkElement2).toBeInTheDocument();
 });
diff --git a/webapp/src/components/Parameters.js b/webapp/src/components/Parameters.js
@@ -29,7 +29,7 @@ function Parameters(){
 
   return (
     <Container className='boxHome' maxWidth="xs" id='param'>
-        <h2>
+        <h2 className='titulos-menu-home'>
           Parámetros Actuales
         </h2>
         <ul>
@@ -44,10 +44,10 @@ function Parameters(){
         defaultValue={"9|150"}
         value={selectedValue} 
         onChange={cambioPara}>
-            <FormControlLabel value="9|120" control={<Radio />} label="Predeterminado" id="predeterminado"/>              
-            <FormControlLabel value="4|60" control={<Radio />} label="Partida Corta" id="corta"/>                           
-            <FormControlLabel value="11|150" control={<Radio />} label="Partida Media" id="media"/>                          
-            <FormControlLabel value="19|240" control={<Radio />} label="Partida Larga" id="larga"/>           
+            <FormControlLabel value="9|120" control={<Radio sx={{color: 'var(--rosa)','&.Mui-checked': {color: 'var(--rosa)',},}} />} label="Predeterminado" id="predeterminado"/>              
+            <FormControlLabel value="4|60" control={<Radio sx={{color: 'var(--rosa)','&.Mui-checked': {color: 'var(--rosa)',},}}/>} label="Partida Corta" id="corta"/>                           
+            <FormControlLabel value="11|150" control={<Radio sx={{color: 'var(--rosa)','&.Mui-checked': {color: 'var(--rosa)',},}}/>} label="Partida Media" id="media"/>                          
+            <FormControlLabel value="19|240" control={<Radio sx={{color: 'var(--rosa)','&.Mui-checked': {color: 'var(--rosa)',},}}/>} label="Partida Larga" id="larga"/>           
         </RadioGroup>
         </FormControl>        
     </Container>

diff --git a/webapp/src/components/Ranking.css b/webapp/src/components/Ranking.css
@@ -6,8 +6,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100vh;; /* Ocupar toda la altura de la pantalla */
+    height: 100vh; /* Ocupar toda la altura de la pantalla */
     width: 100%;  /* Ocupar toda la anchura de la pantalla */
+    /*linear-gradient(0deg,#f000,#ee0e5173),linear-gradient(0deg,#f000,#ee0e5173); */
     background-image: url('./stats4.jpeg'); 
 }
 

diff --git a/webapp/src/components/gameModes/ModeSelection.css b/webapp/src/components/gameModes/ModeSelection.css
@@ -8,8 +8,10 @@
 
   .modos-container h2{
     text-align: center;
-    background-color: #fff;
+    background-color: #ffffff85;
     border-radius: 0.5em;
+    font-weight: 800;
+    font-size: 1.8rem;
   }
 
   .modos-list {

diff --git a/webapp/src/components/login/Login.css b/webapp/src/components/login/Login.css
@@ -21,7 +21,7 @@
     margin-top: 7px;
     height: 0.5em;
     border-radius: 9em;
-    background: var(--primero);
+    background: var(--rosa);
     align-self: center;
   }
 
@@ -33,11 +33,11 @@
   }
 
   .login-container button {
-    background-color: var(--primero);
+    background-color: var(--rosa);
   }
 
   .login-container button:hover {
-    background-color: var(--primero-oscuro);
+    background-color: var(--rosa-oscuro);
   }
   body {
     height: 10vh;
@@ -65,7 +65,8 @@
   }
 
   .boton-registrar{
-    color:#1976d2!important;
+    /*#1976d2*/
+    color: #1976d2!important;
   }
 
   .titulo{

diff --git a/webapp/src/components/register/AddUser.css b/webapp/src/components/register/AddUser.css
@@ -20,7 +20,7 @@
   margin-top: 7px;
   height: 0.5em;
   border-radius: 9px;
-  background: var(--primero);
+  background: var(--rosa);
   align-self: center;
 }
 
@@ -32,11 +32,11 @@
 }
 
 .register-container button {
-  background-color: var(--primero);
+  background-color: var(--rosa);
 }
 
 .register-container button:hover {
-  background-color: var(--primero);
+  background-color: var(--rosa-oscuro);
 }
 
 body {

diff --git a/webapp/src/components/register/AddUser.js b/webapp/src/components/register/AddUser.js
@@ -63,7 +63,7 @@ const AddUser = () => {
   };
 
   return (
-    <Container component="main" maxWidth="xs"  className='container'>
+    <Container component="main" maxWidth="xs"  className='container-login'>
       <div className="register-container" >
         <div className='text'>
           <Typography variant="h4">

diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -14,6 +14,7 @@ code {
 
 :root {
   --rosa: #EE0E51;
+  --rosa-oscuro: #b6214d;
   --primero: #5680e9;
   --primero-oscuro: #3f5daa;
   --segundo: #CF79DC;