libra/docs/stories/story-13.5-visual-qa.md

Story 13.5: Visual QA and Refinement

Story

As a product owner I want to ensure all auth pages look polished and consistent So that users have a professional, trustworthy experience

Acceptance Criteria

AC1: Cross-Browser Testing

Given the updated auth pages When tested in major browsers Then all pages render correctly in:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

AC2: Desktop Viewport Testing

Given desktop viewports When auth pages are viewed Then the split layout displays correctly at:

• 1920x1080 (Full HD)
• 1440x900 (Common laptop)
• 1280x720 (HD)
• 1024x768 (iPad landscape / small desktop)

AC3: Mobile Viewport Testing

Given mobile viewports When auth pages are viewed Then the mobile layout displays correctly at:

• 375x667 (iPhone SE)
• 390x844 (iPhone 12/13/14)
• 428x926 (iPhone 14 Plus)
• 360x800 (Android common)
• 768x1024 (iPad portrait)

AC4: RTL Visual Verification

Given Arabic language selected When all auth pages are viewed Then:

• Split layout mirrors correctly (logo panel on right)
• Form alignment is correct (right-aligned labels)
• Language toggle in correct position
• No text overflow or clipping
• Pattern (if directional) mirrors appropriately

AC5: Logo Visibility Verification

Given the LIBRA logo on the brand panel When viewed on desktop Then:

• Logo is clearly visible on dark background
• Logo is properly centered
• Logo size is appropriate (not too large, not too small)
• Logo maintains aspect ratio

AC6: Language Toggle Visibility Verification

Given the language toggle on auth pages When viewed Then:

• Text is clearly readable
• Contrast ratio meets WCAG AA
• Active state is clearly indicated
• Hover states are visible
• Touch target is adequate on mobile (44px min)

AC7: Pattern Subtlety Verification

Given the background pattern When viewed across all pages Then:

• Pattern is visible but not distracting
• Text remains easily readable
• Pattern doesn't create visual noise
• Pattern works on all screen sizes

AC8: Form Element Alignment

Given form elements on auth pages When viewed Then:

• Labels align consistently
• Input fields have consistent width
• Buttons are properly sized
• Error messages align with fields
• Spacing is consistent

AC9: Color Consistency

Given the brand color palette When auth pages are viewed Then:

• Left panel uses correct Dark Forest Green (#2D3624)
• Right panel uses correct Warm Cream (#F4F1EA)
• Buttons use correct Warm Gold (#A68966)
• Text uses correct colors
• No unintended color variations

AC10: Animation/Transition Polish

Given interactive elements When interacted with Then:

• Hover transitions are smooth (150-200ms)
• Focus states are visible
• No jarring visual changes
• Page transitions (if any) are smooth

AC11: Print Stylesheet (Optional)

Given a user prints an auth page When the page is printed Then:

• Form is readable
• Background pattern doesn't waste ink
• Logo prints appropriately (or is hidden)

AC12: Fix Any Visual Issues

Given issues discovered during QA When fixes are needed Then:

• Issues are documented
• Fixes are implemented
• Fixes are re-tested
• No regression introduced

Technical Notes

QA Checklist Template

## Browser: [Browser Name]
## Viewport: [Width x Height]
## Language: [EN/AR]

### Login Page
- [ ] Split layout correct
- [ ] Logo visible and centered
- [ ] Form aligned properly
- [ ] Language toggle visible
- [ ] Pattern subtle
- [ ] Form validation works
- [ ] Error messages display

### Forgot Password Page
- [ ] Layout correct
- [ ] Form works
- [ ] Messages display

### Reset Password Page
- [ ] Layout correct
- [ ] Form works
- [ ] Password visibility works

### 2FA Challenge Page
- [ ] Layout correct
- [ ] OTP input works
- [ ] Recovery code option works

### Confirm Password Page
- [ ] Layout correct
- [ ] Form works

### Email Verification Page
- [ ] Layout correct
- [ ] Resend button works

### Overall
- [ ] No horizontal scrolling
- [ ] No visual glitches
- [ ] Colors correct
- [ ] Spacing consistent

Common Issues to Watch For

1. Logo sizing - May need adjustment per viewport
2. Pattern tiling - Check for visible seams
3. RTL mirroring - Icons and directional elements
4. Input placeholder visibility - May need color adjustment
5. Focus ring visibility - Ensure visible on both backgrounds
6. Z-index stacking - Language toggle over pattern

Files That May Need Adjustment

• resources/views/components/layouts/auth/split.blade.php
• resources/css/app.css (pattern, spacing)
• resources/views/components/language-toggle.blade.php
• resources/views/components/logo.blade.php (if size needs tweaking)

Dev Checklist

• Test Chrome desktop
• Test Firefox desktop
• Test Safari desktop
• Test Edge desktop
• Test Chrome mobile
• Test Safari mobile (iOS)
• Test Chrome Android
• Test all viewports listed
• Test English layout
• Test Arabic layout
• Document any issues found
• Fix all issues
• Re-test fixes
• Get stakeholder sign-off

Estimation

Complexity: Medium Risk: Low - Refinement only, no functional changes

Dependencies

• Story 13.1 (Language Toggle) - Must be completed
• Story 13.2 (Split Layout) - Must be completed
• Story 13.3 (Pattern) - Must be completed
• Story 13.4 (Pages Migration) - Must be completed

Sign-off

• Developer sign-off
• Design review (if applicable)
• Stakeholder approval