feat(login): update login page styles and integrate neutral button variant

This commit is contained in:
2026-07-02 15:25:43 -03:00
parent 93d49fc7e6
commit 4cbf87feb1
3 changed files with 33 additions and 8 deletions

View File

@@ -5,7 +5,9 @@
<article class="card border-0 shadow-lg rounded-4">
<div class="card-body p-4 p-md-5">
<header class="text-center mb-4">
<h1 id="login-title" class="h5 fw-bold text-uppercase mb-0">Iniciar sesion</h1>
<h1 id="login-title" class="fw-bold text-uppercase mb-0" style="font-size: 17px; color: #666666;">
Iniciar sesion
</h1>
</header>
<form class="d-grid gap-3" novalidate aria-labelledby="login-title">
@@ -17,7 +19,11 @@
<label class="visually-hidden" for="login-password">Contrasena</label>
<app-input id="login-password" type="password" placeholder="Contrasena" />
<div class="text-end">
<button type="button" class="btn btn-link p-0 border-0 text-decoration-none small text-secondary">
<button
type="button"
class="btn btn-link p-0 border-0 text-decoration-none"
style="font-size: 12px; font-weight: 325; color: #A0A0A0;"
>
Olvide mi contrasena
</button>
</div>
@@ -25,7 +31,7 @@
</div>
<div class="d-grid gap-2 text-center">
<app-button buttonClass="w-100">Ingresar</app-button>
<app-button hostClass="w-100 d-block" buttonClass="w-100">Ingresar</app-button>
<button type="button" class="btn btn-link p-0 border-0 text-decoration-none small fw-bold">
Crear cuenta
</button>
@@ -36,13 +42,14 @@
<span class="w-100" style="max-width: 16rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 160, 160, 0.55), transparent);"></span>
</div>
<button
type="button"
class="btn btn-outline-secondary w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
<app-button
variant="neutral-outline"
hostClass="w-100 d-block"
buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
>
<i class="fa-brands fa-google text-danger" aria-hidden="true"></i>
<span>Continuar con Google</span>
</button>
</app-button>
</div>
</article>
</div>