97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
# 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)
|