theme update latest project

src/components/common/Header.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import {Ionicons} from "@react-native-vector-icons/ionicons";
-import colors from "../colors";
+import LucideIcon from './LucideIcon';
 import { responsiveFontSize } from "react-native-responsive-dimensions";
+import { useTheme } from "../../hooks/ui/useTheme";
+import FontsFamily from "../../constents/FontsFamily";
 
 type HeaderProps = {
   title: string;
@@ -19,10 +20,14 @@ const Header: React.FC<HeaderProps> = ({
   showBack = true,
   onBackPress,
   rightAction,
-  titleColor = '#000',
-  arrowColor = '#000'
+  titleColor,
+  arrowColor
 }) => {
   const navigation = useNavigation();
+  const theme = useTheme();
+
+  const resolvedTitleColor = titleColor || theme.colors.textPrimary;
+  const resolvedArrowColor = arrowColor || theme.colors.textPrimary;
 
   const handleBack = () => {
     if (onBackPress) {
@@ -35,12 +40,15 @@ const Header: React.FC<HeaderProps> = ({
   return (
     <View style={styles.header}>
       {showBack && (
-        <TouchableOpacity onPress={handleBack} style={{padding:6}}>
-          <Ionicons name="arrow-back" size={24} color={arrowColor} />
+        <TouchableOpacity onPress={handleBack} style={styles.sideAction}>
+          <LucideIcon name="arrow-back" size={22} color={resolvedArrowColor} />
         </TouchableOpacity>
-     )}
-      <Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
-      <View>{rightAction}</View>
+      )}
+      {!showBack && <View style={styles.sideAction} />}
+
+      <Text numberOfLines={1} style={[styles.headerTitle, {color:resolvedTitleColor}]}>{title}</Text>
+
+      <View style={styles.sideAction}>{rightAction}</View>
     </View>
   );
 };
@@ -50,15 +58,21 @@ export default Header;
 const styles = StyleSheet.create({
   header: {
     flexDirection: "row",
-    // alignItems: "center",
-    // justifyContent: "space-between",
-    paddingVertical: 12,
-    paddingHorizontal:12
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  sideAction: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center",
   },
   headerTitle: {
-    fontSize: responsiveFontSize(1.8),
-    fontWeight: "600",
-    // textTransform: "capitalize",
+    flex: 1,
+    textAlign: "center",
+    fontSize: responsiveFontSize(2),
+    fontFamily: FontsFamily.nunitoBold,
   },
-  
 });