232 lines
5.6 KiB
Markdown
232 lines
5.6 KiB
Markdown
# 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
|