naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created epic 13 make a better login page design

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 02:20:00 +02:00
parent 082545032a
commit e557fb1104
8 changed files with 973 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/stories/epic-12-branding-refresh.md
-151
View File
@@ -1,151 +0,0 @@
# Epic 12: Branding Refresh - Logo and Color Scheme Update
## Epic Goal
Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme to a refined dark charcoal and warm gold palette that creates an elegant, professional aesthetic.
## Epic Description
### Existing System Context
- **Current relevant functionality:** The application uses a square PNG logo in navbar and footer, with a color scheme that needs updating
- **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components
- **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components.
### Enhancement Details
**What's being added/changed:**
1. Update color palette to dark charcoal and warm gold theme
2. Adjust CSS for new color scheme
3. Update all brand assets colors (emails, PDFs)
**New Color Palette:**
| Color Name | Hex | Usage |
|------------|-----|-------|
| Primary (Dark Forest Green) | `#2D3624` | Header/Footer backgrounds |
| CTA (Warm Gold) | `#A68966` | Buttons, links, accents |
| Background (Warm Cream) | `#F4F1EA` | Main page background |
| Text (Forest Green) | `#2D322A` | Headings, body text |
| Card (Pure White) | `#FFFFFF` | Card backgrounds |
| Active (Olive Green) | `#4A5D23` | Active states, language toggle |
**Color Variants (for hover/active states):**
| Variant | Hex | Usage |
|---------|-----|-------|
| Primary Light | `#3D4634` | Primary hover state |
| CTA Hover | `#8A7555` | Button hover state |
| CTA Light | `#C4A882` | Light accent |
| Active Hover | `#5A7030` | Active state hover |
**How it integrates:**
- Tailwind CSS color configuration will be updated
- Existing Blade components will automatically use new colors via CSS variables
**Success criteria:**
- Color scheme consistently uses new palette across all pages
- Professional, elegant appearance maintained
- No visual regressions in existing UI components
## Stories
### Story 12.1: Logo Asset Deployment and CSS Layout Updates
**File:** `story-12.1-logo-asset-deployment.md`
**Status:** ✅ Completed (no changes needed - logo already deployed)
Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment.
### Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
**File:** `story-12.2-core-css-theme-update.md`
**Status:** 🔄 Needs Reimplementation
Update Tailwind CSS theme variables to new dark charcoal and warm gold palette. Add color variants for hover, active, and light states.
### Story 12.3: Blade Component Color Migration
**File:** `story-12.3-blade-component-color-migration.md`
**Status:** 🔄 Needs Reimplementation
Update all Blade components and pages to use the new color palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.
### Story 12.4: Email Template Color Update
**File:** `story-12.4-email-template-color-update.md`
**Status:** 🔄 Needs Reimplementation
Update email templates to use new colors. Includes theme CSS, header/footer components, button styles, and all notification emails.
### Story 12.5: PDF Template Color Update
**File:** `story-12.5-pdf-template-color-update.md`
**Status:** 🔄 Needs Reimplementation
Update PDF export templates to use new colors. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.
### Story 12.6: Brand Documentation Update
**File:** `story-12.6-documentation-update.md`
**Status:** ⏳ Blocked (after 12.2-12.5)
Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new color palette. Update test color assertions. Final cleanup and verification.
## Compatibility Requirements
- [x] Existing APIs remain unchanged
- [x] Database schema changes are backward compatible (N/A - no DB changes)
- [x] UI changes follow existing patterns
- [x] Performance impact is minimal
## Risk Mitigation
- **Primary Risk:** Color changes may affect accessibility (contrast ratios)
- **Mitigation:** Test all color combinations for WCAG AA compliance; adjust shades if needed
- **Rollback Plan:** Git revert to previous commit; old logo files preserved in git history
## Definition of Done
- [ ] All stories completed with acceptance criteria met
- [ ] New logo displays correctly across all pages and devices
- [ ] Color scheme is consistent throughout the application
- [ ] Brand documentation is updated
- [ ] No regression in existing features
- [ ] Visual QA completed on major pages
## Technical Notes
### Color Values for Implementation
```css
/* New Dark Forest Green & Warm Gold Palette */
--color-primary: #2D3624; /* Dark Forest Green - Header/Footer backgrounds */
--color-cta: #A68966; /* Warm Gold - Buttons, links, accents */
--color-background: #F4F1EA; /* Warm Cream - Main page background */
--color-text: #2D322A; /* Forest Green - Headings, body text */
--color-card: #FFFFFF; /* Pure White - Card backgrounds */
--color-active: #4A5D23; /* Olive Green - Active states */
/* Color variants for UI states */
--color-primary-light: #3D4634; /* Primary hover state */
--color-cta-hover: #8A7555; /* Button hover state */
--color-cta-light: #C4A882; /* Light accent */
--color-active-hover: #5A7030; /* Active state hover */
```
### Color Usage Guidelines
| Element | Color | Hex |
|---------|-------|-----|
| Header/Footer Background | Primary | `#2D3624` |
| Main Page Background | Background | `#F4F1EA` |
| Card Backgrounds | Card | `#FFFFFF` |
| CTA Buttons | CTA | `#A68966` |
| Button Hover | CTA Hover | `#8A7555` |
| Headings & Text | Text | `#2D322A` |
| Active Language Toggle | Active | `#4A5D23` |
| Links | CTA | `#A68966` |
| Link Hover | CTA Hover | `#8A7555` |
## Dependencies
- Logo files already deployed
- No external dependencies required
docs/stories/story-13.1-language-toggle-visibility.md
+96
View File
@@ -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)
docs/stories/story-13.2-auth-split-layout.md
+139
View File
@@ -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
<main class="relative grid h-dvh ... lg:grid-cols-2">
<!-- Left: Brand panel with neutral-900 bg and quotes -->
<div class="bg-muted relative hidden h-full ... lg:flex">
<div class="absolute inset-0 bg-neutral-900"></div>
<!-- Logo and quotes -->
</div>
<!-- Right: Form -->
<div class="w-full lg:p-8">...</div>
</main>
```
### Target Structure
```html
<main class="relative grid h-dvh ... lg:grid-cols-2">
<!-- Left: Brand panel with primary bg -->
<div class="relative hidden h-full flex-col items-center justify-center lg:flex bg-primary">
<x-logo size="xl" />
</div>
<!-- Right: Form with pattern bg -->
<div class="w-full bg-background lg:p-8">
<!-- Language toggle -->
<div class="absolute end-4 top-4 z-50">
<x-language-toggle variant="light" />
</div>
<!-- Form content -->
</div>
</main>
```
### 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)
docs/stories/story-13.3-background-pattern.md
+148
View File
@@ -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
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
</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
<div class="bg-[url('/images/pattern.svg')]">
```
### 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
docs/stories/story-13.4-auth-pages-migration.md
+182
View File
@@ -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
<x-layouts.auth.simple :title="$title ?? null">
{{ $slot }}
</x-layouts.auth.simple>
```
### Updated Auth Layout Wrapper
```php
// resources/views/components/layouts/auth.blade.php
<x-layouts.auth.split :title="$title ?? null">
{{ $slot }}
</x-layouts.auth.split>
```
### Auth Page Structure
All auth pages use this pattern:
```php
<x-layouts.auth>
<div class="flex flex-col gap-6">
<x-auth-header :title="..." :description="..." />
<!-- Form content -->
</div>
</x-layouts.auth>
```
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/
```
docs/stories/story-13.5-visual-qa.md
+231
View File
@@ -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