dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove left borders from cards - use background color only

Browse Source 
Per user request, removed border-left from success/info/warning cards.
Cards now distinguished by background color only, preserving border-radius.

Updated in:
- EmailRenderer.php: removed border-left from inline styles
- EditTemplate.tsx: removed border-left from CSS classes
- TemplateEditor.tsx: removed border-left from CSS classes

Card styling now:
- Success: #f0fdf4 (light green)
- Info: #f0f7ff (light blue)
- Warning: #fff8e1 (light yellow/cream)
- Hero: gradient background
This commit is contained in:
Dwindi Ramadhana
2026-01-02 00:04:30 +07:00
parent 930e525421
commit 3f8d15de61
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
View File

@@ -340,13 +340,13 @@ export default function EditTemplate() {
.header { padding: 20px 16px; } .header { padding: 20px 16px; }
.footer { padding: 20px 16px; } .footer { padding: 20px 16px; }
} }
.card-success { background-color: #f0fdf4; border-left: 4px solid #22c55e; } .card-success { background-color: #f0fdf4; }
.card-highlight { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } .card-highlight { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; }
.card-highlight * { color: ${heroTextColor} !important; } .card-highlight * { color: ${heroTextColor} !important; }
.card-hero { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } .card-hero { background: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; }
.card-hero * { color: ${heroTextColor} !important; } .card-hero * { color: ${heroTextColor} !important; }
.card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; } .card-info { background-color: #f0f7ff; }
.card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; } .card-warning { background-color: #fff8e1; }
.card-basic { background: none; border: none; padding: 0; margin: 16px 0; } .card-basic { background: none; border: none; padding: 0; margin: 16px 0; }
h1 { font-size: 26px; margin-top: 0; margin-bottom: 16px; color: #333; } h1 { font-size: 26px; margin-top: 0; margin-bottom: 16px; color: #333; }
h2 { font-size: 18px; margin-top: 0; margin-bottom: 16px; color: #333; } h2 { font-size: 18px; margin-top: 0; margin-bottom: 16px; color: #333; }

6
admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx
View File

@@ -153,11 +153,11 @@ export default function TemplateEditor({
.header { padding: 32px; text-align: center; background: #f8f8f8; } .header { padding: 32px; text-align: center; background: #f8f8f8; }
.card-gutter { padding: 0 16px; } .card-gutter { padding: 0 16px; }
.card { background: #ffffff; border-radius: 8px; margin-bottom: 24px; padding: 32px 40px; } .card { background: #ffffff; border-radius: 8px; margin-bottom: 24px; padding: 32px 40px; }
.card-success { background-color: #f0fdf4; border-left: 4px solid #22c55e; } .card-success { background-color: #f0fdf4; }
.card-highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .card-highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.card-highlight * { color: #fff !important; } .card-highlight * { color: #fff !important; }
.card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; } .card-info { background-color: #f0f7ff; }
.card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; } .card-warning { background-color: #fff8e1; }
h1 { font-size: 26px; margin-top: 0; margin-bottom: 16px; color: #333; } h1 { font-size: 26px; margin-top: 0; margin-bottom: 16px; color: #333; }
h2 { font-size: 18px; margin-top: 0; margin-bottom: 16px; color: #333; } h2 { font-size: 18px; margin-top: 0; margin-bottom: 16px; color: #333; }
h3 { font-size: 16px; margin-top: 0; margin-bottom: 8px; color: #333; } h3 { font-size: 16px; margin-top: 0; margin-bottom: 8px; color: #333; }

8
includes/Core/Notifications/EmailRenderer.php
View File

@@ -451,15 +451,15 @@ class EmailRenderer {
} }
// Success card - green theme // Success card - green theme
elseif ($type === 'success') { elseif ($type === 'success') {
$style .= ' background-color: #f0fdf4; border-left: 4px solid #22c55e;'; $style .= ' background-color: #f0fdf4;';
} }
// Info card - blue theme // Info card - blue theme
elseif ($type === 'info') { elseif ($type === 'info') {
$style .= ' background-color: #f0f7ff; border-left: 4px solid #0071e3;'; $style .= ' background-color: #f0f7ff;';
} }
// Warning card - orange theme // Warning card - orange/yellow theme
elseif ($type === 'warning') { elseif ($type === 'warning') {
$style .= ' background-color: #fff8e1; border-left: 4px solid #ff9800;'; $style .= ' background-color: #fff8e1;';
} }
} }