created epic 13 make a better login page design
This commit is contained in:
Naser Mansour
@@ -0,0 +1,167 @@
|
||||
# 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:**
|
||||
|
||||
1. **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
|
||||
|
||||
2. **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)
|
||||
|
||||
3. **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
|
||||
|
||||
- [x] Existing auth functionality remains unchanged
|
||||
- [x] Form validation and error handling preserved
|
||||
- [x] RTL (Arabic) and LTR (English) support maintained
|
||||
- [x] Mobile responsiveness required
|
||||
- [x] Accessibility standards (WCAG AA) maintained
|
||||
- [x] No impact on authentication logic
|
||||
|
||||
## Technical Considerations
|
||||
|
||||
### Color Values
|
||||
|
||||
```css
|
||||
/* 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
|
||||
Reference in New Issue
Block a user