weitere perfektionierung der neuen mobile app

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

@@ -3,6 +3,7 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@tamagui/core';
 
 type SheetProps = {
   open: boolean;
@@ -16,15 +17,21 @@ type SheetProps = {
 
 export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
   const { t } = useTranslation('mobile');
+  const theme = useTheme();
+  const surface = String(theme.surface?.val ?? '#111827');
+  const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
+  const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
+  const overlay = String(theme.gray12?.val ?? 'rgba(0,0,0,0.6)');
+
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-end justify-center backdrop-blur-sm" style={{ backgroundColor: `${overlay}66` }}>
       <YStack
         width="100%"
         maxWidth={520}
         borderTopLeftRadius={24}
         borderTopRightRadius={24}
-        backgroundColor="white"
+        backgroundColor={surface}
         padding="$4"
         paddingBottom="$7"
         space="$3"
@@ -38,11 +45,11 @@ export function MobileSheet({ open, title, onClose, children, footer, bottomOffs
         style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
       >
         <XStack alignItems="center" justifyContent="space-between">
-          <Text fontSize="$md" fontWeight="800" color="#111827">
+          <Text fontSize="$md" fontWeight="800" color={text}>
             {title}
           </Text>
           <Pressable onPress={onClose}>
-            <Text fontSize="$md" color="#6b7280">
+            <Text fontSize="$md" color={muted}>
               {t('actions.close', 'Close')}
             </Text>
           </Pressable>