fix: event-specific custom CSS settings not being saved

The ThemeCustomizerEnhanced component stored customCss in a separate
local state that was never propagated to the parent component when
hideActions was true (used in both CreateEventPage and EventDetailsPage).

Changes:
- handleChange() now includes customCss when propagating theme changes
- CSS textarea onChange now propagates customCss to parent in preview mode
- handlePresetSelect() clears customCss when selecting a preset

Fixes #136
This commit is contained in:
Paul Nothaft
2026-01-22 13:54:00 +01:00
parent 644ea22b5f
commit dadef81158
@@ -67,15 +67,16 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
const handleChange = (key: keyof ThemeConfig, newValue: any) => { const handleChange = (key: keyof ThemeConfig, newValue: any) => {
const updated = { ...localTheme, [key]: newValue }; const updated = { ...localTheme, [key]: newValue };
setLocalTheme(updated); setLocalTheme(updated);
// When any change is made, mark it as custom // When any change is made, mark it as custom
if (selectedPreset !== 'custom' && onPresetChange) { if (selectedPreset !== 'custom' && onPresetChange) {
setSelectedPreset('custom'); setSelectedPreset('custom');
onPresetChange('custom'); onPresetChange('custom');
} }
if (isPreviewMode) { if (isPreviewMode) {
onChange(updated); // Include customCss in the propagated theme
onChange({ ...updated, customCss });
} }
}; };
@@ -84,6 +85,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
if (preset) { if (preset) {
setSelectedPreset(presetKey); setSelectedPreset(presetKey);
setLocalTheme(preset.config); setLocalTheme(preset.config);
setCustomCss(''); // Clear custom CSS when selecting a preset
if (onPresetChange) { if (onPresetChange) {
onPresetChange(presetKey); onPresetChange(presetKey);
} }
@@ -722,12 +724,17 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
<textarea <textarea
value={customCss} value={customCss}
onChange={(e) => { onChange={(e) => {
setCustomCss(e.target.value); const newCss = e.target.value;
setCustomCss(newCss);
// Mark as custom when CSS is added // Mark as custom when CSS is added
if (e.target.value && selectedPreset !== 'custom' && onPresetChange) { if (newCss && selectedPreset !== 'custom' && onPresetChange) {
setSelectedPreset('custom'); setSelectedPreset('custom');
onPresetChange('custom'); onPresetChange('custom');
} }
// Propagate customCss changes to parent in preview mode
if (isPreviewMode) {
onChange({ ...localTheme, customCss: newCss });
}
}} }}
placeholder="/* Add custom CSS here */" placeholder="/* Add custom CSS here */"
className="w-full h-40 px-3 py-2 font-mono text-sm border border-neutral-300 rounded-lg bg-neutral-50" className="w-full h-40 px-3 py-2 font-mono text-sm border border-neutral-300 rounded-lg bg-neutral-50"