From 03515ccd1c6af1bec1bcc4152d492aad1c105886 Mon Sep 17 00:00:00 2001
From: IO420 <IO@.com>
Date: Sun, 26 Oct 2025 18:38:08 -0600
Subject: [PATCH] fixed login styles and center all page

---
 src/app/styles/layout/agregarEquipo.scss |   6 +-
 src/app/styles/layout/escaner.scss       |   4 +-
 src/app/styles/layout/login.scss         | 195 +++++++++++++++--------
 src/components/Login.tsx                 |  22 ++-
 src/components/header.tsx                |   2 +-
 5 files changed, 144 insertions(+), 85 deletions(-)

diff --git a/src/app/styles/layout/agregarEquipo.scss b/src/app/styles/layout/agregarEquipo.scss
index c57a941..fe7a9c2 100644
--- a/src/app/styles/layout/agregarEquipo.scss
+++ b/src/app/styles/layout/agregarEquipo.scss
@@ -4,9 +4,13 @@
   margin: 0;
   width: 100%;
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .innerContainer {
     max-width: 1000px;
+    width: 1000px;
     margin: 0 auto;
     padding: 20px;
   }
@@ -50,7 +54,7 @@
         padding: 10px;
         border: 1px solid #ccc; /* Borde azul como en la imagen */
         border-radius: 6px;
-        font-size: 14px;
+        font-size: 15px;
         transition: border-color 0.2s ease;
         height: 40px;
 
diff --git a/src/app/styles/layout/escaner.scss b/src/app/styles/layout/escaner.scss
index 52d3eee..692e34b 100644
--- a/src/app/styles/layout/escaner.scss
+++ b/src/app/styles/layout/escaner.scss
@@ -1,5 +1,4 @@
 .dashboardContainer {
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -32,8 +31,11 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   padding: 30px 20px;
   gap: 20px;
+  width: 100%;
+  height: 100%;
 
   h3 {
     font-size: 16px;
diff --git a/src/app/styles/layout/login.scss b/src/app/styles/layout/login.scss
index 687646b..142cc1b 100644
--- a/src/app/styles/layout/login.scss
+++ b/src/app/styles/layout/login.scss
@@ -1,12 +1,64 @@
+.containerGrid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10vw;
+  width: 100%;
+}
+
+.login-container {
+  width: 350px;
+  padding: 1.5rem;
+  text-align: center;
+
+  h2 {
+    margin-bottom: 20px;
+    color: #bd8c01;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 10px;
+    border: 1px solid #003e79;
+    font-size: 2rem;
+  }
+
+  button {
+    width: 100%;
+    padding: 10px;
+    background-color: #004aad;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .error {
+    color: red;
+    margin-bottom: 10px;
+  }
+}
+
+.imageContainer {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 500px;
+  max-height: 450px;
+  border-radius: 10px;
+  overflow: hidden;
+  height: min-content;
+}
+
 .login-page {
   display: flex;
-  background-color: #fff;
-  padding: 0;
+  grid-template-columns: 1fr 1fr;
+  min-height: 100%;
+  margin: 0 100px;
   justify-content: center;
-  align-items: flex-start;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding-top: 2rem;
+  align-items: center;
+  gap: 150px;
 
   .login-form-container {
     width: 100%;
@@ -16,14 +68,13 @@
     flex-direction: column;
 
     align-items: center;
-    background-color: white;
 
     h2 {
       color: #bd8c01;
       font-size: 1.8rem;
       margin-bottom: 1.5rem;
       font-weight: 600;
-      text-align: center ;
+      text-align: center;
     }
 
     .input-group {
@@ -77,7 +128,7 @@
       font-size: 1rem;
       margin: 0.3rem 0;
       font-weight: 500;
-      text-align: center ;
+      text-align: center;
 
       &:hover {
         text-decoration: underline;
@@ -103,7 +154,7 @@
       }
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 50%;
         left: 0;
@@ -114,80 +165,86 @@
       }
     }
 
-
     .error {
       color: red;
       margin-bottom: 1rem;
       font-size: 0.9rem;
     }
   }
+}
 
