Fix button roundtrip in editor, alignment persistence, and test email rendering
This commit is contained in:
Dwindi Ramadhana
@@ -219,190 +219,22 @@ export default function EmailCustomization() {
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Brand Colors */}
|
||||
{/* Unified Colors Notice */}
|
||||
<SettingsCard
|
||||
title={__('Brand Colors')}
|
||||
description={__('Set your primary and secondary brand colors for buttons and accents')}
|
||||
description={__('Colors for buttons, gradients, and accents in emails')}
|
||||
>
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="primary_color">{__('Primary Color')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="primary_color"
|
||||
type="color"
|
||||
value={formData.primary_color}
|
||||
onChange={(e) => handleChange('primary_color', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.primary_color}
|
||||
onChange={(e) => handleChange('primary_color', e.target.value)}
|
||||
placeholder="#7f54b3"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Used for primary buttons and main accents')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="secondary_color">{__('Secondary Color')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="secondary_color"
|
||||
type="color"
|
||||
value={formData.secondary_color}
|
||||
onChange={(e) => handleChange('secondary_color', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.secondary_color}
|
||||
onChange={(e) => handleChange('secondary_color', e.target.value)}
|
||||
placeholder="#7f54b3"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Used for outline buttons and borders')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
{/* Hero Card Gradient */}
|
||||
<SettingsCard
|
||||
title={__('Hero Card Gradient')}
|
||||
description={__('Customize the gradient colors for hero/success card backgrounds')}
|
||||
>
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hero_gradient_start">{__('Gradient Start')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="hero_gradient_start"
|
||||
type="color"
|
||||
value={formData.hero_gradient_start}
|
||||
onChange={(e) => handleChange('hero_gradient_start', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.hero_gradient_start}
|
||||
onChange={(e) => handleChange('hero_gradient_start', e.target.value)}
|
||||
placeholder="#667eea"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hero_gradient_end">{__('Gradient End')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="hero_gradient_end"
|
||||
type="color"
|
||||
value={formData.hero_gradient_end}
|
||||
onChange={(e) => handleChange('hero_gradient_end', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.hero_gradient_end}
|
||||
onChange={(e) => handleChange('hero_gradient_end', e.target.value)}
|
||||
placeholder="#764ba2"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="hero_text_color">{__('Text Color')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="hero_text_color"
|
||||
type="color"
|
||||
value={formData.hero_text_color}
|
||||
onChange={(e) => handleChange('hero_text_color', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.hero_text_color}
|
||||
onChange={(e) => handleChange('hero_text_color', e.target.value)}
|
||||
placeholder="#ffffff"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Text and heading color for hero cards (usually white)')}
|
||||
<div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-900 dark:text-blue-100">
|
||||
<strong>{__('Colors are now unified!')}</strong>{' '}
|
||||
{__('Email colors (buttons, gradients) now use the same colors as your storefront for consistent branding.')}
|
||||
</p>
|
||||
<p className="text-sm text-blue-900 dark:text-blue-100 mt-2">
|
||||
{__('To change colors, go to')}{' '}
|
||||
<a href="#/appearance/general" className="font-medium underline hover:no-underline">
|
||||
{__('Appearance → General → Colors')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="mt-4 p-6 rounded-lg text-center" style={{
|
||||
background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`
|
||||
}}>
|
||||
<h3 className="text-xl font-bold mb-2" style={{ color: formData.hero_text_color }}>{__('Preview')}</h3>
|
||||
<p className="text-sm opacity-90" style={{ color: formData.hero_text_color }}>{__('This is how your hero cards will look')}</p>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
{/* Button Styling */}
|
||||
<SettingsCard
|
||||
title={__('Button Styling')}
|
||||
description={__('Customize button text color and appearance')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="button_text_color">{__('Button Text Color')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="button_text_color"
|
||||
type="color"
|
||||
value={formData.button_text_color}
|
||||
onChange={(e) => handleChange('button_text_color', e.target.value)}
|
||||
className="w-20 h-10 p-1 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.button_text_color}
|
||||
onChange={(e) => handleChange('button_text_color', e.target.value)}
|
||||
placeholder="#ffffff"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Text color for buttons (usually white for dark buttons)')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Button Preview */}
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<button
|
||||
className="px-6 py-3 rounded-lg font-medium"
|
||||
style={{
|
||||
backgroundColor: formData.primary_color,
|
||||
color: formData.button_text_color,
|
||||
}}
|
||||
>
|
||||
{__('Primary Button')}
|
||||
</button>
|
||||
<button
|
||||
className="px-6 py-3 rounded-lg font-medium border-2"
|
||||
style={{
|
||||
borderColor: formData.secondary_color,
|
||||
color: formData.secondary_color,
|
||||
backgroundColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
{__('Secondary Button')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
@@ -540,7 +372,7 @@ export default function EmailCustomization() {
|
||||
{__('Add Social Link')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
{formData.social_links.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('No social links added. Click "Add Social Link" to get started.')}
|
||||
|
||||
Reference in New Issue
Block a user