From 93d49fc7e6eb8e7c2011295c9c5a4d9e13cb98bd Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 2 Jul 2026 15:20:07 -0300 Subject: [PATCH] feat(login): redesign login page layout and integrate button component --- .../login-page/login-page.component.html | 79 +++--- .../login-page/login-page.component.scss | 229 ------------------ .../pages/login-page/login-page.component.ts | 3 +- .../components/button/button.component.ts | 3 +- 4 files changed, 45 insertions(+), 269 deletions(-) diff --git a/src/app/features/store/pages/login-page/login-page.component.html b/src/app/features/store/pages/login-page/login-page.component.html index 982f941..02fe55d 100644 --- a/src/app/features/store/pages/login-page/login-page.component.html +++ b/src/app/features/store/pages/login-page/login-page.component.html @@ -1,48 +1,51 @@ -
+
-
diff --git a/src/app/features/store/pages/login-page/login-page.component.scss b/src/app/features/store/pages/login-page/login-page.component.scss index 8d6b777..e69de29 100644 --- a/src/app/features/store/pages/login-page/login-page.component.scss +++ b/src/app/features/store/pages/login-page/login-page.component.scss @@ -1,229 +0,0 @@ -:host { - display: block; -} - -.login-page { - position: relative; - padding-block: clamp(2rem, 6vw, 4.5rem); -} - -.login-page__shell { - display: grid; - place-items: center; - min-height: min(100%, 42rem); -} - -.login-card { - position: relative; - width: min(100%, 34rem); - padding: clamp(1.5rem, 3vw, 2rem); - border: 1px solid rgba(99, 118, 243, 0.08); - border-radius: 1.5rem; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)), - rgba(255, 255, 255, 0.94); - box-shadow: - 0 30px 70px rgba(18, 26, 62, 0.08), - 0 10px 22px rgba(18, 26, 62, 0.06); - overflow: hidden; -} - -.login-card__glow { - position: absolute; - inset: -25% auto auto 50%; - width: 70%; - height: 14rem; - border-radius: 999px; - background: color-mix(in srgb, white 58%, var(--tenant-primary)); - opacity: 0.35; - filter: blur(42px); - transform: translateX(-50%); - pointer-events: none; -} - -.login-card__content { - position: relative; - z-index: 1; - display: grid; - gap: 1.5rem; -} - -.login-card__header { - display: grid; - gap: 0.65rem; - text-align: center; -} - -.login-card__eyebrow { - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.18em; - text-transform: uppercase; - color: color-mix(in srgb, #ffffff 18%, var(--tenant-primary)); -} - -.login-card__title { - margin: 0; - font-size: clamp(1.7rem, 4vw, 2.3rem); - font-weight: 700; - letter-spacing: -0.04em; - color: #1d2433; -} - -.login-card__description { - width: min(100%, 25rem); - margin: 0 auto; - color: #70778a; - font-size: 0.95rem; - line-height: 1.6; -} - -.login-form { - display: grid; - gap: 1.35rem; -} - -.login-form__fields { - display: grid; - gap: 0.9rem; -} - -.login-form__password-row { - display: grid; - gap: 0.45rem; -} - -.login-form__inline-link, -.login-form__secondary-link { - padding: 0; - border: 0; - background: transparent; - font: inherit; -} - -.login-form__inline-link { - justify-self: end; - color: #9aa0b2; - font-size: 0.8rem; - transition: color 0.2s ease; -} - -.login-form__inline-link:hover, -.login-form__inline-link:focus-visible { - color: color-mix(in srgb, black 12%, var(--tenant-primary)); -} - -.login-form__actions { - display: grid; - gap: 0.85rem; -} - -.login-form__submit { - width: 100%; - min-height: 3rem; - padding: 0.8rem 1.25rem; - border: 1px solid transparent; - border-radius: 0.8rem; - background: linear-gradient( - 135deg, - color-mix(in srgb, white 18%, var(--tenant-primary)), - var(--tenant-primary) - ); - color: #ffffff; - font-size: 0.96rem; - font-weight: 700; - box-shadow: 0 10px 24px rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.18); - transition: - transform 0.2s ease, - box-shadow 0.2s ease, - filter 0.2s ease; -} - -.login-form__submit:hover, -.login-form__submit:focus-visible { - filter: brightness(0.96); - box-shadow: 0 14px 28px rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.24); - transform: translateY(-1px); -} - -.login-form__secondary-link { - justify-self: center; - color: var(--tenant-primary); - font-size: 0.86rem; - font-weight: 700; - text-decoration: none; - transition: opacity 0.2s ease; -} - -.login-form__secondary-link:hover, -.login-form__secondary-link:focus-visible { - opacity: 0.82; -} - -.login-card__divider { - display: flex; - align-items: center; - justify-content: center; -} - -.login-card__divider span { - width: 100%; - max-width: 16rem; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(160, 160, 160, 0.55), transparent); -} - -.login-card__social-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.85rem; - width: 100%; - min-height: 3rem; - padding: 0.8rem 1.25rem; - border: 1px solid rgba(30, 41, 59, 0.16); - border-radius: 0.8rem; - background: rgba(255, 255, 255, 0.8); - color: #2f3545; - font-size: 0.95rem; - font-weight: 600; - transition: - transform 0.2s ease, - border-color 0.2s ease, - box-shadow 0.2s ease; -} - -.login-card__social-button:hover, -.login-card__social-button:focus-visible { - border-color: rgba(var(--tenant-primary-rgb, 99, 118, 243), 0.28); - box-shadow: 0 10px 26px rgba(18, 26, 62, 0.08); - transform: translateY(-1px); -} - -.login-card__social-icon { - display: inline-grid; - place-items: center; - width: 1.5rem; - height: 1.5rem; - color: #ea4335; - font-size: 1.05rem; -} - -@media (max-width: 575.98px) { - .login-page { - padding-block: 1.5rem 2.5rem; - } - - .login-card { - padding: 1.35rem; - border-radius: 1.15rem; - } - - .login-card__content { - gap: 1.25rem; - } - - .login-card__description { - font-size: 0.9rem; - } -} diff --git a/src/app/features/store/pages/login-page/login-page.component.ts b/src/app/features/store/pages/login-page/login-page.component.ts index 59f6b61..a87463a 100644 --- a/src/app/features/store/pages/login-page/login-page.component.ts +++ b/src/app/features/store/pages/login-page/login-page.component.ts @@ -1,10 +1,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ButtonComponent } from '../../../../shared/components/button/button.component'; import { InputComponent } from '../../../../shared/components/input/input.component'; @Component({ selector: 'app-login-page', - imports: [InputComponent], + imports: [InputComponent, ButtonComponent], templateUrl: './login-page.component.html', styleUrl: './login-page.component.scss', changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts index 6933e32..9584819 100644 --- a/src/app/shared/components/button/button.component.ts +++ b/src/app/shared/components/button/button.component.ts @@ -19,6 +19,7 @@ export class ButtonComponent { readonly variant = input('primary'); readonly type = input<'button' | 'submit' | 'reset'>('button'); readonly disabled = input(false); + readonly buttonClass = input(''); protected readonly buttonClasses = computed(() => { const variants: Record = { @@ -29,6 +30,6 @@ export class ButtonComponent { cancel: 'btn-secondary' }; - return ['btn', variants[this.variant()]]; + return ['btn', variants[this.variant()], this.buttonClass()]; }); }