Migrate billing from Paddle to Lemon Squeezy

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

@@ -20,6 +20,11 @@ export default function TopBar({
 }: TopBarProps) {
   const { resolved } = useAppearance();
   const isDark = resolved === 'dark';
+  const [animationKey, setAnimationKey] = React.useState(0);
+
+  React.useEffect(() => {
+    setAnimationKey((prev) => prev + 1);
+  }, [eventName]);
 
   return (
     <XStack
@@ -28,17 +33,21 @@ export default function TopBar({
       paddingHorizontal="$4"
       paddingVertical="$3"
       style={{
-        backgroundColor: isDark ? 'rgba(10, 14, 28, 0.72)' : 'rgba(255, 255, 255, 0.85)',
-        backdropFilter: 'saturate(160%) blur(18px)',
-        WebkitBackdropFilter: 'saturate(160%) blur(18px)',
+        backgroundColor: 'transparent',
+        backdropFilter: 'saturate(120%) blur(8px)',
+        WebkitBackdropFilter: 'saturate(120%) blur(8px)',
       }}
     >
       <Text
-        fontSize="$6"
+        key={animationKey}
+        fontSize="$8"
         fontFamily="$display"
         fontWeight="$8"
         numberOfLines={1}
-        style={{ textShadow: '0 6px 18px rgba(2, 6, 23, 0.7)' }}
+        className="guest-topbar-title"
+        flexShrink={1}
+        minWidth={0}
+        style={{ fontSize: 'clamp(20px, 4.6vw, 30px)', lineHeight: '1.1' }}
       >
         {eventName}
       </Text>