Update guest v2 branding and theming

resources/js/guest-v2/components/TopBar.tsx

@@ -3,10 +3,13 @@ import { XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Button } from '@tamagui/button';
 import { Bell, Settings } from 'lucide-react';
-import { useAppearance } from '@/hooks/use-appearance';
+import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '@/guest/context/EventBrandingContext';
+import EventLogo from './EventLogo';
+import { useGuestThemeVariant } from '../lib/guestTheme';
 
 type TopBarProps = {
   eventName: string;
+  eventIcon?: string | null;
   onProfilePress?: () => void;
   onNotificationsPress?: () => void;
   notificationCount?: number;
@@ -14,18 +17,28 @@ type TopBarProps = {
 
 export default function TopBar({
   eventName,
+  eventIcon,
   onProfilePress,
   onNotificationsPress,
   notificationCount = 0,
 }: TopBarProps) {
-  const { resolved } = useAppearance();
-  const isDark = resolved === 'dark';
+  const { isDark } = useGuestThemeVariant();
+  const brandingContext = useOptionalEventBranding();
+  const branding = brandingContext?.branding ?? DEFAULT_EVENT_BRANDING;
+  const logoPosition = branding.logo?.position ?? 'left';
   const [animationKey, setAnimationKey] = React.useState(0);
 
   React.useEffect(() => {
     setAnimationKey((prev) => prev + 1);
   }, [eventName]);
 
+  const identityDirection = logoPosition === 'right'
+    ? 'row-reverse'
+    : logoPosition === 'center'
+      ? 'column'
+      : 'row';
+  const identityAlign = logoPosition === 'center' ? 'center' : 'flex-start';
+
   return (
     <XStack
       alignItems="center"
@@ -38,19 +51,29 @@ export default function TopBar({
         WebkitBackdropFilter: 'saturate(120%) blur(8px)',
       }}
     >
-      <Text
+      <XStack
         key={animationKey}
-        fontSize="$8"
-        fontFamily="$display"
-        fontWeight="$8"
-        numberOfLines={1}
-        className="guest-topbar-title"
+        alignItems={identityAlign}
+        gap="$2"
+        flexDirection={identityDirection}
         flexShrink={1}
         minWidth={0}
-        style={{ fontSize: 'clamp(20px, 4.6vw, 30px)', lineHeight: '1.1' }}
       >
-        {eventName}
-      </Text>
+        <EventLogo name={eventName} icon={eventIcon} logo={branding.logo} size="s" />
+        <Text
+          fontSize="$8"
+          fontFamily="$display"
+          fontWeight="$8"
+          numberOfLines={1}
+          className="guest-topbar-title"
+          textAlign={logoPosition === 'center' ? 'center' : 'left'}
+          flexShrink={1}
+          minWidth={0}
+          style={{ fontSize: 'clamp(20px, 4.6vw, 30px)', lineHeight: '1.1' }}
+        >
+          {eventName}
+        </Text>
+      </XStack>
       <XStack gap="$2" alignItems="center">
         <Button
           size="$3"