complete story 10.3
This commit is contained in:
Naser Mansour
parent
44f291fbc3
commit
8cdb554ea0
|
|
@ -113,22 +113,22 @@ php artisan make:mail TestEmail --markdown=emails.test
|
|||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update `default.css` header background color
|
||||
- [ ] Update `default.css` link colors
|
||||
- [ ] Update `default.css` heading colors
|
||||
- [ ] Update `default.css` button colors (`.button-primary`)
|
||||
- [ ] Update `default.css` table header colors
|
||||
- [ ] Update `default.css` panel border color
|
||||
- [ ] Update `default.css` footer link colors
|
||||
- [ ] Review `header.blade.php` for inline styles
|
||||
- [ ] Review `footer.blade.php` for inline styles
|
||||
- [ ] Review `button.blade.php` for inline styles
|
||||
- [ ] Review `panel.blade.php` for inline styles
|
||||
- [ ] Test Welcome email appearance
|
||||
- [ ] Test Booking emails appearance
|
||||
- [ ] Test Reminder emails appearance
|
||||
- [ ] Test Timeline update email appearance
|
||||
- [ ] Verify RTL email layout (Arabic)
|
||||
- [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
|
||||
|
||||
|
|
@ -138,3 +138,58 @@ php artisan make:mail TestEmail --markdown=emails.test
|
|||
## 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
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
Ramallah, Palestine | رام الله، فلسطين
|
||||
</p>
|
||||
<p style="color: #a1a1aa; font-size: 11px; margin-bottom: 4px;">
|
||||
<a href="mailto:info@libra.ps" style="color: #D4AF37;">info@libra.ps</a>
|
||||
<a href="mailto:info@libra.ps" style="color: #C9C4BA;">info@libra.ps</a>
|
||||
</p>
|
||||
<p style="color: #a1a1aa; font-size: 11px;">
|
||||
<a href="{{ config('app.url') }}" style="color: #D4AF37;">{{ config('app.url') }}</a>
|
||||
<a href="{{ config('app.url') }}" style="color: #C9C4BA;">{{ config('app.url') }}</a>
|
||||
</p>
|
||||
{{ Illuminate\Mail\Markdown::parse($slot) }}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@props(['url'])
|
||||
<tr>
|
||||
<td class="header" style="background-color: #0A1F44; padding: 25px; text-align: center;">
|
||||
<td class="header" style="background-color: #4A4A42; padding: 25px; text-align: center;">
|
||||
<a href="{{ $url }}" style="display: inline-block;">
|
||||
@if (trim($slot) === 'Laravel')
|
||||
<img src="{{ asset('images/logo-email.png') }}" class="logo" alt="Libra Law Firm" style="height: 45px;">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ blockquote {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #0A1F44;
|
||||
color: #4A4A42;
|
||||
}
|
||||
|
||||
a img {
|
||||
|
|
@ -38,7 +38,7 @@ a img {
|
|||
/* Typography */
|
||||
|
||||
h1 {
|
||||
color: #0A1F44;
|
||||
color: #4A4A42;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -46,7 +46,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #0A1F44;
|
||||
color: #4A4A42;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -54,7 +54,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
color: #0A1F44;
|
||||
color: #4A4A42;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -100,7 +100,7 @@ img {
|
|||
/* Header */
|
||||
|
||||
.header {
|
||||
background-color: #0A1F44;
|
||||
background-color: #4A4A42;
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@ img {
|
|||
}
|
||||
|
||||
.footer a {
|
||||
color: #D4AF37;
|
||||
color: #C9C4BA;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -200,7 +200,7 @@ img {
|
|||
|
||||
.table th {
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
color: #0A1F44;
|
||||
color: #4A4A42;
|
||||
margin: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
|
@ -242,12 +242,12 @@ img {
|
|||
|
||||
.button-blue,
|
||||
.button-primary {
|
||||
background-color: #D4AF37;
|
||||
border-bottom: 8px solid #D4AF37;
|
||||
border-left: 18px solid #D4AF37;
|
||||
border-right: 18px solid #D4AF37;
|
||||
border-top: 8px solid #D4AF37;
|
||||
color: #0A1F44;
|
||||
background-color: #4A4A42;
|
||||
border-bottom: 8px solid #4A4A42;
|
||||
border-left: 18px solid #4A4A42;
|
||||
border-right: 18px solid #4A4A42;
|
||||
border-top: 8px solid #4A4A42;
|
||||
color: #E8E4DC;
|
||||
}
|
||||
|
||||
.button-green,
|
||||
|
|
@ -271,7 +271,7 @@ img {
|
|||
/* Panels */
|
||||
|
||||
.panel {
|
||||
border-left: #D4AF37 solid 4px;
|
||||
border-left: #C9C4BA solid 4px;
|
||||
margin: 21px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\File;
|
||||
|
||||
test('default.css uses new charcoal color for links', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toContain('a {')
|
||||
->and($css)->toContain('color: #4A4A42;');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h1 headings', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/h1\s*\{[^}]*color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h2 headings', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/h2\s*\{[^}]*color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h3 headings', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/h3\s*\{[^}]*color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for header background', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.header\s*\{[^}]*background-color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new warm gray color for footer links', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.footer a\s*\{[^}]*color:\s*#C9C4BA;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for table headers', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.table th\s*\{[^}]*color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal background for primary buttons', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.button-primary\s*\{[^}]*background-color:\s*#4A4A42;/');
|
||||
});
|
||||
|
||||
test('default.css uses new off-white text for primary buttons', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.button-primary\s*\{[^}]*color:\s*#E8E4DC;/');
|
||||
});
|
||||
|
||||
test('default.css uses new warm gray color for panel border', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.panel\s*\{[^}]*border-left:\s*#C9C4BA/');
|
||||
});
|
||||
|
||||
test('header.blade.php uses new charcoal background color', function () {
|
||||
$header = File::get(resource_path('views/vendor/mail/html/header.blade.php'));
|
||||
|
||||
expect($header)->toContain('background-color: #4A4A42;');
|
||||
});
|
||||
|
||||
test('header.blade.php does not use old navy color', function () {
|
||||
$header = File::get(resource_path('views/vendor/mail/html/header.blade.php'));
|
||||
|
||||
expect($header)->not->toContain('#0A1F44');
|
||||
});
|
||||
|
||||
test('footer.blade.php uses new warm gray color for links', function () {
|
||||
$footer = File::get(resource_path('views/vendor/mail/html/footer.blade.php'));
|
||||
|
||||
expect($footer)->toContain('color: #C9C4BA;');
|
||||
});
|
||||
|
||||
test('footer.blade.php does not use old gold color', function () {
|
||||
$footer = File::get(resource_path('views/vendor/mail/html/footer.blade.php'));
|
||||
|
||||
expect($footer)->not->toContain('#D4AF37');
|
||||
});
|
||||
|
||||
test('default.css does not use old navy color for headings and links', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
// Check that old navy color is not used in headings
|
||||
expect($css)->not->toMatch('/h1\s*\{[^}]*color:\s*#0A1F44;/')
|
||||
->and($css)->not->toMatch('/h2\s*\{[^}]*color:\s*#0A1F44;/')
|
||||
->and($css)->not->toMatch('/h3\s*\{[^}]*color:\s*#0A1F44;/');
|
||||
});
|
||||
|
||||
test('default.css does not use old gold color for buttons and panels', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
// Check that old gold color is not used in buttons
|
||||
expect($css)->not->toMatch('/\.button-primary\s*\{[^}]*background-color:\s*#D4AF37;/')
|
||||
->and($css)->not->toMatch('/\.panel\s*\{[^}]*border-left:\s*#D4AF37/');
|
||||
});
|
||||
Loading…
Reference in New Issue