From 77477c10cf5553499f17b0d5b4f6060ae3f315d7 Mon Sep 17 00:00:00 2001
From: Rustico77 <tchaklidjirustico@gmail.com>
Date: Tue, 12 May 2026 13:46:36 +0000
Subject: [PATCH] Update color for dark mode

---
 src/navigation/AppNavigator.tsx               | 8 ++++++--
 src/navigation/CustomTabBar.tsx               | 7 ++++---
 src/screens/marketplace/MarketplaceScreen.tsx | 1 +
 src/services/api.ts                           | 2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 5bb7314..faca9a4 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useColorScheme } from 'react-native';
-import { COLORS } from '../theme';
+import { COLORS, FONT_SIZE, useTheme } from '../theme';
 import { CustomTabBar } from './CustomTabBar';
 import { useAuthStore } from '../stores/authStore';
 import {
@@ -42,8 +42,12 @@ const AccStack = createNativeStackNavigator<AccountStackParamList>();
 // ─── Marketplace (always public) ─────────────────────────────────────────────
 
 function MarketplaceNavigator() {
+  const { theme } = useTheme();
   return (
-    <MktStack.Navigator>
+    <MktStack.Navigator screenOptions={{
+      headerStyle:{backgroundColor: theme.bg},
+      headerTitleStyle: { color: theme.text, fontSize: FONT_SIZE.xxl, fontWeight: 'bold' },
+    }}>
       <MktStack.Screen name="MarketplaceList" component={MarketplaceScreen} options={{ title: 'Marketplace' }} />
       <MktStack.Screen name="MarketplaceDetail" component={ChatbotDetailScreen} options={{ title: 'Chatbot Details' }} />
       <MktStack.Screen
diff --git a/src/navigation/CustomTabBar.tsx b/src/navigation/CustomTabBar.tsx
index 7978959..5b608cb 100644
--- a/src/navigation/CustomTabBar.tsx
+++ b/src/navigation/CustomTabBar.tsx
@@ -67,7 +67,7 @@ function TabItem({
   isFocused: boolean;
   onPress: () => void;
 }) {
-  const { theme } = useTheme();
+  const { theme, isDark } = useTheme();
   const scale = useRef(new Animated.Value(1)).current;
   const bgOpacity = useRef(new Animated.Value(isFocused ? 1 : 0)).current;
 
@@ -94,7 +94,7 @@ function TabItem({
     <TouchableWithoutFeedback onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
       <Animated.View style={[styles.tabItem, { transform: [{ scale }] }]}>
         <Animated.View style={[styles.pill, { backgroundColor: pillBg }]}>
-          <Text style={[styles.icon, { opacity: isFocused ? 1 : 0.45 }]}>{icon}</Text>
+          <Text style={[ isDark ? styles.iconDark : styles.iconLight, { opacity: isFocused ? 1 : 0.45 }]}>{icon}</Text>
           <Text
             style={[
               styles.label,
@@ -155,6 +155,7 @@ const styles = StyleSheet.create({
     width: '100%',
     gap: 3,
   },
-  icon: { fontSize: 22 },
+  iconDark: { fontSize: 22, color: COLORS.white },
+  iconLight: { fontSize: 22, color: COLORS.primaryDark },
   label: { fontSize: FONT_SIZE.xs, letterSpacing: 0.2 },
 });
diff --git a/src/screens/marketplace/MarketplaceScreen.tsx b/src/screens/marketplace/MarketplaceScreen.tsx
index 0410753..45bd04d 100644
--- a/src/screens/marketplace/MarketplaceScreen.tsx
+++ b/src/screens/marketplace/MarketplaceScreen.tsx
@@ -70,6 +70,7 @@ export function MarketplaceScreen({ navigation }: Props) {
         )}
       </View>
 
+      {/* Chatbots List */}
       {isLoading ? (
         <Spinner centered label="Loading marketplace..." />
       ) : (
diff --git a/src/services/api.ts b/src/services/api.ts
index 9aa8898..45f1bd7 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -19,7 +19,7 @@ api.interceptors.request.use(config => {
     config.headers.Authorization = `Bearer ${token}`;
   }
   return config;
-});
+}); 
 
 api.interceptors.response.use(
   response => response,