weitere perfektionierung der neuen mobile app

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

@@ -6,6 +6,8 @@ import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
 import { useTheme } from '@tamagui/core';
 import { useTranslation } from 'react-i18next';
 
+const ICON_SIZE = 18;
+
 export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
@@ -19,17 +21,17 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
   ];
 
   return (
-    <YStack
-      position="fixed"
-      bottom={0}
-      left={0}
-      right={0}
-      backgroundColor="white"
-      borderTopWidth={1}
-      borderColor="#e5e7eb"
-      paddingVertical="$2"
-      paddingHorizontal="$4"
-      zIndex={50}
+        <YStack
+          position="fixed"
+          bottom={0}
+          left={0}
+          right={0}
+          backgroundColor={String(theme.surface?.val ?? 'white')}
+          borderTopWidth={1}
+          borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
+          paddingVertical="$2"
+          paddingHorizontal="$4"
+          zIndex={50}
       shadowColor="#0f172a"
       shadowOpacity={0.08}
       shadowRadius={12}
@@ -44,15 +46,31 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
           return (
             <Pressable key={item.key} onPress={() => onNavigate(item.key)}>
               <YStack
+                flexGrow={1}
+                flexBasis="0%"
                 alignItems="center"
+                justifyContent="center"
                 space="$1"
                 position="relative"
-                padding="$2"
+                minWidth={88}
+                minHeight={64}
+                paddingHorizontal="$3"
+                paddingVertical="$2"
                 borderRadius={12}
                 backgroundColor={activeState ? '#e8f1ff' : 'transparent'}
+                gap="$1"
               >
-                <IconCmp size={20} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
-                <Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
+                <YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
+                  <IconCmp size={ICON_SIZE} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
+                </YStack>
+                <Text
+                  fontSize="$xs"
+                  fontWeight="700"
+                  fontFamily="$body"
+                  color={activeState ? '$primary' : '#6b7280'}
+                  textAlign="center"
+                  flexShrink={1}
+                >
                   {item.label}
                 </Text>
               </YStack>