# 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

```markdown
## 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