From e557fb1104237e5cd21086db92c227f7ad63caa6 Mon Sep 17 00:00:00 2001 From: Naser Mansour Date: Sun, 4 Jan 2026 02:20:00 +0200 Subject: [PATCH] created epic 13 make a better login page design --- .../epic-12-branding-refresh.md | 0 docs/epics/epic-13-auth-page-design.md | 167 +++++++++++++ docs/epics/index.md | 11 +- .../story-13.1-language-toggle-visibility.md | 96 ++++++++ docs/stories/story-13.2-auth-split-layout.md | 139 +++++++++++ docs/stories/story-13.3-background-pattern.md | 148 +++++++++++ .../story-13.4-auth-pages-migration.md | 182 ++++++++++++++ docs/stories/story-13.5-visual-qa.md | 231 ++++++++++++++++++ 8 files changed, 973 insertions(+), 1 deletion(-) rename docs/{stories => epics}/epic-12-branding-refresh.md (100%) create mode 100644 docs/epics/epic-13-auth-page-design.md create mode 100644 docs/stories/story-13.1-language-toggle-visibility.md create mode 100644 docs/stories/story-13.2-auth-split-layout.md create mode 100644 docs/stories/story-13.3-background-pattern.md create mode 100644 docs/stories/story-13.4-auth-pages-migration.md create mode 100644 docs/stories/story-13.5-visual-qa.md diff --git a/docs/stories/epic-12-branding-refresh.md b/docs/epics/epic-12-branding-refresh.md similarity index 100% rename from docs/stories/epic-12-branding-refresh.md rename to docs/epics/epic-12-branding-refresh.md diff --git a/docs/epics/epic-13-auth-page-design.md b/docs/epics/epic-13-auth-page-design.md new file mode 100644 index 0000000..86b73a6 --- /dev/null +++ b/docs/epics/epic-13-auth-page-design.md @@ -0,0 +1,167 @@ +# Epic 13: Authentication Pages Design Enhancement + +## Epic Goal + +Transform the authentication pages (login, forgot password, reset password, etc.) from plain layouts into visually engaging, branded experiences using a split-screen design with the LIBRA logo prominently featured and improved component visibility. + +## Epic Description + +### Existing System Context + +- **Current functionality:** Auth pages use a simple centered layout with minimal styling +- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4 +- **Current layout:** `resources/views/components/layouts/auth/simple.blade.php` - plain white/cream background +- **Existing split layout:** `resources/views/components/layouts/auth/split.blade.php` - exists but uses generic styling +- **Language toggle component:** `resources/views/components/language-toggle.blade.php` - has `light` variant with low visibility + +### Enhancement Details + +**What's being added/changed:** + +1. **Split Layout Design for Auth Pages** + - Left panel: Dark primary background (`#2D3624`) with centered LIBRA logo + - Right panel: Warm cream background with subtle botanical/geometric pattern and form content + - Responsive: On mobile, shows only the form side with logo above + +2. **Language Toggle Visibility Fix** + - Update `light` variant to use darker color (`text-primary` instead of `text-body/70`) + - Ensure proper contrast on light backgrounds + - Maintain existing appearance on dark backgrounds (public navigation) + +3. **Subtle Background Pattern** + - Add elegant, subtle pattern to form side (wheat/botanical motif or geometric) + - Pattern should complement the brand without being distracting + - SVG-based for performance and scalability + +**Auth Pages Affected:** +- `/login` - Login page +- `/forgot-password` - Forgot password page +- `/reset-password` - Reset password page +- `/two-factor-challenge` - 2FA challenge page +- `/confirm-password` - Password confirmation page +- `/email/verify` - Email verification page + +**Success criteria:** +- Auth pages display split layout on desktop (logo left, form right) +- Mobile view maintains usability with logo above form +- Language toggle clearly visible on all auth pages +- Subtle pattern adds visual interest without distraction +- Brand consistency with existing design system +- Bilingual support maintained (RTL/LTR) + +--- + +## Stories + +### Story 13.1: Language Toggle Visibility Enhancement +**File:** `story-13.1-language-toggle-visibility.md` + +Update the language toggle component's `light` variant to use a darker, more visible color scheme while maintaining the existing `dark` variant appearance for navigation headers. + +### Story 13.2: Auth Layout Split Design Update +**File:** `story-13.2-auth-split-layout.md` + +Update the existing split layout (`auth/split.blade.php`) to use LIBRA brand colors. Left panel with Dark Forest Green background and centered logo, right panel with form content. + +### Story 13.3: Subtle Background Pattern Implementation +**File:** `story-13.3-background-pattern.md` + +Create and implement a subtle SVG-based background pattern for the auth form side. Pattern should use brand colors at low opacity for an elegant, professional appearance. + +### Story 13.4: Auth Pages Migration to Split Layout +**File:** `story-13.4-auth-pages-migration.md` + +Migrate all auth pages from the simple layout to the enhanced split layout. Ensure proper RTL support and mobile responsiveness. + +### Story 13.5: Visual QA and Refinement +**File:** `story-13.5-visual-qa.md` + +Comprehensive visual testing across all auth pages, browsers, and screen sizes. Fix any visual issues and ensure brand consistency. + +--- + +## Compatibility Requirements + +- [x] Existing auth functionality remains unchanged +- [x] Form validation and error handling preserved +- [x] RTL (Arabic) and LTR (English) support maintained +- [x] Mobile responsiveness required +- [x] Accessibility standards (WCAG AA) maintained +- [x] No impact on authentication logic + +## Technical Considerations + +### Color Values + +```css +/* Primary for left panel */ +--color-primary: #2D3624; /* Dark Forest Green */ + +/* Background for right panel */ +--color-background: #F4F1EA; /* Warm Cream */ + +/* Pattern overlay (low opacity) */ +--color-cta: #A68966; /* Warm Gold at ~5-10% opacity */ + +/* Language toggle light variant */ +--color-primary: #2D3624; /* Dark Forest Green for text */ +``` + +### Layout Structure + +``` +Desktop (lg+): ++---------------------------+---------------------------+ +| | | +| LIBRA Logo | [Language Toggle] | +| (centered) | | +| | Login Form | +| Dark Forest Green | (centered, pattern bg) | +| Background | | +| | Warm Cream Background | ++---------------------------+---------------------------+ + +Mobile: ++---------------------------+ +| [Language Toggle] | +| | +| LIBRA Logo | +| | +| Login Form | +| (pattern bg) | ++---------------------------+ +``` + +### SVG Pattern Considerations + +- Pattern should be subtle (5-10% opacity) +- Use wheat/botanical motif aligned with LIBRA brand +- Alternatively, use geometric pattern for cleaner look +- Must tile seamlessly +- Performance-optimized (small file size) + +--- + +## Risk Mitigation + +- **Primary Risk:** Layout changes may break on certain screen sizes or RTL mode +- **Mitigation:** Thorough testing on multiple devices and both language directions +- **Rollback Plan:** Auth layout can be reverted to simple layout via single file change + +## Definition of Done + +- [ ] All stories completed with acceptance criteria met +- [ ] Language toggle visible and accessible on auth pages +- [ ] Split layout displays correctly on desktop and tablet +- [ ] Mobile layout is functional and attractive +- [ ] RTL (Arabic) layout mirrors correctly +- [ ] Pattern is subtle and professional +- [ ] No regression in auth functionality +- [ ] Visual QA completed on major browsers (Chrome, Firefox, Safari) +- [ ] Accessibility audit passed (contrast ratios, focus states) + +## Dependencies + +- Epic 12 (Branding Refresh) should be completed first for consistent colors +- Existing logo assets from Epic 12 +- No external dependencies required diff --git a/docs/epics/index.md b/docs/epics/index.md index 2bee744..a61c7d4 100644 --- a/docs/epics/index.md +++ b/docs/epics/index.md @@ -27,8 +27,11 @@ This document provides an index of all epics for the Libra Law Firm platform dev | 8 | [Email Notification System](./epic-8-email-notifications.md) | 10 | High | Epic 1-4 | | 9 | [Design & Branding Implementation](./epic-9-design-branding.md) | 11 | High | Epic 1 | | 10 | [Brand Color Refresh](./epic-10-brand-color-refresh.md) | 3 | High | Epic 9 | +| 11 | [Guest Booking](./epic-11-guest-booking.md) | 4 | High | Epic 3 | +| 12 | [Branding Refresh - Logo & Colors](./epic-12-branding-refresh.md) | 6 | High | Epic 9, 10 | +| 13 | [Auth Page Design Enhancement](./epic-13-auth-page-design.md) | 5 | Medium | Epic 12 | -**Total Stories:** 68 +**Total Stories:** 83 --- @@ -53,6 +56,9 @@ This document provides an index of all epics for the Libra Law Firm platform dev ### Phase 5: Brand Refresh 10. **Epic 10: Brand Color Refresh** - Update to new LIBRA for Rights color palette +11. **Epic 11: Guest Booking** - Public booking form for unauthenticated visitors +12. **Epic 12: Branding Refresh** - Logo and color scheme updates +13. **Epic 13: Auth Page Design** - Enhanced authentication page layouts --- @@ -62,6 +68,7 @@ This document provides an index of all epics for the Libra Law Firm platform dev Epic 1 (Core Foundation) ├── Epic 2 (User Management) │ └── Epic 3 (Booking) + │ │ └── Epic 11 (Guest Booking) │ └── Epic 4 (Timeline) │ └── Epic 6 (Admin Dashboard) │ └── Epic 7 (Client Dashboard) @@ -69,6 +76,8 @@ Epic 1 (Core Foundation) ├── Epic 5 (Posts) └── Epic 9 (Design) └── Epic 10 (Brand Color Refresh) + └── Epic 12 (Branding Refresh) + └── Epic 13 (Auth Page Design) ``` --- diff --git a/docs/stories/story-13.1-language-toggle-visibility.md b/docs/stories/story-13.1-language-toggle-visibility.md new file mode 100644 index 0000000..2902d65 --- /dev/null +++ b/docs/stories/story-13.1-language-toggle-visibility.md @@ -0,0 +1,96 @@ +# 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 + +- [ ] 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) diff --git a/docs/stories/story-13.2-auth-split-layout.md b/docs/stories/story-13.2-auth-split-layout.md new file mode 100644 index 0000000..fdf6b53 --- /dev/null +++ b/docs/stories/story-13.2-auth-split-layout.md @@ -0,0 +1,139 @@ +# Story 13.2: Auth Layout Split Design Update + +## Story + +**As a** visitor to the authentication pages +**I want to** see a visually appealing split-screen layout with the LIBRA branding +**So that** the login experience feels professional and aligned with the brand identity + +## Acceptance Criteria + +### AC1: Left Panel - Brand Side (Desktop) + +**Given** the split layout is viewed on desktop (lg+ breakpoint) +**When** the page loads +**Then** the left panel displays: +- Full height (`h-full`) +- Dark Forest Green background (`bg-primary` #2D3624) +- LIBRA logo centered vertically and horizontally +- Logo size: Large (`size="lg"` or `size="xl"`) +- No text below logo (clean, minimal design) + +### AC2: Right Panel - Form Side (Desktop) + +**Given** the split layout is viewed on desktop +**When** the page loads +**Then** the right panel displays: +- Warm Cream background (`bg-background` #F4F1EA) +- Form content centered +- Language toggle in top-right corner +- Adequate padding for comfortable reading + +### AC3: Mobile Layout + +**Given** the split layout is viewed on mobile (below lg breakpoint) +**When** the page loads +**Then**: +- Left panel (brand side) is hidden +- Logo appears above the form (centered, size="xl") +- Form takes full width with padding +- Language toggle in top-right corner +- Background uses Warm Cream + +### AC4: RTL (Arabic) Support + +**Given** the user's locale is Arabic +**When** the split layout renders +**Then**: +- Layout mirrors correctly (brand panel on right, form on left) +- Language toggle appears in top-left (logical `end`) +- All text alignment respects RTL + +### AC5: Language Toggle Positioning + +**Given** the language toggle component +**When** displayed on the split layout +**Then**: +- Position: Fixed in top corner (`absolute end-4 top-4 z-50`) +- Uses `variant="light"` for visibility on light background +- Accessible via keyboard navigation + +### AC6: Remove Inspiring Quotes + +**Given** the existing split layout has inspiring quotes +**When** the layout is updated +**Then** the quotes section is removed for a cleaner, branded appearance + +### AC7: Responsive Breakpoints + +**Given** various screen sizes +**When** the layout responds +**Then**: +- `lg+` (≥1024px): Full split layout (50/50) +- Below `lg`: Mobile layout (form only with logo above) + +## Technical Notes + +### File to Modify +- `resources/views/components/layouts/auth/split.blade.php` + +### Current Structure +```html +
+ + + +
...
+
+``` + +### Target Structure +```html +
+ + + +
+ +
+ +
+ +
+
+``` + +### Color Values +| Element | Color | Hex | +|---------|-------|-----| +| Left Panel Background | `bg-primary` | #2D3624 | +| Right Panel Background | `bg-background` | #F4F1EA | +| Logo | Default (adapts to dark bg) | - | + +## Dev Checklist + +- [ ] Update left panel background to `bg-primary` +- [ ] Center logo in left panel (remove quotes) +- [ ] Update right panel background to `bg-background` +- [ ] Position language toggle correctly +- [ ] Test desktop layout (50/50 split) +- [ ] Test mobile layout (form only) +- [ ] Test RTL mirroring +- [ ] Verify logo visibility on dark background +- [ ] Remove inspiring quotes code +- [ ] Ensure z-index layering correct + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Layout restructuring with existing components + +## Dependencies + +- Story 13.1 (Language Toggle Visibility) - Can run in parallel +- Epic 12 (Brand colors defined) diff --git a/docs/stories/story-13.3-background-pattern.md b/docs/stories/story-13.3-background-pattern.md new file mode 100644 index 0000000..ec392d6 --- /dev/null +++ b/docs/stories/story-13.3-background-pattern.md @@ -0,0 +1,148 @@ +# Story 13.3: Subtle Background Pattern Implementation + +## Story + +**As a** visitor to the authentication pages +**I want to** see a subtle, elegant background pattern on the form side +**So that** the page feels polished and professionally designed + +## Acceptance Criteria + +### AC1: Create SVG Pattern Asset + +**Given** the need for a subtle background pattern +**When** the pattern is created +**Then**: +- SVG format for scalability and performance +- Uses brand color (Warm Gold #A68966) at 5-8% opacity +- Pattern type: Geometric or botanical (wheat/leaf motif) +- Seamlessly tileable +- File size under 5KB for performance + +### AC2: Pattern Placement + +**Given** the SVG pattern is created +**When** applied to the auth layout +**Then**: +- Pattern appears on the form side (right panel desktop, full background mobile) +- Pattern overlays the Warm Cream background +- Pattern is fixed/static (doesn't scroll with content) +- Pattern doesn't interfere with form readability + +### AC3: Pattern Opacity + +**Given** readability requirements +**When** the pattern is displayed +**Then**: +- Opacity is subtle (5-8%) +- Text remains clearly readable +- Pattern adds visual interest without distraction + +### AC4: CSS Implementation + +**Given** the pattern asset +**When** integrated into CSS +**Then**: +- Applied via `background-image` or pseudo-element +- Uses `background-repeat: repeat` for tiling +- Background is fixed or positioned appropriately +- Can be easily disabled if needed + +### AC5: Performance Consideration + +**Given** page load performance +**When** the pattern loads +**Then**: +- Pattern is inlined or loaded efficiently +- No noticeable delay in page rendering +- Pattern works without JavaScript + +### AC6: Mobile Compatibility + +**Given** mobile viewport +**When** pattern is displayed +**Then**: +- Pattern scales appropriately +- No horizontal scrolling caused by pattern +- Pattern remains subtle on smaller screens + +## Technical Notes + +### Pattern Options + +**Option A: Geometric (Recommended)** +- Simple diagonal lines or dots +- Clean, modern aesthetic +- Easier to create and maintain + +**Option B: Botanical** +- Wheat/leaf silhouettes +- Aligns with LIBRA brand identity +- More complex but more unique + +### SVG Pattern Example (Geometric) +```svg + + + +``` + +### CSS Implementation Options + +**Option 1: Inline SVG in CSS** +```css +.auth-pattern { + background-image: url("data:image/svg+xml,..."); + background-repeat: repeat; +} +``` + +**Option 2: Pseudo-element Overlay** +```css +.auth-form-side::before { + content: ''; + position: absolute; + inset: 0; + background-image: url('/images/pattern.svg'); + background-repeat: repeat; + opacity: 0.06; + pointer-events: none; +} +``` + +**Option 3: Tailwind Arbitrary Value** +```html +
+``` + +### Files to Create/Modify +- `public/images/auth-pattern.svg` (new) OR inline in CSS +- `resources/css/app.css` (if adding pattern class) +- `resources/views/components/layouts/auth/split.blade.php` (apply pattern) + +### Pattern Design Guidelines +- Color: Warm Gold (#A68966) +- Opacity: 5-8% (0.05-0.08) +- Size: 20-40px tiles for subtle effect +- Style: Minimalist, professional + +## Dev Checklist + +- [ ] Design/select pattern style (geometric vs botanical) +- [ ] Create SVG pattern file +- [ ] Optimize SVG for file size +- [ ] Add pattern to auth layout CSS +- [ ] Test pattern visibility at various screen sizes +- [ ] Verify text readability over pattern +- [ ] Test in both Arabic and English +- [ ] Verify no horizontal scroll issues +- [ ] Check pattern on high-DPI displays + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Decorative enhancement only + +## Dependencies + +- Story 13.2 (Auth Split Layout) - Must be completed first diff --git a/docs/stories/story-13.4-auth-pages-migration.md b/docs/stories/story-13.4-auth-pages-migration.md new file mode 100644 index 0000000..f07e4eb --- /dev/null +++ b/docs/stories/story-13.4-auth-pages-migration.md @@ -0,0 +1,182 @@ +# Story 13.4: Auth Pages Migration to Split Layout + +## Story + +**As a** user accessing any authentication page +**I want to** see the consistent, branded split layout +**So that** all auth pages provide a cohesive, professional experience + +## Acceptance Criteria + +### AC1: Login Page Migration + +**Given** the login page at `/login` +**When** the page loads +**Then**: +- Uses the updated split layout (`x-layouts.auth.split` or updated `x-layouts.auth`) +- Form content displays correctly +- All form validation works as before +- "Forgot password" link works +- "Remember me" checkbox works + +### AC2: Forgot Password Page Migration + +**Given** the forgot password page at `/forgot-password` +**When** the page loads +**Then**: +- Uses the updated split layout +- Email input displays correctly +- Form submission works as before +- Success/error messages display properly + +### AC3: Reset Password Page Migration + +**Given** the reset password page at `/reset-password/{token}` +**When** the page loads +**Then**: +- Uses the updated split layout +- Password fields display correctly +- Password visibility toggle works +- Form validation works as before + +### AC4: Two-Factor Challenge Page Migration + +**Given** the 2FA challenge page at `/two-factor-challenge` +**When** the page loads +**Then**: +- Uses the updated split layout +- OTP input displays correctly +- Recovery code option works +- Form submission works as before + +### AC5: Confirm Password Page Migration + +**Given** the confirm password page at `/confirm-password` +**When** the page loads +**Then**: +- Uses the updated split layout +- Password field displays correctly +- Form submission works as before + +### AC6: Email Verification Page Migration + +**Given** the email verification page at `/email/verify` +**When** the page loads +**Then**: +- Uses the updated split layout +- Verification message displays correctly +- Resend button works as before + +### AC7: Update Default Auth Layout + +**Given** the auth layout wrapper (`x-layouts.auth`) +**When** called by auth pages +**Then**: +- Routes to the split layout instead of simple layout +- All existing slot content passes through correctly + +### AC8: RTL Support Verified + +**Given** Arabic language selected +**When** any auth page loads +**Then**: +- Layout correctly mirrors +- Form labels align right +- Input text aligns right +- Error messages align right + +### AC9: Mobile Responsiveness Verified + +**Given** mobile viewport (below lg breakpoint) +**When** any auth page loads +**Then**: +- Single column layout displays +- Logo appears above form +- All form elements are touch-friendly (min 44px) +- No horizontal scrolling + +### AC10: Accessibility Maintained + +**Given** accessibility requirements +**When** auth pages render +**Then**: +- Skip link still works +- Focus states visible +- Screen reader navigation works +- Form labels properly associated + +## Technical Notes + +### Files to Modify + +| File | Change | +|------|--------| +| `resources/views/components/layouts/auth.blade.php` | Update to use split layout | +| `resources/views/livewire/auth/login.blade.php` | Verify layout usage | +| `resources/views/livewire/auth/forgot-password.blade.php` | Verify layout usage | +| `resources/views/livewire/auth/reset-password.blade.php` | Verify layout usage | +| `resources/views/livewire/auth/two-factor-challenge.blade.php` | Verify layout usage | +| `resources/views/livewire/auth/confirm-password.blade.php` | Verify layout usage | +| `resources/views/livewire/auth/verify-email.blade.php` | Verify layout usage | + +### Current Auth Layout Wrapper +```php +// resources/views/components/layouts/auth.blade.php + + {{ $slot }} + +``` + +### Updated Auth Layout Wrapper +```php +// resources/views/components/layouts/auth.blade.php + + {{ $slot }} + +``` + +### Auth Page Structure +All auth pages use this pattern: +```php + +
+ + +
+ +``` + +No changes needed to individual page content - just the layout wrapper. + +## Dev Checklist + +- [ ] Update `auth.blade.php` to use split layout +- [ ] Test login page functionality +- [ ] Test forgot-password page functionality +- [ ] Test reset-password page functionality +- [ ] Test two-factor-challenge page functionality +- [ ] Test confirm-password page functionality +- [ ] Test verify-email page functionality +- [ ] Test all pages in Arabic (RTL) +- [ ] Test all pages on mobile +- [ ] Verify form validation still works +- [ ] Verify error messages display correctly +- [ ] Verify success messages display correctly +- [ ] Run existing auth tests + +## Estimation + +**Complexity:** Low-Medium +**Risk:** Medium - Affects all auth pages, but changes are minimal + +## Dependencies + +- Story 13.2 (Auth Split Layout) - Must be completed first +- Story 13.3 (Background Pattern) - Should be completed first + +## Testing Notes + +Run existing auth tests to ensure no regression: +```bash +php artisan test tests/Feature/Auth/ +``` diff --git a/docs/stories/story-13.5-visual-qa.md b/docs/stories/story-13.5-visual-qa.md new file mode 100644 index 0000000..ab5c7e0 --- /dev/null +++ b/docs/stories/story-13.5-visual-qa.md @@ -0,0 +1,231 @@ +# 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