From 92b341bdcd26261a3dd7cb1a15bbe67cba2c2980 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Thu, 15 Jan 2026 08:58:09 +0100
Subject: [PATCH] Use Tamagui slider for branding controls

---
 resources/js/admin/mobile/BrandingPage.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/resources/js/admin/mobile/BrandingPage.tsx b/resources/js/admin/mobile/BrandingPage.tsx
index 6c4c3c0..a14a65a 100644
--- a/resources/js/admin/mobile/BrandingPage.tsx
+++ b/resources/js/admin/mobile/BrandingPage.tsx
@@ -5,6 +5,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 { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { TenantEvent, getEvent, updateEvent, getTenantFonts, getTenantSettings, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
@@ -1275,7 +1276,7 @@ function LabeledSlider({
   disabled?: boolean;
   suffix?: string;
 }) {
-  const { textStrong, muted, primary } = useAdminTheme();
+  const { textStrong, muted, primary, border, surface } = useAdminTheme();
   return (
     <YStack space="$1.5">
       <XStack alignItems="center" justifyContent="space-between">
@@ -1287,16 +1288,20 @@ function LabeledSlider({
           {suffix ? ` ${suffix}` : ''}
         </Text>
       </XStack>
-      <input
-        type="range"
+      <Slider
+        width="100%"
         min={min}
         max={max}
         step={step}
-        value={value}
+        value={[value]}
+        onValueChange={(next) => onChange(next[0] ?? value)}
         disabled={disabled}
-        onChange={(event) => onChange(Number(event.target.value))}
-        style={{ width: '100%', height: 28, accentColor: primary }}
-      />
+      >
+        <Slider.Track height={6} borderRadius={999} backgroundColor={border}>
+          <Slider.TrackActive backgroundColor={primary} />
+        </Slider.Track>
+        <Slider.Thumb index={0} size="$1" backgroundColor={surface} borderColor={primary} borderWidth={2} />
+      </Slider>
     </YStack>
   );
 }