Naser Mansour
68 lines
3.3 KiB
Markdown
68 lines
3.3 KiB
Markdown
---
|
|
id: 24-9
|
|
title: 24-9 Auth Pages Type and Controls
|
|
status: Done
|
|
date: 2026-10-31
|
|
parent: 24
|
|
---
|
|
|
|
## Description
|
|
|
|
Apply the redesign's type and form controls to the auth pages (login, forgot password, reset
|
|
password, confirm password, verify email, two-factor challenge) without changing their
|
|
composition. The split layout (forest panel with the logo on the start side at ≥1024px, cream form
|
|
panel with the existing `auth-pattern` background, the language toggle at the top end, and the
|
|
mobile logo above the form) stays exactly as it is. No public script is loaded on auth pages.
|
|
|
|
### Layouts
|
|
|
|
In each of `resources/views/components/layouts/auth/split.blade.php`,
|
|
`resources/views/components/layouts/auth/card.blade.php` and
|
|
`resources/views/components/layouts/auth/simple.blade.php`:
|
|
- After `@include('partials.head')` add `@include('partials.site-fonts')` and
|
|
`@vite(['resources/css/public.css'])`.
|
|
- Add the class `site-auth` to `<body>` and remove the inline
|
|
`style="font-family: var(--font-…)"` from `<body>`.
|
|
|
|
### CSS — `resources/css/public.css`, scoped under `body.site-auth`
|
|
|
|
- `body.site-auth{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#1E2219}`.
|
|
- Headings (`h1, h2, [data-flux-heading]`): `font-family:"Markazi Text","Times New Roman",serif;
|
|
font-weight:700`.
|
|
- Text inputs (`input[type=email], input[type=password], input[type=text]`) — including those
|
|
rendered by `flux:input`: min-height 48px, radius 12px, border `1.5px solid rgba(45,54,36,.18)`,
|
|
white background; focus border `#A68966` and `box-shadow:0 0 0 4px rgba(166,137,102,.2)`, no
|
|
default outline.
|
|
- Primary submit buttons (`[data-flux-button][type=submit]` and `button[type=submit]`): radius
|
|
999px, min-height 48px, background `#A68966`, text `#1E2219`, weight 600, shadow
|
|
`0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px rgba(166,137,102,.8)`; hover lift 2px.
|
|
- Links inside the form panel: colour `#4A5D23`, underline on hover.
|
|
- Focus ring for every control: `outline:2px solid #A68966; outline-offset:3px`.
|
|
- Reduced motion: no transitions under `prefers-reduced-motion: reduce`.
|
|
Inspect the rendered login page to confirm which attributes Flux outputs before writing the
|
|
selectors; target only elements inside `body.site-auth`.
|
|
|
|
### Files
|
|
|
|
- Modify: `resources/views/components/layouts/auth/split.blade.php`,
|
|
`resources/views/components/layouts/auth/card.blade.php`,
|
|
`resources/views/components/layouts/auth/simple.blade.php`, `resources/css/public.css`.
|
|
- Do not modify any file under `resources/views/livewire/auth/` or `app/Actions/Fortify/`.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] `/login` renders in IBM Plex Sans Arabic with the heading in Markazi Text, 48px inputs with a
|
|
gold focus ring, and a gold pill submit button; the forest logo panel and the cream pattern
|
|
panel are unchanged in layout.
|
|
- [ ] Logging in with valid credentials still works for an admin and a client (redirect to their
|
|
dashboard), and invalid credentials still show the existing error.
|
|
- [ ] `/forgot-password` shows the same styles and still sends the reset link for a known email.
|
|
- [ ] The auth pages' HTML contains `public.css` and `class="site-auth`, and does not contain
|
|
`public.js`.
|
|
- [ ] The admin and client dashboards contain neither `public.css` nor `site-auth`.
|
|
- [ ] `/login` has no horizontal scroll at 1440, 768 and 390px.
|
|
|
|
## Sub-tasks
|
|
|
|
None.
|