redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/components/CustomTabBar.tsx

@@ -1,21 +1,10 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
 import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../contexts/ThemeContext";
 
-/**
- * CustomTabBar - Minimal bottom navigation with pill indicator
- *
- * Design:
- * - Simple flat design (no floating, no glassmorphism)
- * - Clean icons with outline/filled states
- * - Small pill indicator below active tab
- * - 56px height (reduced from 70px)
- * - No animations (just opacity fade on press)
- * - Theme-aware colors
- */
 export function CustomTabBar({
   state,
   descriptors,
@@ -71,6 +60,23 @@ export function CustomTabBar({
           }
         };
 
+        const getLabel = (routeName: string) => {
+          switch (routeName) {
+            case "index":
+              return "Home";
+            case "goals":
+              return "Goals";
+            case "attendance":
+              return "Attendance";
+            case "recommendations":
+              return "Plans";
+            case "profile":
+              return "Profile";
+            default:
+              return "";
+          }
+        };
+
         return (
           <TouchableOpacity
             key={index}
@@ -85,7 +91,7 @@ export function CustomTabBar({
             <View style={styles.iconWrapper}>
               <Ionicons
                 name={getIconName(route.name, isFocused)}
-                size={24}
+                size={26}
                 color={isFocused ? colors.primary : colors.textTertiary}
               />
               {isFocused && (
@@ -97,6 +103,17 @@ export function CustomTabBar({
                 />
               )}
             </View>
+            <Text
+              style={[
+                styles.label,
+                {
+                  color: isFocused ? colors.primary : colors.textTertiary,
+                  fontWeight: isFocused ? "700" : "500",
+                },
+              ]}
+            >
+              {getLabel(route.name)}
+            </Text>
           </TouchableOpacity>
         );
       })}
@@ -107,8 +124,9 @@ export function CustomTabBar({
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    height: 56,
+    height: 70,
     borderTopWidth: 1,
+    paddingTop: 8,
   },
   tabItem: {
     flex: 1,
@@ -121,9 +139,13 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   indicator: {
-    width: 24,
-    height: 3,
-    borderRadius: 999,
+    width: 20,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  label: {
+    fontSize: 11,
     marginTop: 4,
   },
 });