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

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

@@ -96,12 +96,12 @@ export default function TemplateEditor({
// Get variable keys for the rich text editor
const variableKeys = Object.keys(variables);
// Parse [card] tags for preview
const parseCardsForPreview = (content: string) => {
// Match [card ...] ... [/card] patterns
const cardRegex = /\[card([^\]]*)\](.*?)\[\/card\]/gs;
return content.replace(cardRegex, (match, attributes, cardContent) => {
// Parse attributes
let cardClass = 'card';
@@ -109,10 +109,10 @@ export default function TemplateEditor({
if (typeMatch) {
cardClass += ` card-${typeMatch[1]}`;
}
const bgMatch = attributes.match(/bg=["']([^"']+)["']/);
const bgStyle = bgMatch ? `background-image: url(${bgMatch[1]}); background-size: cover; background-position: center;` : '';
return `<div class="${cardClass}" style="${bgStyle}">${cardContent}</div>`;
});
};
@@ -120,18 +120,18 @@ export default function TemplateEditor({
// Generate preview HTML
const generatePreviewHTML = () => {
let previewBody = body;
// Replace store-identity variables with actual data
const storeVariables: { [key: string]: string } = {
store_name: 'My WordPress Store',
store_url: window.location.origin,
store_email: 'store@example.com',
};
Object.entries(storeVariables).forEach(([key, value]) => {
previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), value);
});
// Highlight dynamic variables (non-store variables)
Object.keys(variables).forEach(key => {
if (!storeVariables[key]) {
@@ -139,10 +139,10 @@ export default function TemplateEditor({
previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);
}
});
// Parse [card] tags
previewBody = parseCardsForPreview(previewBody);
return `
<!DOCTYPE html>
<html>
@@ -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: #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 * { color: #fff !important; }
.card-info { background: #f0f7ff; border: 1px solid #0071e3; }
.card-warning { background: #fff8e1; border: 1px solid #ff9800; }
.card-info { background-color: #f0f7ff; border-left: 4px solid #0071e3; }
.card-warning { background-color: #fff8e1; border-left: 4px solid #ff9800; }
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; }