-  .image-collage {
-    position: relative;
-    width: 50%;
-    height: 100%;
+.image-collage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 500px; /* o el tamaño que desees */
+  height: 450px;
+  overflow: hidden;
+  border-radius: 10px;
+
+  .collage-item {
+    position: absolute;
+    border-radius: 0;
     overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-    .collage-item {
-      position: absolute;
-      border-radius: 0;
-      overflow: hidden;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-
-      img {
-        object-fit: cover;
-        object-position: center;
-      }
+    img {
+      object-fit: cover;
+      object-position: sta;
     }
+  }
 
-    .collage-1 {
-      top: 0;
-      left: 0;
-      width: 60%;
-      height: 35%;
-      clip-path: polygon(0 0, 100% 0, 80% 68%, 0 68%);
-    }
+  .collage-1 {
+    top: -30px;
+    left: 0;
+    width: 60%;
+    height: 60%;
+    clip-path: polygon(0 0, 100% 0, 80% 68%, 0 68%);
+  }
 
-    .collage-2 {
-      top: 0;
-      right: 0;
-      width: 60%;
-      height: 26.5%;
-      clip-path: polygon(30% 0, 100% 0, 100% 90%, 13.5% 90%);
-    }
+  .collage-2 {
+    top: 0;
+    right: 0;
+    width: 60%;
+    height: 35%;
+    clip-path: polygon(30% 0, 100% 0, 100% 90%, 13.5% 90%);
+  }
 
-    .collage-3 {
-      top: 23.5%;
-      left: 0;
-      width: 60%;
-      height: 25.2%;
-      clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
-    }
+  .collage-3 {
+    bottom: 35%;
+    left: 0;
+    width: 60%;
+    height: 35%;
+    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
+  }
 
-    .collage-4 {
-      top: 23.5%;
-      right: 0;
-      width: 60%;
-      height: 25.2%;
-      clip-path: polygon(13% 0, 100% 0, 100% 100%, 30% 100%);
-    }
+  .collage-4 {
+    bottom: 35%;
+    right: 0;
+    width: 60%;
+    height: 35%;
+    clip-path: polygon(13% 0, 100% 0, 100% 100%, 30% 100%);
+  }
 
-    .collage-5 {
-      bottom: 32%;
-      left: 0;
-      width: 60%;
-      height: 20%;
-      clip-path: polygon(0 0, 97% 0, 80% 100%, 0 100%);
-    }
+  .collage-5 {
+    bottom: 0%;
+    left: 0;
+    width: 60%;
+    height: 35%;
+    clip-path: polygon(0 0, 97% 0, 80% 100%, 0 100%);
+  }
 
-    .collage-6 {
-      bottom: 32%;
-      right: 0;
-      width: 52%;
-      height: 20%;
-      clip-path: polygon(19.5% 0, 100% 0, 100% 100%, 0% 100%);
-    }
+  .collage-6 {
+    bottom: 0%;
+    right: 0;
+    width: 52%;
+    height: 35%;
+    clip-path: polygon(19.5% 0, 100% 0, 100% 100%, 0% 100%);
   }
 }
 
@@ -215,4 +272,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 2dc8d91..ac5b891 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -17,38 +17,34 @@ export default function Login() {
   };
 
   return (
-    <section className="login-page">
-      <div className="login-form-container">
-        <h2>Inicio sesión</h2>
+    <section className="containerGrid">
+      <div className="login-container">
+        <h2>Inicio de sesión</h2>
         {error && <p className="error">{error}</p>}
         <form onSubmit={handleSubmit}>
-          <div className="input-group">
+          <div>
             <label>Usuario</label>
             <input
               type="email"
-              placeholder="Ingresa tu usuario"
+              placeholder="Correo"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
             />
           </div>
-          <div className="input-group">
+          <div>
             <label>Contraseña</label>
             <input
               type="password"
-              placeholder="Ingresa tu usuario"
+              placeholder="Contraseña"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
             />
           </div>
           <button type="submit">Iniciar sesión</button>
-          <Link href="#" className="forgot-password">
-            Olvidaste Contraseña?
-          </Link>
-          <Link href="#" className="create-account">
-            Crear Cuenta
-          </Link>
+          <Link href={"#"}>Olvidaste Contraseña?</Link>
+          <Link href={"#"}>Crear Cuenta</Link>
         </form>
       </div>
 
diff --git a/src/components/header.tsx b/src/components/header.tsx
index ff06ddf..7c8648d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -30,7 +30,7 @@ function Header() {
           display: "flex",
           width: "100%",
           marginLeft: "40px",
-          marginTop: "45px",
+          marginTop: "40px",
           maxHeight: "50%",
           alignItems: "end",
         }}