From 1a47b68afec7369a05e72a148f828a8ea1fd64c4 Mon Sep 17 00:00:00 2001
From: NataliaCancinoV <nataliacancinovega@hotmail.com>
Date: Sun, 28 Apr 2024 18:02:31 -0600
Subject: [PATCH] Commit cambios LoginForm y css

---
 frontend/src/LoginForm.css |  20 ++++-
 frontend/src/LoginForm.jsx | 154 +++++++++++++++++++------------------
 2 files changed, 96 insertions(+), 78 deletions(-)

diff --git a/frontend/src/LoginForm.css b/frontend/src/LoginForm.css
index 3272372..f478c3c 100644
--- a/frontend/src/LoginForm.css
+++ b/frontend/src/LoginForm.css
@@ -48,7 +48,6 @@ body{
     height: 420px;
     overflow: hidden;
     z-index: 2;
-    
 }
 .login-container{
     position: absolute;
@@ -58,7 +57,6 @@ body{
     display: flex;
     flex-direction: column;
     transition: .5s ease-in-out;
-    gap: 7px;
 }
 .register-container{
     position: absolute;
@@ -85,6 +83,13 @@ body{
     display: flex;
     justify-content: center;
 }
+.top2 span{
+    color: #fff;
+    font-size: small;
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+}
 .two span a{
     font-weight: 500;
     color: #fff;
@@ -121,6 +126,7 @@ header{
     border-radius: 30px;
     outline: none;
     transition: .2s ease;
+    margin-bottom: 10px; /*para separar los componentes agregando un margen por debajo*/
 }
 .input-field:hover, .input-field:focus{
     background: rgba(255, 255, 255, 0.25);
@@ -130,6 +136,16 @@ header{
 }
 .input-box i{
     position: relative;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    top: -35px;
+    left: 17px;
+    color: #fff;
+}
+.input-box i{
+    position: relative;
+    margin-top: 10px;
+    margin-bottom: 10px;
     top: -35px;
     left: 17px;
     color: #fff;
diff --git a/frontend/src/LoginForm.jsx b/frontend/src/LoginForm.jsx
index dde21fe..bab252b 100644
--- a/frontend/src/LoginForm.jsx
+++ b/frontend/src/LoginForm.jsx
@@ -5,6 +5,7 @@ function LoginForm() {
   const [loginVisible, setLoginVisible] = useState(true);
   const [registerVisible, setRegisterVisible] = useState(false);
   const [passwordVisible, setPasswordVisible] = useState(false);
+
   const toggleLogin = () => {
     setLoginVisible(true);
     setRegisterVisible(false);
@@ -23,100 +24,101 @@ function LoginForm() {
     setRegisterVisible(false);
   };
 
+  
   return (
     <>
       <div className="wrapper">
-
-        <div className="form-box">
-
+        <div className="form-box">  
+          
           <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
-            <div className="top">
-              <span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
-              <header>Inicia Sesión</header>
-            </div>
-            <div className="input-box">
-              <input type="text" className="input-field" placeholder="Correo" />
-              <i className="bx bx-user"></i>
-            </div>
-            <div className="input-box">
-              <input type="password" className="input-field" placeholder="Contraseña" />
-              <i className="bx bx-lock-alt"></i>
-            </div>
-            <div className="input-box">
-              <input type="submit" className="submit" value="Entrar" />
-            </div>
-            <div className="two-col">
-              <div className="one">
-                <input type="checkbox" id="login-check" />
-                <label htmlFor="login-check"> Recuerdame</label>
+            <form>  
+              <div className="top">
+                <span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
+                <header>Inicia Sesión</header>
               </div>
-              <div className="two">
-                <span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
+              <div className="input-box">
+                <input type="text" className="input-field" placeholder="Correo" />
+                <i className="bx bx-user"></i>
               </div>
-            </div>
+              <div className="input-box">
+                <input type="password" className="input-field" placeholder="Contraseña" />
+                <i className="bx bx-lock-alt"></i>
+              </div>
+              <div className="input-box">
+                {/*<input type="submit" className="submit" value="Entrar" />*/}
+                <button type="button" className="submit">Entrar</button>
+              </div>
+              <div className="two-col">
+                <div className="one">
+                  <input type="checkbox" id="login-check" />
+                  <label htmlFor="login-check"> Recuerdame</label>
+                </div>
+                <div className="two">
+                  <span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
+                </div>
+              </div>
+            </form>
+            
           </div>
-
+          
           <div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
-            <div className="top">
-              <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
-              <header>Registrarse</header>
-            </div>
-            <div className="two-forms">
-              <div className="input-box">
-                <input type="text" className="input-field" placeholder="Nombre" />
-                <i className="bx bx-user"></i>
+            <form>  
+              <div className="top">
+                <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
+                <header>Registrarse</header>
+              </div>
+              <div className="two-forms">
+                <div className="input-box">
+                  <input type="text" className="input-field" placeholder="Nombre" />
+                  <i className="bx bx-user"></i>
+                </div>
+                <div className="input-box">
+                  <input type="text" className="input-field" placeholder="Apellido" />
+                  <i className="bx bx-user"></i>
+                </div>
               </div>
               <div className="input-box">
-                <input type="text" className="input-field" placeholder="Apellido" />
-                <i className="bx bx-user"></i>
+                <input type="text" className="input-field" placeholder="Correo" />
+                <i className="bx bx-envelope"></i>
               </div>
-            </div>
-            <div className="input-box">
-              <input type="text" className="input-field" placeholder="Correo" />
-              <i className="bx bx-envelope"></i>
-            </div>
-            <div className="input-box">
-              <input type="password" className="input-field" placeholder="Contraseña" />
-              <i className="bx bx-lock-alt"></i>
-            </div>
-            <div className="input-box">
-              <input type="submit" className="submit" value="Registrarse" />
-            </div>
-            <div className="two-col">
-              <div className="one">
-                <input type="checkbox" id="register-check" />
-                <label htmlFor="register-check"> Recuerdame</label>
+              <div className="input-box">
+                <input type="password" className="input-field" placeholder="Contraseña" />
+                <i className="bx bx-lock-alt"></i>
               </div>
-            </div>
+              <div className="input-box">
+                {/*<input type="submit" className="submit" value="Registrarse"/>*/}
+                <button type="button" className="submit">Registrarse</button>
+              </div>
+              <div className="two-col">
+                <div className="one">
+                  <input type="checkbox" id="register-check" />
+                  <label htmlFor="register-check"> Recuerdame</label>
+                </div>
+              </div>
+            </form>
           </div>
-
+          
           <div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
-            <div className="top2">
-              <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
-              <header>Recuperar Contraseña</header>
-            </div>
-            <div className="two-forms">
-              <div className="input-box">
-                <input type="text" className="input-field" placeholder="Nombre" />
-                <i className="bx bx-user"></i>
+            <form>  
+              <div className="top2">
+                <span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
+                <header>Recuperar Contraseña</header>
               </div>
               <div className="input-box">
-                <input type="text" className="input-field" placeholder="Apellido" />
-                <i className="bx bx-user"></i>
+                <input type="text" className="input-field" placeholder="Correo" />
+                <i className="bx bx-envelope"></i>
               </div>
-            </div>
-            <div className="input-box">
-              <input type="text" className="input-field" placeholder="Correo" />
-              <i className="bx bx-envelope"></i>
-            </div>
-            <div className="input-box">
-              <input type="password" className="input-field" placeholder="Nueva contraseña" />
-              <i className="bx bx-lock-alt"></i>
-            </div>
-            <div className="input-box">
-              <input type="submit" className="submit" value="Cambiar contraseña" />
-            </div>
+              <div className="input-box">
+                <input type="password" className="input-field" placeholder="Nueva contraseña" />
+                <i className="bx bx-lock-alt"></i>
+              </div>
+              <div className="input-box">
+                {/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
+                <button type="button" className="submit">Cambiar contraseña</button>
+              </div>
+            </form>
           </div>
+          
         </div>
       </div>
     </>