From 9cd0222d7a6c901d2c48aef8018722c2cd2bc648 Mon Sep 17 00:00:00 2001 From: Doljak Date: Mon, 18 May 2026 11:36:53 -0300 Subject: [PATCH 1/5] refactor: refine auth journey UI --- docs/issues-plans/issue-97-auth-ui.md | 36 +++ .../doljak_theme/css/base/auth-styling.css | 205 ++++++++++++++++-- .../custom/doljak_theme/doljak_theme.theme | 43 +++- .../form--user-logout-confirm.html.twig | 23 ++ 4 files changed, 275 insertions(+), 32 deletions(-) create mode 100644 docs/issues-plans/issue-97-auth-ui.md create mode 100644 web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig diff --git a/docs/issues-plans/issue-97-auth-ui.md b/docs/issues-plans/issue-97-auth-ui.md new file mode 100644 index 0000000..dec6c63 --- /dev/null +++ b/docs/issues-plans/issue-97-auth-ui.md @@ -0,0 +1,36 @@ +--- +issue: 97 +title: "[Refactor] Auth journey UI and logout screen" +branch: refactor/auth-ui-97-auth-journey-ui-and-logout-screen +status: in-progress +last_updated: 05-18-2026 +--- + +# Issue #97 — [Refactor] Auth journey UI and logout screen + +## Objective +Refactor the authentication journey UI starting from the current main branch. Use the real Drupal screens for login, register, forgot password, and logout as the source of truth, refine the visual direction in Paper, create the missing logout screen in Paper, and then bring the approved UI adjustments back into Drupal through updated CSS while preserving the existing Drupal form behavior. + +## Scope +- Start the implementation branch/worktree from main, not from the issue #86 worktree +- Capture or inspect the real Drupal login, register, forgot password, and logout screens as they render today +- Use Paper to refine only the UI layer for login, register, and forgot password based on the current Drupal output +- Create the logout screen design in Paper so the auth journey has a complete visual reference +- Update Drupal CSS to match the refined Paper direction without changing Form API integration or auth behavior +- Validate the updated login, register, forgot password, and logout screens across desktop, tablet, and mobile breakpoints + +## Status +> Atualizado em: 05-18-2026 + +- [x] Start the implementation branch/worktree from main, not from the issue #86 worktree +- [x] Capture or inspect the real Drupal login, register, forgot password, and logout screens as they render today +- [ ] Use Paper to refine only the UI layer for login, register, and forgot password based on the current Drupal output +- [ ] Create the logout screen design in Paper so the auth journey has a complete visual reference +- [x] Update Drupal CSS to match the refined Paper direction without changing Form API integration or auth behavior +- [ ] Validate the updated login, register, forgot password, and logout screens across desktop, tablet, and mobile breakpoints + +## Notes +- Initial UI pass used the screenshots provided by the user for login, register and password reset because DDEV/Docker access was not available inside the sandbox. +- Added Drupal logout confirm support through `form--user-logout-confirm.html.twig` and `user_logout_confirm` form suggestion/classes. +- Paper artboard `Waggy — Logout` was created, but content insertion was cancelled while the Paper MCP call was running slowly; needs a follow-up Paper pass. +- Styled Drupal auth error/status messages so validation feedback is contained above the auth layout instead of rendering as loose text at the top of the page. diff --git a/web/themes/custom/doljak_theme/css/base/auth-styling.css b/web/themes/custom/doljak_theme/css/base/auth-styling.css index 0204509..8826a83 100644 --- a/web/themes/custom/doljak_theme/css/base/auth-styling.css +++ b/web/themes/custom/doljak_theme/css/base/auth-styling.css @@ -3,20 +3,65 @@ Login, register and password reset templates ========================================================================== */ +.messages-list:has(+ .auth-page), +.messages:has(+ .auth-page), +[data-drupal-messages]:has(+ .auth-page) { + margin: clamp(24px, 3vw, 40px) auto calc(var(--space-8) * -1); + max-width: var(--container-inner); + padding: 0 var(--gutter); + position: relative; + z-index: 1; +} + +.messages-list:has(+ .auth-page) .messages, +.messages:has(+ .auth-page), +[data-drupal-messages]:has(+ .auth-page) .messages { + background: #ffffff; + border: 1px solid rgba(196, 122, 64, 0.26); + border-left: 4px solid var(--color-accent-dark); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-sm); + line-height: 1.65; + padding: var(--space-4) var(--space-5); +} + +.messages-list:has(+ .auth-page) .messages__list, +.messages:has(+ .auth-page) .messages__list, +[data-drupal-messages]:has(+ .auth-page) .messages__list { + display: flex; + flex-direction: column; + gap: var(--space-2); + list-style: none; +} + +.messages-list:has(+ .auth-page) em, +.messages:has(+ .auth-page) em, +[data-drupal-messages]:has(+ .auth-page) em { + color: var(--color-accent-dark); + font-style: italic; +} + .auth-page { align-items: center; + background: + radial-gradient(circle at 76% 42%, rgba(222, 156, 111, 0.09), transparent 32%), + linear-gradient(90deg, rgba(250, 243, 237, 0.96), rgba(250, 243, 237, 0.7)); display: flex; - min-height: calc(100vh - 80px - 160px); + min-height: calc(100vh - var(--site-header-bottom)); width: 100%; } .auth-page__inner { + align-items: center; display: grid; - gap: var(--space-20); + gap: clamp(56px, 8vw, 128px); grid-template-columns: 55fr 45fr; margin: 0 auto; max-width: var(--container-inner); - padding: var(--space-20) var(--gutter); + padding: clamp(72px, 8vw, 120px) var(--gutter); width: 100%; } @@ -24,7 +69,7 @@ align-self: center; display: flex; flex-direction: column; - max-width: 560px; + max-width: 620px; } .auth-hero__eyebrow { @@ -41,9 +86,10 @@ .auth-reset__title { color: var(--color-text-primary); font-family: var(--font-display); - font-size: var(--text-3xl); + font-size: clamp(42px, 4.6vw, 72px); font-weight: var(--font-regular); - line-height: 1.15; + letter-spacing: 0; + line-height: 1.16; } .auth-hero__title { @@ -54,7 +100,7 @@ .auth-reset__subtitle { color: var(--color-text-secondary); font-family: var(--font-body); - font-size: var(--text-sm); + font-size: var(--text-md); line-height: 1.7; } @@ -68,6 +114,14 @@ gap: var(--space-4); } +.auth-page--register .auth-page__inner { + align-items: start; +} + +.auth-page--register .auth-hero { + padding-top: clamp(88px, 8vw, 136px); +} + .auth-stat { background: var(--color-bg-base); border: 1px solid var(--color-border); @@ -95,24 +149,33 @@ .auth-card { background: #ffffff; - border-radius: var(--radius-xl); - box-shadow: var(--shadow-lg); - padding: var(--space-12); + border: 1px solid rgba(237, 228, 216, 0.7); + border-radius: 22px; + box-shadow: 0 28px 70px rgba(65, 64, 64, 0.10); + justify-self: end; + max-width: 560px; + padding: clamp(40px, 4vw, 72px); + width: 100%; } .auth-card__title { color: var(--color-text-primary); font-family: var(--font-display); - font-size: var(--text-2xl); + font-size: clamp(40px, 4vw, 64px); font-weight: var(--font-regular); line-height: 1.1; margin-bottom: var(--space-2); } +.auth-card__title--small { + font-size: var(--text-2xl); + margin-bottom: var(--space-4); +} + .auth-card__subtitle { color: var(--color-text-secondary); font-family: var(--font-body); - font-size: var(--text-sm); + font-size: var(--text-base); line-height: 1.7; margin-bottom: var(--space-8); } @@ -125,7 +188,7 @@ .auth-field { display: flex; flex-direction: column; - gap: var(--space-2); + gap: var(--space-3); margin-bottom: var(--space-5); } @@ -138,7 +201,7 @@ .auth-field label { color: var(--color-text-primary); font-family: var(--font-body); - font-size: var(--text-sm); + font-size: var(--text-base); font-weight: var(--font-medium); line-height: 1.4; } @@ -149,10 +212,10 @@ border-radius: var(--radius-md); color: var(--color-text-primary); font-family: var(--font-body); - font-size: var(--text-sm); - min-height: 54px; + font-size: var(--text-base); + min-height: 66px; outline: none; - padding: var(--space-4) var(--space-5); + padding: var(--space-5) var(--space-6); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; } @@ -166,6 +229,49 @@ color: var(--color-text-light); } +.auth-field .description, +.auth-field .password-suggestions, +.auth-field .password-confirm-message, +.auth-field .password-strength, +.auth-field .password-match { + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: 13px; + line-height: 1.55; +} + +.auth-field .description { + margin-top: 2px; +} + +.auth-field .password-strength { + margin-top: var(--space-1); +} + +.auth-field .password-strength__meter { + background: rgba(65, 64, 64, 0.12); + border-radius: var(--radius-full); + height: 8px; + margin-bottom: var(--space-2); +} + +.auth-field .password-strength__indicator { + background: var(--color-accent); + border-radius: inherit; + height: 100%; +} + +.auth-field .password-strength__title, +.auth-field .password-match { + color: var(--color-text-primary); + font-size: 14px; + margin-top: var(--space-2); +} + +.auth-field .password-confirm { + margin-top: var(--space-4); +} + .btn { align-items: center; border: 1px solid transparent; @@ -176,7 +282,7 @@ font-size: var(--text-sm); font-weight: var(--font-semibold); justify-content: center; - min-height: 54px; + min-height: 66px; padding: var(--space-4) var(--space-8); text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); @@ -278,8 +384,8 @@ .auth-reset__inner { margin: 0 auto; - max-width: 480px; - padding: var(--space-20) var(--gutter); + max-width: 560px; + padding: clamp(72px, 8vw, 120px) var(--gutter); width: 100%; } @@ -292,9 +398,29 @@ } .auth-card--centered { + justify-self: center; text-align: left; } +.auth-card--logout { + text-align: center; +} + +.auth-logout__icon { + align-items: center; + background: var(--color-bg-hero); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + color: var(--color-accent-dark); + display: inline-flex; + font-family: var(--font-display); + font-size: var(--text-lg); + height: 56px; + justify-content: center; + margin-bottom: var(--space-6); + width: 56px; +} + .auth-link--center { display: block; margin-top: var(--space-5); @@ -302,19 +428,40 @@ } @media (max-width: 1199px) { + .messages-list:has(+ .auth-page), + .messages:has(+ .auth-page), + [data-drupal-messages]:has(+ .auth-page) { + padding: 0 var(--space-8); + } + .auth-page__inner { gap: var(--space-10); grid-template-columns: 1fr; - max-width: 540px; + max-width: 620px; padding: var(--space-16) var(--space-8); } + .auth-card { + justify-self: stretch; + } + .auth-hero__stats { display: none; } + + .auth-page--register .auth-hero { + margin-bottom: 0; + } } @media (max-width: 767px) { + .messages-list:has(+ .auth-page), + .messages:has(+ .auth-page), + [data-drupal-messages]:has(+ .auth-page) { + margin: var(--space-5) auto calc(var(--space-4) * -1); + padding: 0 var(--space-6); + } + .auth-page { min-height: auto; } @@ -324,6 +471,7 @@ } .auth-card { + border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); } @@ -336,6 +484,21 @@ font-size: var(--text-2xl); } + .auth-card__title { + font-size: var(--text-2xl); + } + + .auth-hero__desc, + .auth-reset__subtitle, + .auth-card__subtitle { + font-size: var(--text-sm); + } + + .auth-field input, + .btn { + min-height: 58px; + } + .auth-form__row { align-items: flex-start; flex-direction: column; diff --git a/web/themes/custom/doljak_theme/doljak_theme.theme b/web/themes/custom/doljak_theme/doljak_theme.theme index 446c4ba..961ab9a 100644 --- a/web/themes/custom/doljak_theme/doljak_theme.theme +++ b/web/themes/custom/doljak_theme/doljak_theme.theme @@ -182,19 +182,19 @@ function doljak_theme_form_contact_message_waggy_contact_form_alter(array &$form } } - function doljak_theme_form_user_login_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void { - $form['#attributes']['class'][] = 'auth-form'; +function doljak_theme_form_user_login_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void { + $form['#attributes']['class'][] = 'auth-form'; - $form['name']['#wrapper_attributes']['class'][] = 'auth-field'; - $form['name']['#attributes']['class'][] = 'auth-field__input'; + $form['name']['#wrapper_attributes']['class'][] = 'auth-field'; + $form['name']['#attributes']['class'][] = 'auth-field__input'; - $form['pass']['#wrapper_attributes']['class'][] = 'auth-field'; - $form['pass']['#attributes']['class'][] = 'auth-field__input'; + $form['pass']['#wrapper_attributes']['class'][] = 'auth-field'; + $form['pass']['#attributes']['class'][] = 'auth-field__input'; - $form['actions']['submit']['#attributes']['class'][] = 'btn'; - $form['actions']['submit']['#attributes']['class'][] = 'btn--primary'; - $form['actions']['submit']['#attributes']['class'][] = 'btn--full'; - } + $form['actions']['submit']['#attributes']['class'][] = 'btn'; + $form['actions']['submit']['#attributes']['class'][] = 'btn--primary'; + $form['actions']['submit']['#attributes']['class'][] = 'btn--full'; +} function doljak_theme_form_user_pass_alter(array &$form, FormStateInterface $form_state, string $form_id): void { $form['#attributes']['class'][] = 'auth-form'; @@ -210,7 +210,12 @@ function doljak_theme_form_user_pass_alter(array &$form, FormStateInterface $for function doljak_theme_theme_suggestions_form_alter(array &$suggestions, array $variables): void { $form_id = $variables['element']['#form_id'] ?? ''; - $targets = ['user_login_form', 'user_register_form', 'user_pass']; + $targets = [ + 'user_login_form', + 'user_register_form', + 'user_pass', + 'user_logout_confirm', + ]; if (in_array($form_id, $targets)) { $suggestions[] = 'form__' . $form_id; } @@ -231,3 +236,19 @@ function doljak_theme_form_user_register_form_alter(array &$form, FormStateInter $form['actions']['submit']['#attributes']['class'][] = 'btn--primary'; $form['actions']['submit']['#attributes']['class'][] = 'btn--full'; } + +function doljak_theme_form_user_logout_confirm_alter(array &$form, FormStateInterface $form_state, string $form_id): void { + $form['#attributes']['class'][] = 'auth-form'; + + if (isset($form['actions']['submit'])) { + $form['actions']['submit']['#attributes']['class'][] = 'btn'; + $form['actions']['submit']['#attributes']['class'][] = 'btn--primary'; + $form['actions']['submit']['#attributes']['class'][] = 'btn--full'; + } + + if (isset($form['actions']['cancel'])) { + $form['actions']['cancel']['#attributes']['class'][] = 'btn'; + $form['actions']['cancel']['#attributes']['class'][] = 'btn--secondary'; + $form['actions']['cancel']['#attributes']['class'][] = 'btn--full'; + } +} diff --git a/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig b/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig new file mode 100644 index 0000000..34dfa2f --- /dev/null +++ b/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig @@ -0,0 +1,23 @@ +
+
+

