# Story 10.3: Email Template Color Update

## Story

**As a** developer
**I want to** update email templates to use the new brand colors
**So that** all email communications reflect the new LIBRA for Rights branding

## Acceptance Criteria

### AC1: Email Theme CSS Updated

**Given** `resources/views/vendor/mail/html/themes/default.css` uses old colors
**When** I update the stylesheet
**Then** the following changes are applied:

| Element | Old Color | New Color |
|---------|-----------|-----------|
| Links (`a`) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Headings (h1, h2, h3) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Header background | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Footer links | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) |
| Primary button | `#D4AF37` bg, `#0A1F44` text | `#4A4A42` bg, `#E8E4DC` text |
| Table headers | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Panel border | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) |

### AC2: Email Header Component Updated

**Given** `resources/views/vendor/mail/html/header.blade.php` may have inline styles
**When** I update the component
**Then** any inline color references use new palette

### AC3: Email Footer Component Updated

**Given** `resources/views/vendor/mail/html/footer.blade.php` may have inline styles
**When** I update the component
**Then** any inline color references use new palette

### AC4: Button Component Updated

**Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles
**When** I update the component
**Then** primary buttons use:
- Background: Charcoal (`#4A4A42`)
- Text: Off-White (`#E8E4DC`)

### AC5: Panel Component Updated

**Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles
**When** I update the component
**Then** panel border uses Warm Gray (`#C9C4BA`)

### AC6: Email Logo Updated

**Given** email header displays the logo
**When** emails are sent
**Then** the logo matches the new brand identity

### AC7: All Email Templates Tested

**Given** the application sends various email types
**When** I test each email template
**Then** colors display correctly:
- Welcome email
- Booking submitted confirmation
- Booking approved/rejected
- Consultation reminders (24h, 2h)
- Timeline update notification
- Admin notifications

### AC8: Plain Text Fallback Unaffected

**Given** plain text email templates exist
**When** colors are updated
**Then** plain text templates continue to work (no color changes needed)

## Technical Notes

### Files to Modify

**Theme CSS:**
- `resources/views/vendor/mail/html/themes/default.css`

**HTML Components:**
- `resources/views/vendor/mail/html/header.blade.php`
- `resources/views/vendor/mail/html/footer.blade.php`
- `resources/views/vendor/mail/html/button.blade.php`
- `resources/views/vendor/mail/html/panel.blade.php`
- `resources/views/vendor/mail/html/layout.blade.php` (if contains colors)

### Color Mapping for Email CSS

```css
/* Old → New */
#0A1F44 → #4A4A42  /* Navy → Charcoal */
#D4AF37 → #C9C4BA  /* Gold → Warm Gray */
```

### Email-Safe Colors

Email clients have limited CSS support. Ensure:
- Use inline styles for critical colors
- Test in major email clients (Gmail, Outlook, Apple Mail)
- Maintain fallback background colors

### Testing Emails

Use Laravel's mail preview or Mailtrap to test:
```bash
# Preview emails in browser
php artisan make:mail TestEmail --markdown=emails.test
```

## Dev Checklist

- [x] Update `default.css` header background color
- [x] Update `default.css` link colors
- [x] Update `default.css` heading colors
- [x] Update `default.css` button colors (`.button-primary`)
- [x] Update `default.css` table header colors
- [x] Update `default.css` panel border color
- [x] Update `default.css` footer link colors
- [x] Review `header.blade.php` for inline styles
- [x] Review `footer.blade.php` for inline styles
- [x] Review `button.blade.php` for inline styles
- [x] Review `panel.blade.php` for inline styles
- [x] Test Welcome email appearance
- [x] Test Booking emails appearance
- [x] Test Reminder emails appearance
- [x] Test Timeline update email appearance
- [x] Verify RTL email layout (Arabic)

## Estimation

**Complexity:** Low-Medium
**Risk:** Low - Email styling is isolated from main app

## Dependencies

- Story 10.5 (Logo Update) should be completed for email logo consistency

---

## Dev Agent Record

### Status

Ready for Review

### Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

### File List

**Modified:**
- `resources/views/vendor/mail/html/themes/default.css` - Updated all color references from old Navy/Gold to new Charcoal/Warm Gray palette
- `resources/views/vendor/mail/html/header.blade.php` - Updated inline background-color from #0A1F44 to #4A4A42
- `resources/views/vendor/mail/html/footer.blade.php` - Updated inline link colors from #D4AF37 to #C9C4BA

**Created:**
- `tests/Feature/Mail/EmailTemplateColorsTest.php` - 16 tests verifying new brand colors in email templates

**Reviewed (No Changes Needed):**
- `resources/views/vendor/mail/html/button.blade.php` - Uses CSS classes, no inline colors
- `resources/views/vendor/mail/html/panel.blade.php` - Uses CSS classes, no inline colors
- `resources/views/vendor/mail/html/layout.blade.php` - No color references

### Change Log

| File | Change |
|------|--------|
| `default.css` | Links: #0A1F44 → #4A4A42 |
| `default.css` | h1, h2, h3: #0A1F44 → #4A4A42 |
| `default.css` | .header bg: #0A1F44 → #4A4A42 |
| `default.css` | .footer a: #D4AF37 → #C9C4BA |
| `default.css` | .table th: #0A1F44 → #4A4A42 |
| `default.css` | .button-primary: bg #D4AF37 → #4A4A42, text #0A1F44 → #E8E4DC |
| `default.css` | .panel: border #D4AF37 → #C9C4BA |
| `header.blade.php` | inline bg: #0A1F44 → #4A4A42 |
| `footer.blade.php` | inline link colors: #D4AF37 → #C9C4BA |

### Completion Notes

- All email template CSS and inline styles updated to new brand colors
- 16 unit tests created to verify color changes
- 145 email-related tests pass (including new tests)
- button.blade.php and panel.blade.php use CSS classes from default.css, no inline changes needed
- layout.blade.php contains no color references
- Plain text templates unaffected (no colors in text templates)
- AC6 (Logo Update) depends on Story 10.5

### Debug Log References

N/A - No issues encountered
