140 lines
4.1 KiB
Markdown
140 lines
4.1 KiB
Markdown
# Story 13.2: Auth Layout Split Design Update
|
|
|
|
## Story
|
|
|
|
**As a** visitor to the authentication pages
|
|
**I want to** see a visually appealing split-screen layout with the LIBRA branding
|
|
**So that** the login experience feels professional and aligned with the brand identity
|
|
|
|
## Acceptance Criteria
|
|
|
|
### AC1: Left Panel - Brand Side (Desktop)
|
|
|
|
**Given** the split layout is viewed on desktop (lg+ breakpoint)
|
|
**When** the page loads
|
|
**Then** the left panel displays:
|
|
- Full height (`h-full`)
|
|
- Dark Forest Green background (`bg-primary` #2D3624)
|
|
- LIBRA logo centered vertically and horizontally
|
|
- Logo size: Large (`size="lg"` or `size="xl"`)
|
|
- No text below logo (clean, minimal design)
|
|
|
|
### AC2: Right Panel - Form Side (Desktop)
|
|
|
|
**Given** the split layout is viewed on desktop
|
|
**When** the page loads
|
|
**Then** the right panel displays:
|
|
- Warm Cream background (`bg-background` #F4F1EA)
|
|
- Form content centered
|
|
- Language toggle in top-right corner
|
|
- Adequate padding for comfortable reading
|
|
|
|
### AC3: Mobile Layout
|
|
|
|
**Given** the split layout is viewed on mobile (below lg breakpoint)
|
|
**When** the page loads
|
|
**Then**:
|
|
- Left panel (brand side) is hidden
|
|
- Logo appears above the form (centered, size="xl")
|
|
- Form takes full width with padding
|
|
- Language toggle in top-right corner
|
|
- Background uses Warm Cream
|
|
|
|
### AC4: RTL (Arabic) Support
|
|
|
|
**Given** the user's locale is Arabic
|
|
**When** the split layout renders
|
|
**Then**:
|
|
- Layout mirrors correctly (brand panel on right, form on left)
|
|
- Language toggle appears in top-left (logical `end`)
|
|
- All text alignment respects RTL
|
|
|
|
### AC5: Language Toggle Positioning
|
|
|
|
**Given** the language toggle component
|
|
**When** displayed on the split layout
|
|
**Then**:
|
|
- Position: Fixed in top corner (`absolute end-4 top-4 z-50`)
|
|
- Uses `variant="light"` for visibility on light background
|
|
- Accessible via keyboard navigation
|
|
|
|
### AC6: Remove Inspiring Quotes
|
|
|
|
**Given** the existing split layout has inspiring quotes
|
|
**When** the layout is updated
|
|
**Then** the quotes section is removed for a cleaner, branded appearance
|
|
|
|
### AC7: Responsive Breakpoints
|
|
|
|
**Given** various screen sizes
|
|
**When** the layout responds
|
|
**Then**:
|
|
- `lg+` (≥1024px): Full split layout (50/50)
|
|
- Below `lg`: Mobile layout (form only with logo above)
|
|
|
|
## Technical Notes
|
|
|
|
### File to Modify
|
|
- `resources/views/components/layouts/auth/split.blade.php`
|
|
|
|
### Current Structure
|
|
```html
|
|
<main class="relative grid h-dvh ... lg:grid-cols-2">
|
|
<!-- Left: Brand panel with neutral-900 bg and quotes -->
|
|
<div class="bg-muted relative hidden h-full ... lg:flex">
|
|
<div class="absolute inset-0 bg-neutral-900"></div>
|
|
<!-- Logo and quotes -->
|
|
</div>
|
|
<!-- Right: Form -->
|
|
<div class="w-full lg:p-8">...</div>
|
|
</main>
|
|
```
|
|
|
|
### Target Structure
|
|
```html
|
|
<main class="relative grid h-dvh ... lg:grid-cols-2">
|
|
<!-- Left: Brand panel with primary bg -->
|
|
<div class="relative hidden h-full flex-col items-center justify-center lg:flex bg-primary">
|
|
<x-logo size="xl" />
|
|
</div>
|
|
<!-- Right: Form with pattern bg -->
|
|
<div class="w-full bg-background lg:p-8">
|
|
<!-- Language toggle -->
|
|
<div class="absolute end-4 top-4 z-50">
|
|
<x-language-toggle variant="light" />
|
|
</div>
|
|
<!-- Form content -->
|
|
</div>
|
|
</main>
|
|
```
|
|
|
|
### Color Values
|
|
| Element | Color | Hex |
|
|
|---------|-------|-----|
|
|
| Left Panel Background | `bg-primary` | #2D3624 |
|
|
| Right Panel Background | `bg-background` | #F4F1EA |
|
|
| Logo | Default (adapts to dark bg) | - |
|
|
|
|
## Dev Checklist
|
|
|
|
- [ ] Update left panel background to `bg-primary`
|
|
- [ ] Center logo in left panel (remove quotes)
|
|
- [ ] Update right panel background to `bg-background`
|
|
- [ ] Position language toggle correctly
|
|
- [ ] Test desktop layout (50/50 split)
|
|
- [ ] Test mobile layout (form only)
|
|
- [ ] Test RTL mirroring
|
|
- [ ] Verify logo visibility on dark background
|
|
- [ ] Remove inspiring quotes code
|
|
- [ ] Ensure z-index layering correct
|
|
|
|
## Estimation
|
|
|
|
**Complexity:** Medium
|
|
**Risk:** Low - Layout restructuring with existing components
|
|
|
|
## Dependencies
|
|
|
|
- Story 13.1 (Language Toggle Visibility) - Can run in parallel
|
|
- Epic 12 (Brand colors defined)
|