fixxed color selector in the category settings and fixxed drag and drop

subtask

carry-your-live/app/(tabs)/_layout.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { TabBarIcon } from '@/components/TabBarIcon';
 import { useSettings } from '@/theme';
+import { setLastVisitedTab } from '@/utils/tabHistory';
 
 export default function TabLayout() {
   const { theme } = useSettings();
@@ -12,27 +13,44 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: theme.accent,
-        tabBarInactiveTintColor: '#8E8E8E',
+        tabBarInactiveTintColor: theme.text,
         tabBarStyle: {
           backgroundColor: theme.tabBarBg,
           borderTopWidth: 1,
           borderTopColor: theme.border,
-          height: 64 + insets.bottom,
+          height: 68 + insets.bottom,
           paddingBottom: insets.bottom,
+          paddingTop: 6,
+          elevation: 8,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: -2 },
+          shadowOpacity: 0.08,
+          shadowRadius: 8,
+        },
+        tabBarItemStyle: {
+          paddingVertical: 0,
         },
         tabBarLabelStyle: {
           fontSize: 11,
-          fontWeight: '500',
+          fontWeight: '700',
         },
         headerShown: false,
+        sceneStyle: { backgroundColor: theme.background },
       }}
+      screenListeners={({ route }) => ({
+        focus: () => {
+          if (route.name !== 'settings') {
+            setLastVisitedTab(route.name);
+          }
+        },
+      })}
     >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Tasks',
-          tabBarIcon: ({ focused, color }) => (
-            <TabBarIcon name="checklist" focused={focused} color={color} />
+          title: 'ToDo',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name="checklist" focused={focused} color={color} size={26} />
           ),
         }}
       />
@@ -40,8 +58,8 @@ export default function TabLayout() {
         name="calendar"
         options={{
           title: 'Calendar',
-          tabBarIcon: ({ focused, color }) => (
-            <TabBarIcon name="calendar" focused={focused} color={color} />
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name="calendar" focused={focused} color={color} size={26} />
           ),
         }}
       />
@@ -49,8 +67,8 @@ export default function TabLayout() {
         name="stats"
         options={{
           title: 'Stats',
-          tabBarIcon: ({ focused, color }) => (
-            <TabBarIcon name="stats" focused={focused} color={color} />
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name="stats" focused={focused} color={color} size={26} />
           ),
         }}
       />
@@ -58,11 +76,11 @@ export default function TabLayout() {
         name="settings"
         options={{
           title: 'Settings',
-          tabBarIcon: ({ focused, color }) => (
-            <TabBarIcon name="gear" focused={focused} color={color} />
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name="gear" focused={focused} color={color} size={26} />
           ),
         }}
       />
     </Tabs>
   );
-}
+}