paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix event-specific themes and branding display

Browse Source 
- Update COLOR_THEMES to include full theme configurations
- Send theme as JSON string when creating events
- Display company branding in gallery header
- Add debug logging for theme application
- Event themes now properly override global themes
- Company name and tagline now visible in gallery header
This commit is contained in:
paul
2025-07-07 16:32:46 +02:00
parent ff370f6dbd
commit eac573c4a5
2 changed files with 90 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/GalleryView.tsx
+27 -12
View File
@@ -72,12 +72,16 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
if (event.color_theme) {
try {
const eventTheme = JSON.parse(event.color_theme);
console.log('Applying event-specific theme:', eventTheme);
setTheme(eventTheme);
} catch (e) {
console.error('Failed to parse event theme:', e);
}
} else if (settingsData?.theme_config) {
// Fall back to global theme if no event-specific theme
console.log('No event theme, using global theme');
}
}, [event.color_theme, setTheme]);
}, [event.color_theme, setTheme, settingsData]);
// Calculate days until expiration
const daysUntilExpiration = differenceInDays(parseISO(event.expires_at), new Date());
@@ -201,17 +205,28 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
<header className="bg-white border-b border-neutral-200 sticky top-0 z-40">
<div className="container py-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-neutral-900">{event.event_name}</h1>
<div className="flex items-center gap-4 mt-1 text-sm text-neutral-600">
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1" />
{format(parseISO(event.event_date), 'MMMM d, yyyy')}
</span>
<span className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
Expires {format(parseISO(event.expires_at), 'MMM d')}
</span>
<div className="flex items-center gap-4">
{/* Company branding */}
{brandingSettings?.company_name && (
<div className="pr-4 border-r border-neutral-200">
<h2 className="text-lg font-semibold text-neutral-800">{brandingSettings.company_name}</h2>
{brandingSettings.company_tagline && (
<p className="text-xs text-neutral-600">{brandingSettings.company_tagline}</p>
)}
</div>
)}
<div>
<h1 className="text-2xl font-bold text-neutral-900">{event.event_name}</h1>
<div className="flex items-center gap-4 mt-1 text-sm text-neutral-600">
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1" />
{format(parseISO(event.event_date), 'MMMM d, yyyy')}
</span>
<span className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
Expires {format(parseISO(event.expires_at), 'MMM d')}
</span>
</div>
</div>
</div>