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

fix: card CSS consistency between preview and email

Browse Source 
Updated card CSS in EditTemplate.tsx and TemplateEditor.tsx to exactly
match backend EmailRenderer inline styles:

BEFORE (inconsistent):
- Preview: border: 1px solid (all sides, rounded corners)
- Email: border-left: 4px solid (left side only)

AFTER (consistent):
- Success: background-color: #f0fdf4; border-left: 4px solid #22c55e
- Info: background-color: #f0f7ff; border-left: 4px solid #0071e3
- Warning: background-color: #fff8e1; border-left: 4px solid #ff9800

Hero/Highlight cards still use gradient backgrounds.
This commit is contained in:
Dwindi Ramadhana
2026-01-01 23:55:52 +07:00
parent 8959af8270
commit 802b64db9f
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -340,14 +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: linear-gradient(135deg, ${heroGradientStart} 0%, ${heroGradientEnd} 100%); color: ${heroTextColor}; } .card-success { background-color: #f0fdf4; border-left: 4px solid #22c55e; }
.card-success * { color: ${heroTextColor} !important; }
.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: #f0f7ff; border: 1px solid #0071e3; } .card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; }
.card-warning { background: #fff8e1; border: 1px solid #ff9800; } .card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; }
.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: #e8f5e9; border: 1px solid #4caf50; } .card-success { background-color: #f0fdf4; border-left: 4px solid #22c55e; }
.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: #f0f7ff; border: 1px solid #0071e3; } .card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; }
.card-warning { background: #fff8e1; border: 1px solid #ff9800; } .card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; }
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; }