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.
2026-04-02 17:55:56 +08:00
parent 72842352d9
commit e8651215f7
9 changed files with 213 additions and 245 deletions
--- a/src/screens/profile/AccountSecurityScreen.tsx
+++ b/src/screens/profile/AccountSecurityScreen.tsx
@@ -190,8 +190,7 @@ export const AccountSecurityScreen: React.FC = () => {
    <>
      <View style={styles.section}>
        <View style={styles.sectionHeader}>
-          <MaterialCommunityIcons name="email-check-outline" size={18} color={colors.primary.main} />
-          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
+          <Text variant="caption" style={styles.sectionTitle}>
            邮箱验证
          </Text>
        </View>
@@ -206,7 +205,7 @@ export const AccountSecurityScreen: React.FC = () => {
          </View>

          <View style={styles.inputWrapper}>
-            <MaterialCommunityIcons name="email-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+            <MaterialCommunityIcons name="email-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
            <TextInput
              style={styles.input}
              placeholder="请输入邮箱"
@@ -220,7 +219,7 @@ export const AccountSecurityScreen: React.FC = () => {

          <View style={styles.codeRow}>
            <View style={[styles.inputWrapper, styles.codeInput]}>
-              <MaterialCommunityIcons name="shield-key-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+              <MaterialCommunityIcons name="shield-key-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
              <TextInput
                style={styles.input}
                placeholder="验证码"
@@ -260,14 +259,13 @@ export const AccountSecurityScreen: React.FC = () => {

      <View style={styles.section}>
        <View style={styles.sectionHeader}>
-          <MaterialCommunityIcons name="lock-reset" size={18} color={colors.primary.main} />
-          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
+          <Text variant="caption" style={styles.sectionTitle}>
            修改密码
          </Text>
        </View>
        <View style={styles.card}>
          <View style={styles.inputWrapper}>
-            <MaterialCommunityIcons name="lock-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+            <MaterialCommunityIcons name="lock-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
            <TextInput
              style={styles.input}
              placeholder="当前密码"
@@ -278,7 +276,7 @@ export const AccountSecurityScreen: React.FC = () => {
            />
          </View>
          <View style={styles.inputWrapper}>
-            <MaterialCommunityIcons name="lock-plus-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+            <MaterialCommunityIcons name="lock-plus-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
            <TextInput
              style={styles.input}
              placeholder="新密码（至少6位）"
@@ -290,7 +288,7 @@ export const AccountSecurityScreen: React.FC = () => {
          </View>
          <View style={styles.codeRow}>
            <View style={[styles.inputWrapper, styles.codeInput]}>
-              <MaterialCommunityIcons name="shield-key-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+              <MaterialCommunityIcons name="shield-key-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
              <TextInput
                style={styles.input}
                placeholder="邮箱验证码"
@@ -316,7 +314,7 @@ export const AccountSecurityScreen: React.FC = () => {
            </TouchableOpacity>
          </View>
          <View style={styles.inputWrapper}>
-            <MaterialCommunityIcons name="lock-check-outline" size={20} color={colors.primary.main} style={styles.inputIcon} />
+            <MaterialCommunityIcons name="lock-check-outline" size={20} color={colors.text.secondary} style={styles.inputIcon} />
            <TextInput
              style={styles.input}
              placeholder="确认新密码"
@@ -358,29 +356,28 @@ function createAccountSecurityStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
    },
    scrollContent: {
-      paddingVertical: spacing.md,
+      paddingVertical: spacing.lg,
    },
    section: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing['2xl'],
    },
    sectionHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: spacing['2xl'],
      marginBottom: spacing.sm,
-      gap: spacing.xs,
+      marginTop: spacing.sm,
    },
    sectionTitle: {
      fontWeight: '600',
+      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
    },
    card: {
-      backgroundColor: colors.background.paper,
-      marginHorizontal: spacing.lg,
-      borderRadius: borderRadius.lg,
-      padding: spacing.md,
+      marginHorizontal: spacing['2xl'],
      maxWidth: CONTENT_MAX_WIDTH,
      alignSelf: 'center',
      width: '100%',
@@ -412,11 +409,9 @@ function createAccountSecurityStyles(colors: AppColors) {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.background.default,
-      borderRadius: borderRadius.lg,
-      borderWidth: 1,
-      borderColor: colors.divider,
+      borderRadius: 14,
      paddingHorizontal: spacing.md,
-      height: 48,
+      height: 50,
      marginBottom: spacing.sm,
    },
    inputIcon: {
@@ -426,6 +421,7 @@ function createAccountSecurityStyles(colors: AppColors) {
      flex: 1,
      color: colors.text.primary,
      fontSize: fontSizes.md,
+      height: 50,
    },
    codeRow: {
      flexDirection: 'row',
@@ -438,9 +434,9 @@ function createAccountSecurityStyles(colors: AppColors) {
      marginBottom: 0,
    },
    sendCodeButton: {
-      height: 48,
+      height: 50,
      minWidth: 110,
-      borderRadius: borderRadius.lg,
+      borderRadius: 14,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -452,8 +448,8 @@ function createAccountSecurityStyles(colors: AppColors) {
      fontWeight: '600',
    },
    primaryButton: {
-      height: 48,
-      borderRadius: borderRadius.lg,
+      height: 50,
+      borderRadius: 14,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -462,7 +458,7 @@ function createAccountSecurityStyles(colors: AppColors) {
    primaryButtonText: {
      color: colors.text.inverse,
      fontSize: fontSizes.md,
-      fontWeight: '700',
+      fontWeight: '600',
    },
    buttonDisabled: {
      opacity: 0.6,
--- a/src/screens/profile/BlockedUsersScreen.tsx
+++ b/src/screens/profile/BlockedUsersScreen.tsx
@@ -21,7 +21,7 @@ function createBlockedUsersStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
    },
    loadingWrap: {
      flex: 1,
@@ -39,10 +39,7 @@ function createBlockedUsersStyles(colors: AppColors) {
    item: {
      flexDirection: 'row',
      alignItems: 'center',
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
      padding: spacing.md,
-      ...shadows.sm,
    },
    content: {
      flex: 1,
--- a/src/screens/profile/ChatSettingsScreen.tsx
+++ b/src/screens/profile/ChatSettingsScreen.tsx
@@ -139,39 +139,36 @@ function createStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
    },
    scrollContent: {
-      paddingVertical: spacing.md,
+      paddingVertical: spacing.lg,
    },
    section: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing['2xl'],
      maxWidth: CARD_MAX_WIDTH,
      alignSelf: 'center',
      width: '100%',
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: spacing['2xl'],
    },
    sectionTitle: {
      fontSize: fontSizes.sm,
      fontWeight: '600',
      color: colors.text.secondary,
      marginBottom: spacing.sm,
-      marginLeft: spacing.xs,
-    },
-    card: {
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
-      padding: spacing.md,
+      marginTop: spacing.sm,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
    },
    // 聊天预览样式
    previewContainer: {
-      backgroundColor: '#E8F5E9',
-      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.light + '20',
+      borderRadius: 14,
      padding: spacing.md,
      minHeight: 140,
    },
    previewMessage: {
-      backgroundColor: '#FFFFFF',
+      backgroundColor: colors.background.paper,
      borderRadius: borderRadius.md,
      padding: spacing.sm,
      marginBottom: spacing.sm,
@@ -186,11 +183,11 @@ function createStyles(colors: AppColors) {
    },
    previewText: {
      fontSize: fontSizes.sm,
-      color: '#333',
+      color: colors.text.primary,
    },
    previewTime: {
      fontSize: fontSizes.xs,
-      color: '#999',
+      color: colors.text.hint,
      marginTop: 2,
      alignSelf: 'flex-end',
    },
@@ -243,13 +240,13 @@ function createStyles(colors: AppColors) {
      marginTop: 4,
      color: colors.text.secondary,
    },
-    // 设置项样式
+    // 设置项样式 - 扁平化
    settingItem: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
-      paddingVertical: spacing.md,
-      borderBottomWidth: 1,
+      paddingVertical: 16,
+      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.divider,
    },
    settingItemLast: {
@@ -258,15 +255,14 @@ function createStyles(colors: AppColors) {
    settingItemLeft: {
      flexDirection: 'row',
      alignItems: 'center',
-      gap: spacing.md,
+      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.lg,
    },
    settingTitle: {
      fontSize: fontSizes.md,
@@ -277,6 +273,10 @@ function createStyles(colors: AppColors) {
      color: colors.text.secondary,
      marginTop: 2,
    },
+    // 滑块容器 - 扁平化
+    sliderContainer: {
+      paddingVertical: 8,
+    },
    // 开关样式
    switch: {
      width: 50,
@@ -292,7 +292,7 @@ function createStyles(colors: AppColors) {
      width: 24,
      height: 24,
      borderRadius: 12,
-      backgroundColor: '#fff',
+      backgroundColor: colors.background.paper,
    },
  });
 }
@@ -349,7 +349,7 @@ export const ChatSettingsScreen: React.FC = () => {
  const renderFontSizeSlider = () => (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>消息字号</Text>
-      <View style={styles.card}>
+      <View style={styles.sliderContainer}>
        <Slider
          value={fontSize}
          min={12}
@@ -399,7 +399,7 @@ export const ChatSettingsScreen: React.FC = () => {
  const renderRadiusSlider = () => (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>消息圆角</Text>
-      <View style={styles.card}>
+      <View style={styles.sliderContainer}>
        <Slider
          value={messageRadius}
          min={0}
@@ -414,53 +414,49 @@ export const ChatSettingsScreen: React.FC = () => {
  const renderOtherSettings = () => (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>其他</Text>
-      <View style={styles.card}>
-        <TouchableOpacity style={styles.settingItem}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="image-outline" size={20} color={colors.primary.main} />
-            </View>
-            <View>
-              <Text style={styles.settingTitle}>更改聊天壁纸</Text>
-            </View>
+      <TouchableOpacity style={styles.settingItem}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="image-outline" size={22} color={colors.text.secondary} />
          </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-        </TouchableOpacity>
-        
-        <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="palette-outline" size={20} color={colors.primary.main} />
-            </View>
-            <View>
-              <Text style={styles.settingTitle}>更改名称颜色</Text>
-              <Text style={styles.settingSubtitle}>MiMQy</Text>
-            </View>
+          <View>
+            <Text style={styles.settingTitle}>更改聊天壁纸</Text>
          </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-        </TouchableOpacity>
-      </View>
+        </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+      </TouchableOpacity>
+      
+      <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="palette-outline" size={22} color={colors.text.secondary} />
+          </View>
+          <View>
+            <Text style={styles.settingTitle}>更改名称颜色</Text>
+            <Text style={styles.settingSubtitle}>MiMQy</Text>
+          </View>
+        </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+      </TouchableOpacity>
    </View>
  );

  // 渲染夜间模式开关
  const renderNightMode = () => (
    <View style={styles.section}>
-      <View style={styles.card}>
-        <View style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="weather-night" size={20} color={colors.primary.main} />
-            </View>
-            <Text style={styles.settingTitle}>切换到夜间模式</Text>
+      <View style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="weather-night" size={22} color={colors.text.secondary} />
          </View>
-          <TouchableOpacity 
-            style={[styles.switch, nightMode && styles.switchActive]}
-            onPress={() => toggleNightMode()}
-          >
-            <View style={[styles.switchThumb, { alignSelf: nightMode ? 'flex-end' : 'flex-start' }]} />
-          </TouchableOpacity>
+          <Text style={styles.settingTitle}>切换到夜间模式</Text>
        </View>
+        <TouchableOpacity 
+          style={[styles.switch, nightMode && styles.switchActive]}
+          onPress={() => toggleNightMode()}
+        >
+          <View style={[styles.switchThumb, { alignSelf: nightMode ? 'flex-end' : 'flex-start' }]} />
+        </TouchableOpacity>
      </View>
    </View>
  );
@@ -468,16 +464,14 @@ export const ChatSettingsScreen: React.FC = () => {
  // 渲染浏览其他主题
  const renderBrowseThemes = () => (
    <View style={styles.section}>
-      <TouchableOpacity style={styles.card}>
-        <View style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="apps" size={20} color={colors.primary.main} />
-            </View>
-            <Text style={styles.settingTitle}>浏览其他主题</Text>
+      <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="apps" size={22} color={colors.text.secondary} />
          </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+          <Text style={styles.settingTitle}>浏览其他主题</Text>
        </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
      </TouchableOpacity>
    </View>
  );
--- a/src/screens/profile/EditProfileScreen.tsx
+++ b/src/screens/profile/EditProfileScreen.tsx
@@ -42,7 +42,7 @@ function createEditProfileStyles(colors: AppColors) {
  return StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background.default,
+    backgroundColor: colors.background.paper,
  },
  keyboardView: {
    flex: 1,
@@ -58,7 +58,7 @@ function createEditProfileStyles(colors: AppColors) {
  coverContainer: {
    position: 'relative',
    overflow: 'hidden',
-    borderRadius: borderRadius.lg,
+    borderRadius: 14,
  },
  coverTouchable: {
    width: '100%',
@@ -112,7 +112,6 @@ function createEditProfileStyles(colors: AppColors) {
    marginTop: -50,
    borderRadius: borderRadius.xl,
    padding: spacing.lg,
-    ...shadows.md,
  },
  avatarWrapper: {
    alignItems: 'center',
@@ -204,15 +203,9 @@ function createEditProfileStyles(colors: AppColors) {

  // ===== 表单区域 =====
  formCard: {
-    backgroundColor: colors.background.paper,
-    borderRadius: borderRadius.lg,
+    borderRadius: 14,
    padding: spacing.lg,
    marginBottom: spacing.lg,
-    shadowColor: colors.text.primary,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    elevation: 2,
    maxWidth: CONTENT_MAX_WIDTH,
    alignSelf: 'center',
    width: '100%',
@@ -228,7 +221,7 @@ function createEditProfileStyles(colors: AppColors) {
    width: 40,
    height: 40,
    borderRadius: borderRadius.md,
-    backgroundColor: colors.primary.light + '20',
+    backgroundColor: colors.background.default,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.md,
@@ -267,14 +260,11 @@ function createEditProfileStyles(colors: AppColors) {
    marginTop: spacing.sm,
  },
  saveButton: {
+    height: 50,
    backgroundColor: colors.primary.main,
-    borderRadius: borderRadius.lg,
-    paddingVertical: spacing.md,
-    shadowColor: colors.primary.main,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 4,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  saveButtonDisabled: {
    opacity: 0.6,
--- a/src/screens/profile/NotificationSettingsScreen.tsx
+++ b/src/screens/profile/NotificationSettingsScreen.tsx
@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { Text } from '../../components/common';
 import {
  loadNotificationPreferences,
@@ -122,43 +122,39 @@ export const NotificationSettingsScreen: React.FC = () => {
      {/* 消息通知设置 */}
      <View style={styles.section}>
        <View style={styles.sectionHeader}>
-          <MaterialCommunityIcons name="message-text-outline" size={18} color={colors.primary.main} />
-          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
+          <Text variant="caption" style={styles.sectionTitle}>
            消息通知
          </Text>
        </View>
-        <View style={styles.card}>
-          {settings.map((item, index) => (
-            <View key={item.key}>
-              <View style={styles.settingItem}>
-                <View style={styles.iconContainer}>
-                  <MaterialCommunityIcons
-                    name={item.icon as any}
-                    size={20}
-                    color={colors.primary.main}
-                  />
-                </View>
-                <View style={styles.settingContent}>
-                  <Text variant="body" color={colors.text.primary}>
-                    {item.title}
-                  </Text>
-                  {item.subtitle && (
-                    <Text variant="caption" color={colors.text.secondary} style={styles.subtitle}>
-                      {item.subtitle}
-                    </Text>
-                  )}
-                </View>
-                <Switch
-                  value={item.value}
-                  onValueChange={item.onValueChange}
-                  trackColor={{ false: colors.divider, true: colors.primary.main }}
-                  thumbColor={colors.background.paper}
+        {settings.map((item, index) => (
+          <View key={item.key}>
+            <View style={styles.settingItem}>
+              <View style={styles.iconContainer}>
+                <MaterialCommunityIcons
+                  name={item.icon as any}
+                  size={22}
+                  color={colors.text.secondary}
                />
              </View>
-              {index < settings.length - 1 && <View style={styles.divider} />}
+              <View style={styles.settingContent}>
+                <Text variant="body" color={colors.text.primary}>
+                  {item.title}
+                </Text>
+                {item.subtitle && (
+                  <Text variant="caption" color={colors.text.secondary} style={styles.subtitle}>
+                    {item.subtitle}
+                  </Text>
+                )}
+              </View>
+              <Switch
+                value={item.value}
+                onValueChange={item.onValueChange}
+                trackColor={{ false: colors.divider, true: colors.primary.main }}
+                thumbColor={colors.background.paper}
+              />
            </View>
-          ))}
-        </View>
+          </View>
+        ))}
      </View>

      {/* 提示信息 */}
@@ -186,47 +182,40 @@ function createNotificationSettingsStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
    },
    scrollContent: {
-      paddingVertical: spacing.md,
+      paddingVertical: spacing.lg,
    },
    section: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing['2xl'],
    },
    sectionHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: spacing['2xl'],
      marginBottom: spacing.sm,
-      gap: spacing.xs,
+      marginTop: spacing.sm,
    },
    sectionTitle: {
      fontWeight: '600',
-    },
-    card: {
-      backgroundColor: colors.background.paper,
-      marginHorizontal: spacing.lg,
-      borderRadius: borderRadius.lg,
-      overflow: 'hidden',
-      maxWidth: CONTENT_MAX_WIDTH,
-      alignSelf: 'center',
-      width: '100%',
+      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
    },
    settingItem: {
      flexDirection: 'row',
      alignItems: 'center',
-      paddingVertical: spacing.md,
-      paddingHorizontal: spacing.md,
+      paddingVertical: 16,
+      paddingHorizontal: spacing['2xl'],
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.divider,
    },
    iconContainer: {
-      width: 36,
-      height: 36,
-      borderRadius: borderRadius.md,
-      backgroundColor: colors.primary.light + '20',
+      width: 24,
+      height: 24,
      justifyContent: 'center',
      alignItems: 'center',
-      marginRight: spacing.md,
+      marginRight: spacing.lg,
    },
    settingContent: {
      flex: 1,
@@ -234,18 +223,14 @@ function createNotificationSettingsStyles(colors: AppColors) {
    subtitle: {
      marginTop: 2,
    },
-    divider: {
-      height: 1,
-      backgroundColor: colors.divider,
-      marginLeft: 36 + spacing.md + spacing.md,
-    },
+    divider: {},
    tipContainer: {
      flexDirection: 'row',
      alignItems: 'flex-start',
-      marginHorizontal: spacing.lg,
+      marginHorizontal: spacing['2xl'],
      padding: spacing.md,
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      backgroundColor: colors.background.default,
+      borderRadius: 14,
      gap: spacing.sm,
    },
    tipText: {
--- a/src/screens/profile/SettingsScreen.tsx
+++ b/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>