Migrate billing from Paddle to Lemon Squeezy

resources/js/admin/mobile/components/MobileShell.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
-import { YStack, XStack } from '@tamagui/stacks';
-import { SizableText as Text } from '@tamagui/text';
+import { YStack, XStack, SizableText as Text, Image } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { Image } from '@tamagui/image';
 import { useTranslation } from 'react-i18next';
 import { useEventContext } from '../../context/EventContext';
 import { BottomNav, NavKey } from './BottomNav';

resources/js/admin/mobile/components/Primitives.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { Card } from '@tamagui/card';
-import { YStack, XStack } from '@tamagui/stacks';
-import { SizableText as Text } from '@tamagui/text';
+import { Card, YStack, XStack, SizableText as Text, Tabs, Separator } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { Tabs, Separator } from 'tamagui';
 import { useAdminTheme } from '../theme';
 import { withAlpha } from './colors';
 
@@ -16,7 +13,9 @@ export function MobileCard({
   const { surface, border, shadow, glassSurface, glassBorder, glassShadow } = useAdminTheme();
   return (
     <YStack
-      className={['admin-fade-up', className].filter(Boolean).join(' ')}
+      className={className}
+      animation="bouncy"
+      enterStyle={{ opacity: 0, y: 10, scale: 0.9 }}
       backgroundColor={glassSurface ?? surface}
       borderRadius={20}
       borderWidth={2}
@@ -131,6 +130,8 @@ export function CTAButton({
       }}
     >
       <XStack
+        animation="quick"
+        pressStyle={{ scale: 0.97, opacity: 0.9 }}
         height={52}
         borderRadius={18}
         alignItems="center"
@@ -335,7 +336,8 @@ export function ActionTile({
       disabled={disabled}
     >
       <YStack
-        className="admin-fade-up"
+        animation="lazy"
+        pressStyle={{ scale: 0.96, opacity: 0.8 }}
         style={tileStyle}
         borderRadius={isCluster ? 14 : 16}
         padding="$3"

resources/js/admin/mobile/components/Sheet.tsx

@@ -36,9 +36,6 @@ export function MobileSheet({
   const { surface, textStrong, muted, overlay, shadow, border } = useAdminTheme();
   const bottomOffset = `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)`;
 
-  if (!open) {
-    return null;
-  }
   return (
     <Sheet
       modal
@@ -53,29 +50,33 @@ export function MobileSheet({
       dismissOnOverlayPress
       dismissOnSnapToBottom
       zIndex={100000}
+      animation="lazy"
     >
-      <Sheet.Overlay {...({ backgroundColor: `${overlay}66` } as any)} />
+      <Sheet.Overlay
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+        backgroundColor={overlay}
+      />
       <Sheet.Frame
-        {...({
-          width: '100%',
-          maxWidth: 520,
-          alignSelf: 'center',
-          borderTopLeftRadius: 24,
-          borderTopRightRadius: 24,
-          backgroundColor: surface,
-          padding,
-          paddingBottom,
-          shadowColor: shadow,
-          shadowOpacity: 0.12,
-          shadowRadius: 18,
-          shadowOffset: { width: 0, height: -8 },
-        } as any)}
+        width="100%"
+        maxWidth={520}
+        alignSelf="center"
+        borderTopLeftRadius={24}
+        borderTopRightRadius={24}
+        backgroundColor={surface}
+        padding={padding}
+        paddingBottom={paddingBottom}
+        shadowColor={shadow}
+        shadowOpacity={0.12}
+        shadowRadius={18}
+        shadowOffset={{ width: 0, height: -8 }}
         style={{ marginBottom: bottomOffset }}
       >
         <Sheet.Handle height={5} width={48} backgroundColor={border} borderRadius={999} marginBottom="$3" />
         <Sheet.ScrollView
           showsVerticalScrollIndicator={false}
-          {...({ contentContainerStyle: { paddingBottom: 6 } } as any)}
+          contentContainerStyle={{ paddingBottom: 6 }}
         >
           <YStack gap={contentSpacing}>
             <XStack alignItems="center" justifyContent="space-between">