diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx index 38812e6..fc40c6a 100644 --- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx +++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx @@ -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; } diff --git a/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx b/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx index fe3d143..71ca0a8 100644 --- a/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx +++ b/admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx @@ -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 `
${cardContent}
`; }); }; @@ -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 ` @@ -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; }