Adopt Tamagui defaults for tabs and filters

resources/js/admin/mobile/BrandingPage.tsx

@@ -6,7 +6,7 @@ import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save,
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { Slider } from 'tamagui';
+import { Slider, Tabs } from 'tamagui';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { MobileColorInput, MobileField, MobileFileInput, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
@@ -637,15 +637,28 @@ export default function MobileBrandingPage() {
         <ContextHelpLink slug="event-branding-assets" />
       </XStack>
 
-      <MobileCard gap="$2">
-        <XStack gap="$2">
-          <TabButton label={t('events.branding.titleShort', 'Branding')} active={activeTab === 'branding'} onPress={() => setActiveTab('branding')} />
-          <TabButton label={t('events.watermark.tab', 'Wasserzeichen')} active={activeTab === 'watermark'} onPress={() => setActiveTab('watermark')} />
-        </XStack>
-      </MobileCard>
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as TabKey)}
+        orientation="horizontal"
+        flexDirection="column"
+      >
+        <MobileCard gap="$2">
+          <Tabs.List gap="$2">
+            <Tabs.Tab value="branding" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
+              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+                {t('events.branding.titleShort', 'Branding')}
+              </Text>
+            </Tabs.Tab>
+            <Tabs.Tab value="watermark" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
+              <Text fontSize="$sm" fontWeight="600" textAlign="center">
+                {t('events.watermark.tab', 'Wasserzeichen')}
+              </Text>
+            </Tabs.Tab>
+          </Tabs.List>
+        </MobileCard>
 
-      {activeTab === 'branding' ? (
-        <>
+        <Tabs.Content value="branding" paddingTop="$2">
           <MobileCard gap="$3">
             <Text fontSize="$sm" fontWeight="700" color={textStrong}>
               {t('events.branding.previewTitle', 'Guest App Preview')}
@@ -1216,12 +1229,14 @@ export default function MobileBrandingPage() {
                   onChange={(value) => setForm((prev) => ({ ...prev, linkColor: value }))}
                   disabled={brandingDisabled}
                 />
-              </MobileCard>
+                  </MobileCard>
           </>
-        </>
-      ) : (
-        renderWatermarkTab()
-      )}
+        </Tabs.Content>
+
+        <Tabs.Content value="watermark" paddingTop="$2">
+          {renderWatermarkTab()}
+        </Tabs.Content>
+      </Tabs>
 
       <YStack gap="$2">
         <CTAButton label={saving ? t('events.branding.saving', 'Saving...') : t('events.branding.save', 'Save Branding')} onPress={() => handleSave()} />
@@ -1744,27 +1759,6 @@ function UpgradeCard({
   );
 }
 
-function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
-  const { primary, surfaceMuted, border, surface, textStrong } = useAdminTheme();
-  return (
-    <Pressable onPress={onPress} style={{ flex: 1 }}>
-      <XStack
-        alignItems="center"
-        justifyContent="center"
-        paddingVertical="$2.5"
-        borderRadius={12}
-        backgroundColor={active ? primary : surfaceMuted}
-        borderWidth={1}
-        borderColor={active ? primary : border}
-      >
-        <Text fontSize="$sm" color={active ? surface : textStrong} fontWeight="700">
-          {label}
-        </Text>
-      </XStack>
-    </Pressable>
-  );
-}
-
 function ModeButton({
   label,
   active,