Fix event-specific themes and branding display

- 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

frontend/src/components/gallery/GalleryView.tsx

@@ -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>
             

frontend/src/pages/admin/CreateEventPage.tsx

@@ -36,11 +36,66 @@ const EVENT_TYPES = [
 ];
 
 const COLOR_THEMES = [
-  { value: 'default', label: 'Default (Green)', color: 'bg-primary-600' },
-  { value: 'blue', label: 'Ocean Blue', color: 'bg-blue-600' },
-  { value: 'purple', label: 'Royal Purple', color: 'bg-purple-600' },
-  { value: 'rose', label: 'Rose Gold', color: 'bg-rose-600' },
-  { value: 'amber', label: 'Sunset Amber', color: 'bg-amber-600' },
+  { 
+    value: 'default', 
+    label: 'Default (Green)', 
+    color: 'bg-primary-600',
+    theme: {
+      primaryColor: '#5C8762',
+      accentColor: '#22c55e',
+      backgroundColor: '#fafafa',
+      textColor: '#171717',
+      borderRadius: 'md' as const
+    }
+  },
+  { 
+    value: 'blue', 
+    label: 'Ocean Blue', 
+    color: 'bg-blue-600',
+    theme: {
+      primaryColor: '#2563eb',
+      accentColor: '#3b82f6',
+      backgroundColor: '#f0f9ff',
+      textColor: '#0f172a',
+      borderRadius: 'md' as const
+    }
+  },
+  { 
+    value: 'purple', 
+    label: 'Royal Purple', 
+    color: 'bg-purple-600',
+    theme: {
+      primaryColor: '#9333ea',
+      accentColor: '#a855f7',
+      backgroundColor: '#faf5ff',
+      textColor: '#1e1b4b',
+      borderRadius: 'md' as const
+    }
+  },
+  { 
+    value: 'rose', 
+    label: 'Rose Gold', 
+    color: 'bg-rose-600',
+    theme: {
+      primaryColor: '#e11d48',
+      accentColor: '#f43f5e',
+      backgroundColor: '#fff1f2',
+      textColor: '#881337',
+      borderRadius: 'md' as const
+    }
+  },
+  { 
+    value: 'amber', 
+    label: 'Sunset Amber', 
+    color: 'bg-amber-600',
+    theme: {
+      primaryColor: '#d97706',
+      accentColor: '#f59e0b',
+      backgroundColor: '#fffbeb',
+      textColor: '#451a03',
+      borderRadius: 'md' as const
+    }
+  },
 ];
 
 export const CreateEventPage: React.FC = () => {
@@ -148,6 +203,8 @@ export const CreateEventPage: React.FC = () => {
       return;
     }
 
+    const selectedTheme = COLOR_THEMES.find(t => t.value === formData.color_theme);
+    
     createMutation.mutate({
       event_type: formData.event_type,
       event_name: formData.event_name,
@@ -156,7 +213,7 @@ export const CreateEventPage: React.FC = () => {
       admin_email: formData.admin_email,
       password: formData.password,
       welcome_message: formData.welcome_message || '',
-      color_theme: formData.color_theme || undefined,
+      color_theme: selectedTheme ? JSON.stringify(selectedTheme.theme) : undefined,
       expiration_days: formData.expires_in_days,
     });
   };