feat(chat): implement dynamic theme support in chat components

- Enhanced ChatHeader and ChatInput components to support dynamic theme colors, improving visual consistency across different themes.
- Updated styles in ChatScreen to utilize new dynamic styles for better responsiveness and user experience.
- Refactored styles in various profile screens to adopt a unified background color scheme and improved spacing for a cleaner layout.

This update significantly enhances the chat interface and profile settings by allowing for dynamic theming and improved visual elements.

src/screens/profile/SettingsScreen.tsx

@@ -82,50 +82,40 @@ function createSettingsStyles(colors: AppColors) {
   return StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
     },
     scrollContent: {
-      paddingVertical: spacing.md,
+      paddingVertical: spacing.lg,
     },
     groupContainer: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing['2xl'],
       maxWidth: SETTINGS_CARD_MAX_WIDTH,
       alignSelf: 'center',
       width: '100%',
     },
     groupHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: spacing['2xl'],
       marginBottom: spacing.sm,
-      gap: spacing.xs,
+      marginTop: spacing.sm,
     },
     groupTitle: {
       fontWeight: '600',
       fontSize: fontSizes.sm,
-    },
-    card: {
-      backgroundColor: colors.background.paper,
-      marginHorizontal: spacing.lg,
-      borderRadius: borderRadius.lg,
-      overflow: 'hidden',
+      color: colors.text.secondary,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
     },
     settingItem: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      paddingVertical: spacing.md,
-      paddingHorizontal: spacing.md,
-      borderBottomWidth: 1,
+      paddingVertical: 16,
+      paddingHorizontal: spacing['2xl'],
+      borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: colors.divider,
     },
-    settingItemFirst: {
-      borderTopLeftRadius: borderRadius.lg,
-      borderTopRightRadius: borderRadius.lg,
-    },
+    settingItemFirst: {},
     settingItemLast: {
-      borderBottomLeftRadius: borderRadius.lg,
-      borderBottomRightRadius: borderRadius.lg,
       borderBottomWidth: 0,
     },
     settingItemLeft: {
@@ -134,17 +124,13 @@ function createSettingsStyles(colors: AppColors) {
       flex: 1,
     },
     iconContainer: {
-      width: 36,
-      height: 36,
-      borderRadius: borderRadius.md,
-      backgroundColor: colors.primary.light + '20',
+      width: 24,
+      height: 24,
       justifyContent: 'center',
       alignItems: 'center',
-      marginRight: spacing.md,
-    },
-    dangerIconContainer: {
-      backgroundColor: colors.error.light + '20',
+      marginRight: spacing.lg,
     },
+    dangerIconContainer: {},
     settingContent: {
       flex: 1,
     },
@@ -155,19 +141,19 @@ function createSettingsStyles(colors: AppColors) {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: colors.background.paper,
-      marginHorizontal: spacing.lg,
-      marginTop: spacing.sm,
-      marginBottom: spacing.lg,
-      paddingVertical: spacing.md,
-      borderRadius: borderRadius.lg,
+      marginTop: spacing.lg,
+      marginBottom: spacing['2xl'],
+      paddingVertical: 16,
+      marginHorizontal: spacing['2xl'],
+      borderRadius: 14,
       gap: spacing.sm,
       maxWidth: SETTINGS_CARD_MAX_WIDTH,
       alignSelf: 'center',
       width: '100%',
+      backgroundColor: colors.error.light + '20',
     },
     logoutText: {
-      fontWeight: '500',
+      fontWeight: '600',
     },
     footer: {
       alignItems: 'center',
@@ -318,7 +304,6 @@ export const SettingsScreen: React.FC = () => {
       key={item.key}
       style={[
         styles.settingItem,
-        index === 0 && styles.settingItemFirst,
         index === total - 1 && styles.settingItemLast,
       ]}
       onPress={() => (item.onPress ? item.onPress() : handleItemPress(item.key))}
@@ -328,8 +313,8 @@ export const SettingsScreen: React.FC = () => {
         <View style={[styles.iconContainer, item.danger && styles.dangerIconContainer]}>
           <MaterialCommunityIcons
             name={item.icon as any}
-            size={20}
-            color={item.danger ? colors.error.main : colors.primary.main}
+            size={22}
+            color={item.danger ? colors.error.main : colors.text.secondary}
           />
         </View>
         <View style={styles.settingContent}>
@@ -352,12 +337,11 @@ export const SettingsScreen: React.FC = () => {
   const renderGroup = (group: (typeof settingsGroups)[0]) => (
     <View key={group.title} style={styles.groupContainer}>
       <View style={styles.groupHeader}>
-        <MaterialCommunityIcons name={group.icon as any} size={16} color={colors.primary.main} />
-        <Text variant="caption" color={colors.text.secondary} style={styles.groupTitle}>
+        <Text variant="caption" style={styles.groupTitle}>
           {group.title}
         </Text>
       </View>
-      <View style={styles.card}>
+      <View>
         {group.items.map((item, index) => renderSettingItem(item, index, group.items.length))}
       </View>
     </View>