more usage of tamagui primitives

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

@@ -83,14 +83,18 @@ export function CTAButton({
 }: {
   label: string;
   onPress: () => void;
-  tone?: 'primary' | 'ghost';
+  tone?: 'primary' | 'ghost' | 'danger';
   fullWidth?: boolean;
   disabled?: boolean;
   loading?: boolean;
 }) {
-  const { primary, surface, border, text } = useAdminTheme();
+  const { primary, surface, border, text, danger } = useAdminTheme();
   const isPrimary = tone === 'primary';
+  const isDanger = tone === 'danger';
   const isDisabled = disabled || loading;
+  const backgroundColor = isDanger ? danger : isPrimary ? primary : surface;
+  const borderColor = isPrimary || isDanger ? 'transparent' : border;
+  const labelColor = isPrimary || isDanger ? 'white' : text;
   return (
     <Pressable
       onPress={isDisabled ? undefined : onPress}
@@ -106,11 +110,11 @@ export function CTAButton({
         borderRadius={16}
         alignItems="center"
         justifyContent="center"
-        backgroundColor={isPrimary ? primary : surface}
-        borderWidth={isPrimary ? 0 : 1}
-        borderColor={isPrimary ? 'transparent' : border}
+        backgroundColor={backgroundColor}
+        borderWidth={isPrimary || isDanger ? 0 : 1}
+        borderColor={borderColor}
       >
-        <Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : text}>
+        <Text fontSize="$sm" fontWeight="800" color={labelColor}>
           {label}
         </Text>
       </XStack>