ACCOUNT SESSION

+

Log out of Waggy?

+

+ Your cart and saved favorites will stay ready for the next time you sign in. +

+ +
+ +

End current session

+

+ Confirm to leave your account on this device. +

+ + {{ element.actions }} +
+
+
+ +{{ element.form_token }} +{{ element.form_build_id }} +{{ element.form_id }} From 81a6b2c35ff26416d9ac9b9ed6f10bd7d8e7c118 Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 11:24:08 -0300 Subject: [PATCH 2/5] refactor: align auth form markup with Paper layout --- .../custom/doljak_theme/css/base/auth-styling.css | 14 ++++++++++++++ .../templates/form--user-login-form.html.twig | 13 +++++++------ .../templates/form--user-logout-confirm.html.twig | 11 ++++++----- .../templates/form--user-pass.html.twig | 9 +++++---- .../templates/form--user-register-form.html.twig | 9 +++++---- 5 files changed, 37 insertions(+), 19 deletions(-) diff --git a/web/themes/custom/doljak_theme/css/base/auth-styling.css b/web/themes/custom/doljak_theme/css/base/auth-styling.css index 8826a83..d0f3ab3 100644 --- a/web/themes/custom/doljak_theme/css/base/auth-styling.css +++ b/web/themes/custom/doljak_theme/css/base/auth-styling.css @@ -158,6 +158,13 @@ width: 100%; } +.auth-card > .auth-form, +.auth-card form.auth-form { + display: flex; + flex-direction: column; + width: 100%; +} + .auth-card__title { color: var(--color-text-primary); font-family: var(--font-display); @@ -328,6 +335,13 @@ margin-bottom: 0; } +.auth-form .form-actions { + display: flex; + flex-direction: column; + margin: 0; + width: 100%; +} + .auth-form__row { align-items: center; display: flex; diff --git a/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig b/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig index f7ff09a..74610d4 100644 --- a/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig +++ b/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig @@ -23,19 +23,20 @@

Login

Use your account name and password.

+ {{ element.name }}
Forgot password?
{{ element.pass }} {{ element.actions }} - - Create Account + {{ element.form_token }} + {{ element.form_build_id }} + {{ element.form_id }} + + + Create Account - -{{ element.form_token }} -{{ element.form_build_id }} -{{ element.form_id }} \ No newline at end of file diff --git a/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig b/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig index 34dfa2f..14396c7 100644 --- a/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig +++ b/web/themes/custom/doljak_theme/templates/form--user-logout-confirm.html.twig @@ -13,11 +13,12 @@ Confirm to leave your account on this device.

- {{ element.actions }} + + {{ element.actions }} + {{ element.form_token }} + {{ element.form_build_id }} + {{ element.form_id }} + - -{{ element.form_token }} -{{ element.form_build_id }} -{{ element.form_id }} diff --git a/web/themes/custom/doljak_theme/templates/form--user-pass.html.twig b/web/themes/custom/doljak_theme/templates/form--user-pass.html.twig index ea62c79..68f4793 100644 --- a/web/themes/custom/doljak_theme/templates/form--user-pass.html.twig +++ b/web/themes/custom/doljak_theme/templates/form--user-pass.html.twig @@ -8,16 +8,17 @@
+ {{ element.name }} {{ element.actions }} + {{ element.form_token }} + {{ element.form_build_id }} + {{ element.form_id }} Back to login +
- -{{ element.form_token }} -{{ element.form_build_id }} -{{ element.form_id }} diff --git a/web/themes/custom/doljak_theme/templates/form--user-register-form.html.twig b/web/themes/custom/doljak_theme/templates/form--user-register-form.html.twig index 7644467..e2da47a 100644 --- a/web/themes/custom/doljak_theme/templates/form--user-register-form.html.twig +++ b/web/themes/custom/doljak_theme/templates/form--user-register-form.html.twig @@ -13,6 +13,7 @@

Create Account

Basic information to get started.

+ {{ element.account.name }} @@ -21,16 +22,16 @@ {{ element.account.pass }} {{ element.actions }} + {{ element.form_token }} + {{ element.form_build_id }} + {{ element.form_id }}

Already have an account? Sign in

+ - -{{ element.form_token }} -{{ element.form_build_id }} -{{ element.form_id }} \ No newline at end of file From 3f52e961b28b00aab4985e2dddbf3bdde11dd41d Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 11:50:59 -0300 Subject: [PATCH 3/5] refactor: match login screen to Paper layout --- .../doljak_theme/css/base/auth-styling.css | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/web/themes/custom/doljak_theme/css/base/auth-styling.css b/web/themes/custom/doljak_theme/css/base/auth-styling.css index d0f3ab3..c5c70d2 100644 --- a/web/themes/custom/doljak_theme/css/base/auth-styling.css +++ b/web/themes/custom/doljak_theme/css/base/auth-styling.css @@ -383,6 +383,127 @@ text-decoration-color: var(--color-accent-dark); } +@media (min-width: 1200px) { + .auth-page--login .auth-page__inner { + align-items: start; + gap: 0; + grid-template-columns: 470px 467px; + justify-content: space-between; + max-width: 1280px; + padding: 101px 0 98px; + } + + .auth-page--login .auth-hero { + max-width: 470px; + } + + .auth-page--login .auth-hero__eyebrow { + color: var(--color-accent); + font-size: 12px; + letter-spacing: 6px; + line-height: 1.2; + margin-bottom: 21px; + } + + .auth-page--login .auth-hero__title { + font-size: 48px; + line-height: 1.16; + margin-bottom: 20px; + max-width: 470px; + } + + .auth-page--login .auth-hero__desc { + font-size: 16px; + line-height: 1.75; + margin-bottom: 20px; + max-width: 430px; + } + + .auth-page--login .auth-hero__stats { + gap: 14px; + } + + .auth-page--login .auth-stat { + background: var(--color-bg-hero); + border: 0; + border-radius: 20px; + min-height: 110px; + min-width: 140px; + padding: 24px 20px 18px; + } + + .auth-page--login .auth-stat strong { + font-size: 24px; + line-height: 1.2; + margin-bottom: 4px; + } + + .auth-page--login .auth-stat span { + font-size: 13px; + line-height: 1.55; + } + + .auth-page--login .auth-card { + border: 0; + border-radius: 28px; + box-shadow: 0 30px 64px rgba(65, 64, 64, 0.12); + max-width: 467px; + min-height: 504px; + padding: 34px; + } + + .auth-page--login .auth-card__title { + font-size: 32px; + line-height: 1.15; + margin-bottom: 5px; + } + + .auth-page--login .auth-card__subtitle { + font-size: 14px; + line-height: 1.45; + margin-bottom: 22px; + } + + .auth-page--login .auth-field { + gap: 8px; + margin-bottom: 12px; + } + + .auth-page--login .auth-field label { + font-size: 13px; + line-height: 1.3; + } + + .auth-page--login .auth-field input { + border: 0; + border-radius: 15px; + font-size: 14px; + min-height: 53px; + padding: 14px 16px; + } + + .auth-page--login .auth-form__row { + margin-bottom: 15px; + } + + .auth-page--login .auth-link { + font-size: 13px; + } + + .auth-page--login .btn { + min-height: 55px; + } + + .auth-page--login .btn--primary { + margin-bottom: 0; + } + + .auth-page--login .btn--secondary { + margin-top: 20px; + min-height: 52px; + } +} + .auth-form__footer-text { color: var(--color-text-secondary); font-family: var(--font-body); From ce599628ecbcac4b623ba282987916132eef651b Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 12:29:21 -0300 Subject: [PATCH 4/5] refactor: align register auth screen with Paper layout --- .../doljak_theme/css/base/auth-styling.css | 104 ++++++++++++++++++ .../templates/form--user-login-form.html.twig | 2 +- 2 files changed, 105 insertions(+), 1 deletion(-) diff --git a/web/themes/custom/doljak_theme/css/base/auth-styling.css b/web/themes/custom/doljak_theme/css/base/auth-styling.css index c5c70d2..8e2bede 100644 --- a/web/themes/custom/doljak_theme/css/base/auth-styling.css +++ b/web/themes/custom/doljak_theme/css/base/auth-styling.css @@ -502,6 +502,110 @@ margin-top: 20px; min-height: 52px; } + + .auth-page--register .auth-page__inner { + align-items: start; + gap: 0; + grid-template-columns: 470px 467px; + justify-content: space-between; + max-width: 1280px; + padding: 101px 0 98px; + } + + .auth-page--register .auth-hero { + align-self: start; + max-width: 470px; + padding-top: 200px; + } + + .auth-page--register .auth-hero__eyebrow { + color: var(--color-accent); + font-size: 12px; + letter-spacing: 6px; + line-height: 1.2; + margin-bottom: 21px; + } + + .auth-page--register .auth-hero__title { + font-size: 48px; + line-height: 1.16; + margin-bottom: 20px; + max-width: 470px; + } + + .auth-page--register .auth-hero__desc { + font-size: 13px; + line-height: 1.75; + margin-bottom: 0; + max-width: 430px; + } + + .auth-page--register .auth-page__inner > form { + justify-self: end; + max-width: 467px; + width: 100%; + } + + .auth-page--register .auth-card { + border: 0; + border-radius: 28px; + box-shadow: 0 30px 64px rgba(65, 64, 64, 0.12); + max-width: 467px; + padding: 34px; + } + + .auth-page--register .auth-card__title { + font-size: 32px; + line-height: 1.15; + margin-bottom: 5px; + } + + .auth-page--register .auth-card__subtitle { + font-size: 14px; + line-height: 1.45; + margin-bottom: 22px; + } + + .auth-page--register .auth-field { + gap: 8px; + margin-bottom: 16px; + } + + .auth-page--register .auth-field label { + font-size: 13px; + line-height: 1.3; + } + + .auth-page--register .auth-field input { + border: 0; + border-radius: 15px; + font-size: 14px; + min-height: 53px; + padding: 14px 16px; + } + + .auth-page--register .auth-field .description, + .auth-page--register .auth-field .password-suggestions, + .auth-page--register .auth-field .password-confirm-message, + .auth-page--register .auth-field .password-strength, + .auth-page--register .auth-field .password-match { + font-size: 13px; + line-height: 1.55; + margin-top: 6px; + } + + .auth-page--register .btn { + min-height: 55px; + } + + .auth-page--register .btn--primary { + margin-bottom: 0; + } + + .auth-page--register .auth-form__footer-text { + font-size: 12px; + margin-top: 12px; + } } .auth-form__footer-text { diff --git a/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig b/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig index 74610d4..ca09775 100644 --- a/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig +++ b/web/themes/custom/doljak_theme/templates/form--user-login-form.html.twig @@ -25,10 +25,10 @@ {{ element.name }} + {{ element.pass }}
Forgot password?
- {{ element.pass }} {{ element.actions }} {{ element.form_token }} {{ element.form_build_id }} From 26e3308de12643eba91e501c3373df7237fe95b1 Mon Sep 17 00:00:00 2001 From: Doljak Date: Tue, 19 May 2026 15:43:36 -0300 Subject: [PATCH 5/5] refactory: reset pass user ui --- .../doljak_theme/css/base/auth-styling.css | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/web/themes/custom/doljak_theme/css/base/auth-styling.css b/web/themes/custom/doljak_theme/css/base/auth-styling.css index 8e2bede..ea4a3ec 100644 --- a/web/themes/custom/doljak_theme/css/base/auth-styling.css +++ b/web/themes/custom/doljak_theme/css/base/auth-styling.css @@ -606,6 +606,75 @@ font-size: 12px; margin-top: 12px; } + + .auth-page--reset { + align-items: flex-start; + } + + .auth-page--reset .auth-reset__inner { + max-width: 560px; + padding: 135px 0 120px; + } + + .auth-page--reset .auth-hero__eyebrow { + color: var(--color-accent); + font-size: 12px; + letter-spacing: 6px; + line-height: 1.2; + margin-bottom: 21px; + } + + .auth-page--reset .auth-reset__title { + font-size: 48px; + line-height: 1.16; + margin-bottom: 20px; + } + + .auth-page--reset .auth-reset__subtitle { + font-size: 16px; + line-height: 1.75; + margin-bottom: 26px; + } + + .auth-page--reset .auth-card { + border: 0; + border-radius: 28px; + box-shadow: 0 30px 64px rgba(65, 64, 64, 0.12); + max-width: 520px; + padding: 34px; + } + + .auth-page--reset .auth-field { + gap: 8px; + margin-bottom: 18px; + } + + .auth-page--reset .auth-field label { + font-size: 13px; + line-height: 1.3; + } + + .auth-page--reset .auth-field input { + border: 0; + border-radius: 15px; + font-size: 14px; + min-height: 53px; + padding: 14px 16px; + } + + .auth-page--reset .btn { + min-height: 55px; + } + + .auth-page--reset .btn--primary { + margin-bottom: 0; + } + + .auth-page--reset .auth-link--center { + color: var(--color-accent-dark); + font-size: 14px; + margin-top: 20px; + } } .auth-form__footer-text {