129 lines
4.1 KiB
Markdown
129 lines
4.1 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
|
|
|
|
- [x] Update Arabic link light variant classes
|
|
- [x] Update English link light variant classes
|
|
- [x] Update separator light variant class
|
|
- [x] Verify dark variant unchanged
|
|
- [x] Test on login page
|
|
- [x] Test on forgot-password page
|
|
- [x] Test RTL (Arabic) layout
|
|
- [x] Test LTR (English) layout
|
|
- [x] Verify contrast ratios
|
|
|
|
## Estimation
|
|
|
|
**Complexity:** Low
|
|
**Risk:** Low - Component-level CSS changes only
|
|
|
|
## Dependencies
|
|
|
|
- Epic 12 completed (brand colors defined)
|
|
|
|
---
|
|
|
|
## Dev Agent Record
|
|
|
|
### Status
|
|
Ready for Review
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5
|
|
|
|
### File List
|
|
| File | Action |
|
|
|------|--------|
|
|
| `resources/views/components/language-toggle.blade.php` | Modified |
|
|
| `tests/Feature/Components/LanguageToggleTest.php` | Created |
|
|
|
|
### Change Log
|
|
- Updated light variant inactive text from `text-body/70` to `text-primary`
|
|
- Updated light variant hover text from `hover:text-body` to `hover:text-cta-hover`
|
|
- Updated light variant hover background from `hover:bg-active-hover` to `hover:bg-primary/10`
|
|
- Updated light variant separator from `text-body/30` to `text-primary/50`
|
|
- Dark variant styling preserved unchanged
|
|
- Active state styling preserved unchanged
|
|
- Created comprehensive test suite (12 tests, 30 assertions)
|
|
|
|
### Completion Notes
|
|
- All acceptance criteria implemented
|
|
- Light variant now uses Dark Forest Green (#2D3624) for inactive text - meets WCAG AA contrast on Warm Cream (#F4F1EA)
|
|
- Hover states use Darker Gold (#8A7555) for better visual feedback
|
|
- Separator visibility improved with 50% opacity primary color
|
|
- Dark variant and active states remain unchanged as specified
|