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

src/app/features/store/pages/login-page/login-page.component.html

@@ -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
+            <app-button
-              type="button"
+              variant="neutral-outline"
-              class="btn btn-outline-secondary w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
+              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>

src/app/shared/components/button/button.component.scss

@@ -29,6 +29,7 @@
 }
 
 .btn-outline-primary,
+.btn-outline-neutral,
 .btn-outline-danger {
   --bs-btn-bg: transparent;
   --bs-btn-hover-color: #fff;
@@ -85,6 +86,17 @@
   --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
 }
 
+.btn-outline-neutral {
+  --bs-btn-color: #666666;
+  --bs-btn-border-color: #a0a0a0;
+  --bs-btn-hover-bg: #a0a0a0;
+  --bs-btn-hover-border-color: #a0a0a0;
+  --bs-btn-active-bg: #8a8a8a;
+  --bs-btn-active-border-color: #8a8a8a;
+  --bs-btn-disabled-color: rgba(102, 102, 102, 0.55);
+  --bs-btn-disabled-border-color: rgba(160, 160, 160, 0.55);
+}
+
 .btn-outline-danger {
   --bs-btn-color: var(--tenant-danger);
   --bs-btn-border-color: var(--tenant-danger);

src/app/shared/components/button/button.component.ts

@@ -4,6 +4,7 @@ import { NgClass } from '@angular/common';
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
+  | 'neutral-outline'
   | 'danger'
   | 'danger-secondary'
   | 'cancel';
@@ -13,18 +14,23 @@ export type ButtonVariant =
   imports: [NgClass],
   templateUrl: './button.component.html',
   styleUrl: './button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClass()'
+  }
 })
 export class ButtonComponent {
   readonly variant = input<ButtonVariant>('primary');
   readonly type = input<'button' | 'submit' | 'reset'>('button');
   readonly disabled = input(false);
+  readonly hostClass = input<string>('');
   readonly buttonClass = input<string>('');
 
   protected readonly buttonClasses = computed(() => {
     const variants: Record<ButtonVariant, string> = {
       primary: 'btn-primary',
       secondary: 'btn-outline-primary',
+      'neutral-outline': 'btn-outline-neutral',
       danger: 'btn-danger',
       'danger-secondary': 'btn-outline-danger',
       cancel: 'btn-secondary'