Farb palette

src/navigation/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { Text, View, StyleSheet, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -9,13 +9,14 @@ import {
   LoginScreen,
   SignUpScreen,
   OnboardingScreen,
+  HomeScreen,
   ProjectsScreen,
   ProjectDetailScreen,
   StepEditorScreen,
   NewsScreen,
   SettingsScreen,
   GlazePickerScreen,
-  GlazeMixerScreen,
+  UserListScreen,
 } from '../screens';
 import { colors, spacing } from '../lib/theme';
 import { useAuth } from '../contexts/AuthContext';
@@ -23,11 +24,17 @@ import { useAuth } from '../contexts/AuthContext';
 const RootStack = createNativeStackNavigator<RootStackParamList>();
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 
+const homeIcon = require('../../assets/images/home_icon.png');
+const projectIcon = require('../../assets/images/project_icon.png');
+const tipsIcon = require('../../assets/images/tips_icon.png');
+const settingsIcon = require('../../assets/images/settings_icon.png');
+
 function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
   const tabs = [
-    { name: 'Projects', label: 'Projects', icon: '🏺' },
-    { name: 'News', label: 'Tips', icon: '💡' },
-    { name: 'Settings', label: 'Settings', icon: '⚙️' },
+    { name: 'Home', label: 'Home', iconType: 'image' as const, iconSource: homeIcon },
+    { name: 'Projects', label: 'Projects', iconType: 'image' as const, iconSource: projectIcon },
+    { name: 'News', label: 'Tips', iconType: 'image' as const, iconSource: tipsIcon },
+    { name: 'Settings', label: 'Settings', iconType: 'image' as const, iconSource: settingsIcon },
   ];
 
   return (
@@ -62,7 +69,16 @@ function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
               isFocused && isMiddle && styles.tabItemActiveMiddle,
             ]}
           >
-            <Text style={styles.tabIcon}>{tab.icon}</Text>
+            <View style={styles.imageIconContainer}>
+              <Image
+                source={tab.iconSource}
+                style={[
+                  styles.tabIconImage,
+                  isFocused && styles.tabIconImageActive
+                ]}
+                resizeMode="contain"
+              />
+            </View>
             <Text style={[
               styles.tabLabel,
               isFocused && styles.tabLabelActive
@@ -83,7 +99,15 @@ function MainTabs() {
       screenOptions={{
         headerShown: false,
       }}
+      initialRouteName="Home"
     >
+      <MainTab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+        }}
+      />
       <MainTab.Screen
         name="Projects"
         component={ProjectsScreen}
@@ -113,7 +137,7 @@ const styles = StyleSheet.create({
   tabBarContainer: {
     flexDirection: 'row',
     backgroundColor: colors.background,
-    height: 90,
+    height: 65,
     position: 'absolute',
     bottom: 20,
     left: 10,
@@ -129,12 +153,12 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 12,
+    paddingVertical: 8,
   },
   tabItemActive: {
-    backgroundColor: '#E8C7A8',
+    backgroundColor: colors.primaryLight,
     borderWidth: 2,
-    borderColor: '#e6b98e',
+    borderColor: colors.primary,
   },
   tabItemActiveFirst: {
     borderRadius: 25,
@@ -145,12 +169,28 @@ const styles = StyleSheet.create({
   tabItemActiveMiddle: {
     borderRadius: 25,
   },
-  tabIcon: {
-    fontSize: 32,
-    marginBottom: 4,
+  imageIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 0,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 2,
+  },
+  tabIconImage: {
+    width: 40,
+    height: 40,
+    opacity: 0.8,
+    backgroundColor: 'transparent',
+  },
+  tabIconImageActive: {
+    opacity: 1,
+    backgroundColor: 'transparent',
   },
   tabLabel: {
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: '700',
     letterSpacing: 0.3,
     color: colors.textSecondary,
@@ -234,9 +274,11 @@ export function AppNavigator() {
               options={{ title: 'Select Glazes' }}
             />
             <RootStack.Screen
-              name="GlazeMixer"
-              component={GlazeMixerScreen}
-              options={{ title: 'Mix Glazes' }}
+              name="UserList"
+              component={UserListScreen}
+              options={({ route }) => ({
+                title: route.params.type === 'shopping' ? 'Shopping List' : 'Wish List',
+              })}
             />
           </>
         )}