# Story 12.4: Email Template Color and Logo Update

## Story

**As a** developer
**I want to** update email templates to use the new olive green colors and square logo
**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 charcoal/warm gray colors
**When** I update the stylesheet
**Then** the following changes are applied:

| Element | Old Color | New Color |
|---------|-----------|-----------|
| Links (`a`) | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
| Headings (h1, h2, h3) | `#4A4A42` (Charcoal) | `#6A9337` (Dark Olive) |
| Header background | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
| Footer links | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |
| Primary button | `#4A4A42` bg, `#E8E4DC` text | `#8AB357` bg, `#E8E4DC` text |
| Table headers | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
| Panel border | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |

### AC2: Email Header Component Updated

**Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles
**When** I update the component
**Then**:
- Background color updated to Olive Green (`#8AB357`)
- Logo reference updated to new square logo (`logo-email.png`)
- Logo sizing adjusted for square format

### AC3: Email Footer Component Updated

**Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles
**When** I update the component
**Then** any inline color references use olive 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: Olive Green (`#8AB357`)
- Text: Off-White (`#E8E4DC`)
- Hover hint: Darker Olive (`#7AA347`)

### 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 Light Olive (`#A5C87A`)

### AC6: Email Logo Updated to Square Format

**Given** email header displays the logo
**When** emails are sent
**Then**:
- Logo uses `logo-email.png` (square format, 60px height)
- Logo is centered or left-aligned appropriately
- Alt text reads "LIBRA for Rights"

### AC7: All Email Templates Tested

**Given** the application sends various email types
**When** I test each email template
**Then** colors and logo display correctly:
- Welcome email
- Booking submitted confirmation
- Booking approved/rejected
- Consultation reminders (24h, 2h)
- Timeline update notification
- Password reset
- Guest booking notifications
- 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)

### AC9: Email Client Compatibility

**Given** emails are viewed in various clients
**When** I test the templates
**Then** they render correctly in:
- Gmail (web and mobile)
- Outlook (desktop and web)
- Apple Mail
- Mobile email apps

## 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 */
#4A4A42 → #8AB357  /* Charcoal → Olive Green */
#C9C4BA → #A5C87A  /* Warm Gray → Light Olive */
#6A9337            /* Dark Olive - for headings */
#7AA347            /* Darker Olive - for hover hints */
```

### Email Logo Implementation

```html
<!-- Old (horizontal) -->
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" style="height: 40px; width: auto;">

<!-- New (square) -->
<img src="{{ asset('images/logo-email.png') }}" alt="LIBRA for Rights" style="height: 60px; width: 60px;">
```

### Email-Safe Colors

Email clients have limited CSS support. Ensure:
- Use inline styles for critical colors
- Test in major email clients
- Maintain fallback background colors
- Use web-safe colors where possible

### Testing Emails

Use Laravel's mail preview or Mailtrap to test:
```bash
# Preview emails in browser (if configured)
php artisan serve
# Visit mail preview routes
```

## 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] Update `header.blade.php` - inline styles and logo reference
- [x] Update `footer.blade.php` - inline styles
- [x] Review `button.blade.php` for inline styles
- [x] Review `panel.blade.php` for inline styles
- [ ] Test Welcome email appearance (manual)
- [ ] Test Booking emails appearance (manual)
- [ ] Test Reminder emails appearance (manual)
- [ ] Test Timeline update email appearance (manual)
- [ ] Test Password reset email (manual)
- [ ] Test Guest booking emails (manual)
- [ ] Verify RTL email layout (Arabic) (manual)
- [ ] Test in Gmail (manual)
- [ ] Test in Outlook (manual)
- [ ] Test in Apple Mail (manual)

## Estimation

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

## Dependencies

- Story 12.1 (Logo Deployment) must be completed for `logo-email.png`
- Story 12.2 (Core CSS) should be completed for color reference consistency

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5

### File List

| File | Action |
|------|--------|
| `resources/views/vendor/mail/html/themes/default.css` | Modified |
| `resources/views/vendor/mail/html/header.blade.php` | Modified |
| `resources/views/vendor/mail/html/footer.blade.php` | Modified |

### Change Log

1. **default.css** - Updated all color values per AC1:
   - Links: `#4A4A42` → `#8AB357` (Olive Green)
   - Headings (h1, h2, h3): `#4A4A42` → `#6A9337` (Dark Olive)
   - Header background: `#4A4A42` → `#8AB357`
   - Footer links: `#C9C4BA` → `#A5C87A` (Light Olive)
   - Primary button: `#4A4A42` → `#8AB357`
   - Table headers: `#4A4A42` → `#8AB357`
   - Panel border: `#C9C4BA` → `#A5C87A`
   - Logo class: Updated from 45px to 60px square format

2. **header.blade.php** - Updated per AC2:
   - Background color: `#4A4A42` → `#8AB357`
   - Logo sizing: `height: 45px` → `height: 60px; width: 60px`
   - Alt text: Changed to "LIBRA for Rights"

3. **footer.blade.php** - Updated per AC3:
   - Email link color: `#C9C4BA` → `#A5C87A`
   - Website link color: `#C9C4BA` → `#A5C87A`

4. **button.blade.php** - Reviewed per AC4:
   - No inline styles present; uses CSS classes
   - Colors handled via default.css `.button-primary` class

5. **panel.blade.php** - Reviewed per AC5:
   - No inline styles present; uses CSS classes
   - Border handled via default.css `.panel` class

### Completion Notes

- All CSS color updates completed per acceptance criteria
- All inline styles in Blade components updated
- `logo-email.png` verified to exist at `public/images/logo-email.png`
- Plain text templates unaffected (no color changes needed)
- Automated tests pass (unrelated memory error in PDF export feature)
- Manual email client testing (AC7-AC9) required for full verification

### Debug Log References

N/A - No debugging issues encountered
