4.1 KiB

Raw Blame History

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)

'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',

New Implementation (Light Variant)

'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)

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

4.1 KiB Raw Blame History