neues Admin UI Layout eingeführt. Alle Tests auf den neusten Stand gebracht.

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

@@ -3,9 +3,9 @@ import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
-import { useTheme } from '@tamagui/core';
 import { useTranslation } from 'react-i18next';
 import { withAlpha } from './colors';
+import { useAdminTheme } from '../theme';
 
 const ICON_SIZE = 20;
 
@@ -13,8 +13,8 @@ export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
 
 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
   const { t } = useTranslation('mobile');
-  const theme = useTheme();
-  const surfaceColor = String(theme.surface?.val ?? 'white');
+  const { surface, border, primary, accentSoft, muted, subtle, shadow } = useAdminTheme();
+  const surfaceColor = surface;
   const navSurface = withAlpha(surfaceColor, 0.92);
   const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
   const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
@@ -32,11 +32,11 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
       right={0}
       backgroundColor={navSurface}
       borderTopWidth={1}
-      borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
+      borderColor={border}
       paddingVertical="$2"
       paddingHorizontal="$4"
       zIndex={50}
-      shadowColor="#0f172a"
+      shadowColor={shadow}
       shadowOpacity={0.08}
       shadowRadius={12}
       shadowOffset={{ width: 0, height: -4 }}
@@ -72,7 +72,7 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
                 paddingHorizontal="$3"
                 paddingVertical="$2"
                 borderRadius={12}
-                backgroundColor={activeState ? '#e8f1ff' : 'transparent'}
+                backgroundColor={activeState ? accentSoft : 'transparent'}
                 gap="$1"
                 style={{
                   transform: isPressed ? 'scale(0.96)' : 'scale(1)',
@@ -87,17 +87,17 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
                     width={28}
                     height={3}
                     borderRadius={999}
-                    backgroundColor={String(theme.primary?.val ?? '#007AFF')}
+                    backgroundColor={primary}
                   />
                 ) : null}
                 <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'} />
+                  <IconCmp size={ICON_SIZE} color={activeState ? primary : subtle} />
                 </YStack>
                 <Text
                   fontSize="$xs"
                   fontWeight="700"
                   fontFamily="$body"
-                  color={activeState ? '$primary' : '#6b7280'}
+                  color={activeState ? primary : muted}
                   textAlign="center"
                   flexShrink={1}
                 >