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

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

View File

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

View File

@@ -153,11 +153,11 @@ export default function TemplateEditor({
.header { padding: 32px; text-align: center; background: #f8f8f8; }
.card-gutter { padding: 0 16px; }
.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 * { color: #fff !important; }
.card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; }
.card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; }
.card-info { background-color: #f0f7ff; }
.card-warning { background-color: #fff8e1; }
h1 { font-size: 26px; 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; }