redone 12.4
This commit is contained in:
Naser Mansour
parent
204c73646d
commit
082545032a
|
|
@ -167,18 +167,18 @@ body {
|
|||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update `default.css` header background color to `#2D3624`
|
||||
- [ ] Update `default.css` link colors to `#A68966`
|
||||
- [ ] Update `default.css` heading colors to `#2D322A`
|
||||
- [ ] Update `default.css` button colors (`.button-primary`) to `#A68966`
|
||||
- [ ] Update `default.css` table header colors to `#2D3624`
|
||||
- [ ] Update `default.css` panel border color to `#C4A882`
|
||||
- [ ] Update `default.css` footer link colors to `#A68966`
|
||||
- [ ] Update `default.css` body background to `#F4F1EA`
|
||||
- [ ] Update `header.blade.php` - inline styles
|
||||
- [ ] Update `footer.blade.php` - inline styles
|
||||
- [ ] Review `button.blade.php` for inline styles
|
||||
- [ ] Review `panel.blade.php` for inline styles
|
||||
- [x] Update `default.css` header background color to `#2D3624`
|
||||
- [x] Update `default.css` link colors to `#A68966`
|
||||
- [x] Update `default.css` heading colors to `#2D322A`
|
||||
- [x] Update `default.css` button colors (`.button-primary`) to `#A68966`
|
||||
- [x] Update `default.css` table header colors to `#2D3624`
|
||||
- [x] Update `default.css` panel border color to `#C4A882`
|
||||
- [x] Update `default.css` footer link colors to `#A68966`
|
||||
- [x] Update `default.css` body background to `#F4F1EA`
|
||||
- [x] Update `header.blade.php` - inline styles
|
||||
- [x] Update `footer.blade.php` - inline styles
|
||||
- [x] Review `button.blade.php` for inline styles (no inline styles present - uses CSS classes)
|
||||
- [x] Review `panel.blade.php` for inline styles (no inline styles present - uses CSS classes)
|
||||
- [ ] Test Welcome email appearance (manual)
|
||||
- [ ] Test Booking emails appearance (manual)
|
||||
- [ ] Test Reminder emails appearance (manual)
|
||||
|
|
@ -205,24 +205,37 @@ body {
|
|||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Not Started - Ready for Implementation
|
||||
Ready for Review
|
||||
|
||||
### Agent Model Used
|
||||
(To be filled during implementation)
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
|
||||
### File List
|
||||
|
||||
| File | Action |
|
||||
|------|--------|
|
||||
| `resources/views/vendor/mail/html/themes/default.css` | To be modified |
|
||||
| `resources/views/vendor/mail/html/header.blade.php` | To be modified |
|
||||
| `resources/views/vendor/mail/html/footer.blade.php` | To be modified |
|
||||
| `resources/views/vendor/mail/html/themes/default.css` | Modified - Updated all colors to new Dark Charcoal & Warm Gold palette |
|
||||
| `resources/views/vendor/mail/html/header.blade.php` | Modified - Updated inline background color to #2D3624 |
|
||||
| `resources/views/vendor/mail/html/footer.blade.php` | Modified - Updated inline text color to #2D322A, link color to #A68966 |
|
||||
| `resources/views/vendor/mail/html/button.blade.php` | Reviewed - No changes needed, uses CSS classes |
|
||||
| `resources/views/vendor/mail/html/panel.blade.php` | Reviewed - No changes needed, uses CSS classes |
|
||||
| `resources/views/vendor/mail/html/layout.blade.php` | Reviewed - No changes needed, uses CSS classes |
|
||||
| `tests/Feature/Mail/EmailTemplateColorsTest.php` | Modified - Updated test assertions for new color palette |
|
||||
|
||||
### Change Log
|
||||
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
|
||||
| 2026-01-04 | Implementation complete - all CSS and blade template colors updated |
|
||||
|
||||
### Completion Notes
|
||||
(To be filled during implementation)
|
||||
- All email template colors updated to the new Dark Charcoal & Warm Gold palette
|
||||
- CSS updates in default.css: body background (#F4F1EA), body text (#2D322A), links (#A68966), headings (#2D322A), header bg (#2D3624), footer text (#2D322A), footer links (#A68966), table headers (#2D3624 bg, #FFFFFF text), buttons (#A68966 bg, #FFFFFF text), panel borders (#C4A882)
|
||||
- Header.blade.php: Updated inline background-color to #2D3624
|
||||
- Footer.blade.php: Updated inline text colors to #2D322A and link colors to #A68966
|
||||
- Button.blade.php and panel.blade.php: No inline color styles present - rely on CSS classes which were updated
|
||||
- Layout.blade.php: No color styles present - relies on CSS classes
|
||||
- All 128 mail-related tests pass
|
||||
- EmailTemplateColorsTest.php updated with 20 tests verifying new color palette
|
||||
- Manual testing in email clients still required (marked as manual in checklist)
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
|
||||
<tr>
|
||||
<td class="content-cell" align="center">
|
||||
<p style="color: #71717a; font-size: 12px; margin-bottom: 8px;">
|
||||
<p style="color: #2D322A; font-size: 12px; margin-bottom: 8px;">
|
||||
<strong>Libra Law Firm | مكتب ليبرا للمحاماة</strong>
|
||||
</p>
|
||||
<p style="color: #a1a1aa; font-size: 11px; margin-bottom: 4px;">
|
||||
<p style="color: #2D322A; font-size: 11px; margin-bottom: 4px;">
|
||||
Ramallah, Palestine | رام الله، فلسطين
|
||||
</p>
|
||||
<p style="color: #a1a1aa; font-size: 11px; margin-bottom: 4px;">
|
||||
<a href="mailto:info@libra.ps" style="color: #A5C87A;">info@libra.ps</a>
|
||||
<p style="color: #2D322A; font-size: 11px; margin-bottom: 4px;">
|
||||
<a href="mailto:info@libra.ps" style="color: #A68966;">info@libra.ps</a>
|
||||
</p>
|
||||
<p style="color: #a1a1aa; font-size: 11px;">
|
||||
<a href="{{ config('app.url') }}" style="color: #A5C87A;">{{ config('app.url') }}</a>
|
||||
<p style="color: #2D322A; font-size: 11px;">
|
||||
<a href="{{ config('app.url') }}" style="color: #A68966;">{{ config('app.url') }}</a>
|
||||
</p>
|
||||
{{ Illuminate\Mail\Markdown::parse($slot) }}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@props(['url'])
|
||||
<tr>
|
||||
<td class="header" style="background-color: #8AB357; padding: 25px; text-align: center;">
|
||||
<td class="header" style="background-color: #2D3624; 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 for Rights" style="height: 60px; width: 60px;">
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ body *:not(html):not(style):not(br):not(tr):not(code) {
|
|||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
background-color: #ffffff;
|
||||
color: #52525b;
|
||||
background-color: #F4F1EA;
|
||||
color: #2D322A;
|
||||
height: 100%;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
|
|
@ -28,7 +28,7 @@ blockquote {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #8AB357;
|
||||
color: #A68966;
|
||||
}
|
||||
|
||||
a img {
|
||||
|
|
@ -38,7 +38,7 @@ a img {
|
|||
/* Typography */
|
||||
|
||||
h1 {
|
||||
color: #6A9337;
|
||||
color: #2D322A;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -46,7 +46,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #6A9337;
|
||||
color: #2D322A;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -54,7 +54,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
color: #6A9337;
|
||||
color: #2D322A;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
|
|
@ -82,7 +82,7 @@ img {
|
|||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
-premailer-width: 100%;
|
||||
background-color: #f8fafc;
|
||||
background-color: #F4F1EA;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
@ -100,7 +100,7 @@ img {
|
|||
/* Header */
|
||||
|
||||
.header {
|
||||
background-color: #8AB357;
|
||||
background-color: #2D3624;
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -128,9 +128,9 @@ img {
|
|||
-premailer-cellpadding: 0;
|
||||
-premailer-cellspacing: 0;
|
||||
-premailer-width: 100%;
|
||||
background-color: #f8fafc;
|
||||
border-bottom: 1px solid #f8fafc;
|
||||
border-top: 1px solid #f8fafc;
|
||||
background-color: #F4F1EA;
|
||||
border-bottom: 1px solid #F4F1EA;
|
||||
border-top: 1px solid #F4F1EA;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
@ -179,13 +179,13 @@ img {
|
|||
}
|
||||
|
||||
.footer p {
|
||||
color: #a1a1aa;
|
||||
color: #2D322A;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #A5C87A;
|
||||
color: #A68966;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -200,14 +200,15 @@ img {
|
|||
}
|
||||
|
||||
.table th {
|
||||
background-color: #2D3624;
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
color: #8AB357;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
color: #52525b;
|
||||
color: #2D322A;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
|
|
@ -243,12 +244,12 @@ img {
|
|||
|
||||
.button-blue,
|
||||
.button-primary {
|
||||
background-color: #8AB357;
|
||||
border-bottom: 8px solid #8AB357;
|
||||
border-left: 18px solid #8AB357;
|
||||
border-right: 18px solid #8AB357;
|
||||
border-top: 8px solid #8AB357;
|
||||
color: #E8E4DC;
|
||||
background-color: #A68966;
|
||||
border-bottom: 8px solid #A68966;
|
||||
border-left: 18px solid #A68966;
|
||||
border-right: 18px solid #A68966;
|
||||
border-top: 8px solid #A68966;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.button-green,
|
||||
|
|
@ -272,18 +273,18 @@ img {
|
|||
/* Panels */
|
||||
|
||||
.panel {
|
||||
border-left: #A5C87A solid 4px;
|
||||
border-left: #C4A882 solid 4px;
|
||||
margin: 21px 0;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
background-color: #fafafa;
|
||||
color: #52525b;
|
||||
color: #2D322A;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel-content p {
|
||||
color: #52525b;
|
||||
color: #2D322A;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
|
|
|
|||
|
|
@ -2,104 +2,136 @@
|
|||
|
||||
use Illuminate\Support\Facades\File;
|
||||
|
||||
test('default.css uses new charcoal color for links', function () {
|
||||
// Story 12.4: Email Template Color Update - Dark Charcoal & Warm Gold palette
|
||||
// Colors: Warm Gold #A68966, Forest Green #2D322A, Dark Forest Green #2D3624,
|
||||
// Gold Light #C4A882, Warm Cream #F4F1EA, White #FFFFFF
|
||||
|
||||
test('default.css uses warm gold 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;');
|
||||
->and($css)->toContain('color: #A68966;');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h1 headings', function () {
|
||||
test('default.css uses forest green 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;/');
|
||||
expect($css)->toMatch('/h1\s*\{[^}]*color:\s*#2D322A;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h2 headings', function () {
|
||||
test('default.css uses forest green 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;/');
|
||||
expect($css)->toMatch('/h2\s*\{[^}]*color:\s*#2D322A;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for h3 headings', function () {
|
||||
test('default.css uses forest green 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;/');
|
||||
expect($css)->toMatch('/h3\s*\{[^}]*color:\s*#2D322A;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for header background', function () {
|
||||
test('default.css uses dark forest green 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;/');
|
||||
expect($css)->toMatch('/\.header\s*\{[^}]*background-color:\s*#2D3624;/');
|
||||
});
|
||||
|
||||
test('default.css uses new warm gray color for footer links', function () {
|
||||
test('default.css uses warm gold 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;/');
|
||||
expect($css)->toMatch('/\.footer a\s*\{[^}]*color:\s*#A68966;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal color for table headers', function () {
|
||||
test('default.css uses dark forest green for table headers with white text', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.table th\s*\{[^}]*color:\s*#4A4A42;/');
|
||||
expect($css)->toMatch('/\.table th\s*\{[^}]*background-color:\s*#2D3624;/')
|
||||
->and($css)->toMatch('/\.table th\s*\{[^}]*color:\s*#FFFFFF;/');
|
||||
});
|
||||
|
||||
test('default.css uses new charcoal background for primary buttons', function () {
|
||||
test('default.css uses warm gold 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;/');
|
||||
expect($css)->toMatch('/\.button-primary\s*\{[^}]*background-color:\s*#A68966;/');
|
||||
});
|
||||
|
||||
test('default.css uses new off-white text for primary buttons', function () {
|
||||
test('default.css uses 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;/');
|
||||
expect($css)->toMatch('/\.button-primary\s*\{[^}]*color:\s*#FFFFFF;/');
|
||||
});
|
||||
|
||||
test('default.css uses new warm gray color for panel border', function () {
|
||||
test('default.css uses gold light 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/');
|
||||
expect($css)->toMatch('/\.panel\s*\{[^}]*border-left:\s*#C4A882/');
|
||||
});
|
||||
|
||||
test('header.blade.php uses new charcoal background color', function () {
|
||||
test('default.css uses warm cream for body background', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/body\s*\{[^}]*background-color:\s*#F4F1EA;/')
|
||||
->and($css)->toMatch('/\.wrapper\s*\{[^}]*background-color:\s*#F4F1EA;/')
|
||||
->and($css)->toMatch('/\.body\s*\{[^}]*background-color:\s*#F4F1EA;/');
|
||||
});
|
||||
|
||||
test('default.css uses forest green for body text', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/body\s*\{[^}]*color:\s*#2D322A;/');
|
||||
});
|
||||
|
||||
test('default.css uses forest green for footer paragraph text', function () {
|
||||
$css = File::get(resource_path('views/vendor/mail/html/themes/default.css'));
|
||||
|
||||
expect($css)->toMatch('/\.footer p\s*\{[^}]*color:\s*#2D322A;/');
|
||||
});
|
||||
|
||||
test('header.blade.php uses dark forest green background color', function () {
|
||||
$header = File::get(resource_path('views/vendor/mail/html/header.blade.php'));
|
||||
|
||||
expect($header)->toContain('background-color: #4A4A42;');
|
||||
expect($header)->toContain('background-color: #2D3624;');
|
||||
});
|
||||
|
||||
test('header.blade.php does not use old navy color', function () {
|
||||
test('header.blade.php does not use old green color', function () {
|
||||
$header = File::get(resource_path('views/vendor/mail/html/header.blade.php'));
|
||||
|
||||
expect($header)->not->toContain('#0A1F44');
|
||||
expect($header)->not->toContain('#8AB357');
|
||||
});
|
||||
|
||||
test('footer.blade.php uses new warm gray color for links', function () {
|
||||
test('footer.blade.php uses warm gold color for links', function () {
|
||||
$footer = File::get(resource_path('views/vendor/mail/html/footer.blade.php'));
|
||||
|
||||
expect($footer)->toContain('color: #C9C4BA;');
|
||||
expect($footer)->toContain('color: #A68966;');
|
||||
});
|
||||
|
||||
test('footer.blade.php does not use old gold color', function () {
|
||||
test('footer.blade.php uses forest green for text', function () {
|
||||
$footer = File::get(resource_path('views/vendor/mail/html/footer.blade.php'));
|
||||
|
||||
expect($footer)->not->toContain('#D4AF37');
|
||||
expect($footer)->toContain('color: #2D322A;');
|
||||
});
|
||||
|
||||
test('default.css does not use old navy color for headings and links', function () {
|
||||
test('footer.blade.php does not use old light green color', function () {
|
||||
$footer = File::get(resource_path('views/vendor/mail/html/footer.blade.php'));
|
||||
|
||||
expect($footer)->not->toContain('#A5C87A');
|
||||
});
|
||||
|
||||
test('default.css does not use old green 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;/');
|
||||
// Check that old green colors are not used
|
||||
expect($css)->not->toMatch('/h1\s*\{[^}]*color:\s*#6A9337;/')
|
||||
->and($css)->not->toMatch('/h2\s*\{[^}]*color:\s*#6A9337;/')
|
||||
->and($css)->not->toMatch('/h3\s*\{[^}]*color:\s*#6A9337;/')
|
||||
->and($css)->not->toContain('color: #8AB357;');
|
||||
});
|
||||
|
||||
test('default.css does not use old gold color for buttons and panels', function () {
|
||||
test('default.css does not use old green 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/');
|
||||
// Check that old green colors are not used in buttons and panels
|
||||
expect($css)->not->toMatch('/\.button-primary\s*\{[^}]*background-color:\s*#8AB357;/')
|
||||
->and($css)->not->toMatch('/\.panel\s*\{[^}]*border-left:\s*#A5C87A/');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue