created epic 13 make a better login page design

2026-01-04 02:20:00 +02:00
parent 082545032a
commit e557fb1104
8 changed files with 973 additions and 1 deletions
@@ -0,0 +1,96 @@
+# Story 13.1: Language Toggle Visibility Enhancement
+
+## Story
+
+**As a** user on authentication pages
+**I want to** clearly see and interact with the language toggle
+**So that** I can easily switch between Arabic and English
+
+## Acceptance Criteria
+
+### AC1: Update Light Variant Text Color
+
+**Given** the language toggle has a `light` variant for light backgrounds
+**When** viewed on auth pages (white/cream background)
+**Then** the inactive language uses `text-primary` (Dark Forest Green #2D3624) instead of `text-body/70`
+
+### AC2: Update Light Variant Hover State
+
+**Given** the user hovers over an inactive language option
+**When** the variant is `light`
+**Then** the hover state uses:
+- Text: `text-cta-hover` (Darker Gold #8A7555)
+- Background: `bg-primary/10` (subtle dark background)
+
+### AC3: Update Light Variant Separator Color
+
+**Given** the separator `|` between languages
+**When** the variant is `light`
+**Then** it uses `text-primary/50` instead of `text-body/30` for better visibility
+
+### AC4: Dark Variant Unchanged
+
+**Given** the language toggle has a `dark` variant for dark backgrounds (navigation bar)
+**When** viewed on the public navigation
+**Then** the existing styling remains unchanged:
+- Inactive: `text-off-white`
+- Hover: `text-cta hover:bg-active-hover`
+- Separator: `text-cta/50`
+
+### AC5: Active State Unchanged
+
+**Given** the currently active language
+**When** displayed in either variant
+**Then** it maintains the existing active styling:
+- `bg-active text-white font-bold`
+
+### AC6: Contrast Compliance
+
+**Given** accessibility requirements
+**When** the light variant is used on Warm Cream background (#F4F1EA)
+**Then** the text contrast meets WCAG AA:
+- Dark Forest Green (#2D3624) on Warm Cream (#F4F1EA): ≥4.5:1
+
+## Technical Notes
+
+### File to Modify
+- `resources/views/components/language-toggle.blade.php`
+
+### Current Implementation (Light Variant)
+```php
+'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
+```
+
+### New Implementation (Light Variant)
+```php
+'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'ar' && $variant === 'light',
+```
+
+### Color Reference
+| Element | Current | New |
+|---------|---------|-----|
+| Inactive Text | `text-body/70` (~70% opacity) | `text-primary` (100% Dark Forest Green) |
+| Hover Text | `text-body` | `text-cta-hover` (Darker Gold) |
+| Hover Background | `bg-active-hover` | `bg-primary/10` (subtle dark) |
+| Separator | `text-body/30` | `text-primary/50` |
+
+## Dev Checklist
+
+- [ ] Update Arabic link light variant classes
+- [ ] Update English link light variant classes
+- [ ] Update separator light variant class
+- [ ] Verify dark variant unchanged
+- [ ] Test on login page
+- [ ] Test on forgot-password page
+- [ ] Test RTL (Arabic) layout
+- [ ] Test LTR (English) layout
+- [ ] Verify contrast ratios
+
+## Estimation
+
+**Complexity:** Low
+**Risk:** Low - Component-level CSS changes only
+
+## Dependencies
+
+- Epic 12 completed (brand colors defined)