6.3 KiB

Raw Blame History

Epic 13: Authentication Pages Design Enhancement

Epic Goal

Transform the authentication pages (login, forgot password, reset password, etc.) from plain layouts into visually engaging, branded experiences using a split-screen design with the LIBRA logo prominently featured and improved component visibility.

Epic Description

Existing System Context

Current functionality: Auth pages use a simple centered layout with minimal styling
Technology stack: Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4
Current layout: resources/views/components/layouts/auth/simple.blade.php - plain white/cream background
Existing split layout: resources/views/components/layouts/auth/split.blade.php - exists but uses generic styling
Language toggle component: resources/views/components/language-toggle.blade.php - has light variant with low visibility

Enhancement Details

What's being added/changed:

Split Layout Design for Auth Pages
- Left panel: Dark primary background (#2D3624) with centered LIBRA logo
- Right panel: Warm cream background with subtle botanical/geometric pattern and form content
- Responsive: On mobile, shows only the form side with logo above
Language Toggle Visibility Fix
- Update light variant to use darker color (text-primary instead of text-body/70)
- Ensure proper contrast on light backgrounds
- Maintain existing appearance on dark backgrounds (public navigation)
Subtle Background Pattern
- Add elegant, subtle pattern to form side (wheat/botanical motif or geometric)
- Pattern should complement the brand without being distracting
- SVG-based for performance and scalability

Auth Pages Affected:

/login - Login page
/forgot-password - Forgot password page
/reset-password - Reset password page
/two-factor-challenge - 2FA challenge page
/confirm-password - Password confirmation page
/email/verify - Email verification page

Success criteria:

Auth pages display split layout on desktop (logo left, form right)
Mobile view maintains usability with logo above form
Language toggle clearly visible on all auth pages
Subtle pattern adds visual interest without distraction
Brand consistency with existing design system
Bilingual support maintained (RTL/LTR)

Stories

Story 13.1: Language Toggle Visibility Enhancement

File: story-13.1-language-toggle-visibility.md

Update the language toggle component's light variant to use a darker, more visible color scheme while maintaining the existing dark variant appearance for navigation headers.

Story 13.2: Auth Layout Split Design Update

File: story-13.2-auth-split-layout.md

Update the existing split layout (auth/split.blade.php) to use LIBRA brand colors. Left panel with Dark Forest Green background and centered logo, right panel with form content.

Story 13.3: Subtle Background Pattern Implementation

File: story-13.3-background-pattern.md

Create and implement a subtle SVG-based background pattern for the auth form side. Pattern should use brand colors at low opacity for an elegant, professional appearance.

Story 13.4: Auth Pages Migration to Split Layout

File: story-13.4-auth-pages-migration.md

Migrate all auth pages from the simple layout to the enhanced split layout. Ensure proper RTL support and mobile responsiveness.

Story 13.5: Visual QA and Refinement

File: story-13.5-visual-qa.md

Comprehensive visual testing across all auth pages, browsers, and screen sizes. Fix any visual issues and ensure brand consistency.

Compatibility Requirements

Existing auth functionality remains unchanged
Form validation and error handling preserved
RTL (Arabic) and LTR (English) support maintained
Mobile responsiveness required
Accessibility standards (WCAG AA) maintained
No impact on authentication logic

Technical Considerations

Color Values

/* Primary for left panel */
--color-primary: #2D3624;      /* Dark Forest Green */

/* Background for right panel */
--color-background: #F4F1EA;   /* Warm Cream */

/* Pattern overlay (low opacity) */
--color-cta: #A68966;          /* Warm Gold at ~5-10% opacity */

/* Language toggle light variant */
--color-primary: #2D3624;      /* Dark Forest Green for text */

Layout Structure

Desktop (lg+):
+---------------------------+---------------------------+
|                           |                           |
|    LIBRA Logo             |    [Language Toggle]      |
|    (centered)             |                           |
|                           |    Login Form             |
|    Dark Forest Green      |    (centered, pattern bg) |
|    Background             |                           |
|                           |    Warm Cream Background  |
+---------------------------+---------------------------+

Mobile:
+---------------------------+
|    [Language Toggle]      |
|                           |
|    LIBRA Logo             |
|                           |
|    Login Form             |
|    (pattern bg)           |
+---------------------------+

SVG Pattern Considerations

Pattern should be subtle (5-10% opacity)
Use wheat/botanical motif aligned with LIBRA brand
Alternatively, use geometric pattern for cleaner look
Must tile seamlessly
Performance-optimized (small file size)

Risk Mitigation

Primary Risk: Layout changes may break on certain screen sizes or RTL mode
Mitigation: Thorough testing on multiple devices and both language directions
Rollback Plan: Auth layout can be reverted to simple layout via single file change

Definition of Done

All stories completed with acceptance criteria met
Language toggle visible and accessible on auth pages
Split layout displays correctly on desktop and tablet
Mobile layout is functional and attractive
RTL (Arabic) layout mirrors correctly
Pattern is subtle and professional
No regression in auth functionality
Visual QA completed on major browsers (Chrome, Firefox, Safari)
Accessibility audit passed (contrast ratios, focus states)

Dependencies

Epic 12 (Branding Refresh) should be completed first for consistent colors
Existing logo assets from Epic 12
No external dependencies required

6.3 KiB Raw Blame History