feat(CommentItem, PostDetailScreen, ReportDialog): integrate report functionality

- Added report button to CommentItem for reporting comments and replies. - Integrated ReportDialog into PostDetailScreen for handling report submissions. - Enhanced ReportDialog with detailed report reasons and improved UI interactions. - Updated styles across various components for a more modern look and feel. Made-with: Cursor
2026-03-30 17:53:30 +08:00
parent e0ee29caf8
commit 774b5c4b47
14 changed files with 793 additions and 373 deletions
--- a/src/screens/message/CreateGroupScreen.tsx
+++ b/src/screens/message/CreateGroupScreen.tsx
@@ -322,10 +322,10 @@ function createCreateGroupStyles(colors: AppColors) {
      flex: 1,
    },
    scrollContent: {
-      padding: spacing.lg,
-      paddingBottom: spacing.xl,
+      padding: spacing.md,
+      paddingBottom: spacing.xl * 2,
    },
-    // 头部区域样式
+    // 头部区域样式 - 扁平化
    headerSection: {
      flexDirection: 'row',
      alignItems: 'flex-start',
@@ -341,12 +341,17 @@ function createCreateGroupStyles(colors: AppColors) {
      width: 80,
      height: 80,
      borderRadius: 40,
+      borderWidth: 3,
+      borderColor: colors.primary.light + '40',
    },
    avatarPlaceholder: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors.background.default,
      borderRadius: 40,
+      borderWidth: 2,
+      borderColor: colors.divider,
+      borderStyle: 'dashed',
    },
    avatarBadge: {
      position: 'absolute',
@@ -358,7 +363,7 @@ function createCreateGroupStyles(colors: AppColors) {
      borderRadius: 14,
      justifyContent: 'center',
      alignItems: 'center',
-      borderWidth: 2,
+      borderWidth: 3,
      borderColor: colors.background.paper,
    },
    nameInputContainer: {
@@ -367,7 +372,9 @@ function createCreateGroupStyles(colors: AppColors) {
    },
    inputLabel: {
      marginBottom: spacing.sm,
-      fontWeight: '600',
+      fontWeight: '700',
+      fontSize: fontSizes.sm + 1,
+      letterSpacing: 0.3,
    },
    nameInput: {
      backgroundColor: colors.background.paper,
@@ -376,12 +383,15 @@ function createCreateGroupStyles(colors: AppColors) {
      paddingVertical: spacing.md,
      fontSize: fontSizes.lg,
      color: colors.text.primary,
-      borderWidth: 1,
-      borderColor: colors.divider,
+      borderWidth: 1.5,
+      borderColor: colors.divider + '80',
+      fontWeight: '600',
    },
    charCount: {
      textAlign: 'right',
      marginTop: spacing.xs,
+      fontWeight: '500',
+      fontSize: fontSizes.sm,
    },
    // 区域样式
    section: {
@@ -391,18 +401,20 @@ function createCreateGroupStyles(colors: AppColors) {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
-      marginBottom: spacing.sm,
+      marginBottom: spacing.md,
    },
    sectionTitle: {
-      fontWeight: '600',
+      fontWeight: '800',
+      fontSize: fontSizes.md + 1,
      marginBottom: spacing.sm,
+      letterSpacing: 0.3,
    },
-    // 文本域样式
+    // 文本域样式 - 更现代
    textAreaContainer: {
      backgroundColor: colors.background.paper,
      borderRadius: borderRadius.lg,
-      borderWidth: 1,
-      borderColor: colors.divider,
+      borderWidth: 1.5,
+      borderColor: colors.divider + '80',
      padding: spacing.md,
    },
    textArea: {
@@ -414,6 +426,8 @@ function createCreateGroupStyles(colors: AppColors) {
    textAreaCharCount: {
      textAlign: 'right',
      marginTop: spacing.sm,
+      fontWeight: '500',
+      fontSize: fontSizes.sm,
    },
    // 已选成员样式
    selectedMembersList: {
@@ -443,8 +457,10 @@ function createCreateGroupStyles(colors: AppColors) {
      marginTop: spacing.xs,
      textAlign: 'center',
      width: '100%',
+      fontWeight: '600',
+      fontSize: fontSizes.sm,
    },
-    // 邀请按钮样式
+    // 邀请按钮样式 - 扁平化
    inviteButton: {
      flexDirection: 'row',
      alignItems: 'center',
@@ -452,13 +468,14 @@ function createCreateGroupStyles(colors: AppColors) {
      borderRadius: borderRadius.lg,
      padding: spacing.md,
      marginBottom: spacing.xl,
-      ...shadows.sm,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    inviteIconContainer: {
      width: 48,
      height: 48,
      borderRadius: borderRadius.lg,
-      backgroundColor: colors.primary.light + '20',
+      backgroundColor: colors.primary.light + '15',
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: spacing.md,
@@ -467,16 +484,18 @@ function createCreateGroupStyles(colors: AppColors) {
      flex: 1,
    },
    inviteTitle: {
-      fontWeight: '600',
+      fontWeight: '700',
+      fontSize: fontSizes.md + 1,
      marginBottom: 2,
+      letterSpacing: 0.3,
    },
    // 底部按钮样式
    footer: {
      padding: spacing.lg,
      paddingBottom: spacing.xl,
      backgroundColor: colors.background.paper,
-      borderTopWidth: 1,
-      borderTopColor: colors.divider,
+      borderTopWidth: 0.5,
+      borderTopColor: colors.divider + '60',
    },
  });
 }
--- a/src/screens/message/GroupInfoScreen.tsx
+++ b/src/screens/message/GroupInfoScreen.tsx
@@ -1091,13 +1091,15 @@ function createGroupInfoStyles(colors: AppColors) {
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
+    paddingVertical: spacing.md,
    backgroundColor: colors.background.paper,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '60',
  },
  pageTitle: {
-    fontWeight: '600',
+    fontWeight: '700',
+    fontSize: fontSizes.xl,
+    letterSpacing: 0.5,
  },
  pageHeaderPlaceholder: {
    width: 40,
@@ -1107,8 +1109,8 @@ function createGroupInfoStyles(colors: AppColors) {
    flex: 1,
  },
  scrollContent: {
-    padding: spacing.lg,
-    paddingBottom: spacing.xl,
+    padding: spacing.md,
+    paddingBottom: spacing.xl * 2,
  },
  errorContainer: {
    flex: 1,
@@ -1116,13 +1118,14 @@ function createGroupInfoStyles(colors: AppColors) {
    alignItems: 'center',
  },

-  // 头部卡片样式
+  // 头部卡片样式 - 扁平化设计
  headerCard: {
    backgroundColor: colors.background.paper,
    borderRadius: borderRadius.xl,
    padding: spacing.lg,
-    marginBottom: spacing.lg,
-    ...shadows.sm,
+    marginBottom: spacing.md,
+    borderWidth: 0.5,
+    borderColor: colors.divider + '40',
  },
  groupHeader: {
    flexDirection: 'row',
@@ -1134,30 +1137,33 @@ function createGroupInfoStyles(colors: AppColors) {
    flex: 1,
  },
  groupName: {
-    fontWeight: '700',
+    fontWeight: '800',
+    fontSize: fontSizes.xl + 2,
    marginBottom: spacing.xs,
+    letterSpacing: 0.3,
  },
  groupMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
+    marginBottom: spacing.xs,
  },
  groupNoRow: {
-    marginTop: spacing.xs,
    flexDirection: 'row',
    alignItems: 'center',
-    justifyContent: 'space-between',
+    gap: spacing.sm,
  },
  copyGroupNoBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.sm,
    paddingVertical: 4,
-    borderRadius: borderRadius.sm,
-    backgroundColor: colors.primary.light + '20',
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.primary.light + '15',
  },
  copyGroupNoBtnText: {
    marginLeft: 4,
+    fontWeight: '500',
  },
  descriptionContainer: {
    flexDirection: 'row',
@@ -1165,20 +1171,24 @@ function createGroupInfoStyles(colors: AppColors) {
    backgroundColor: colors.background.default,
    borderRadius: borderRadius.lg,
    padding: spacing.md,
+    borderWidth: 0.5,
+    borderColor: colors.divider + '30',
  },
  groupDesc: {
    marginLeft: spacing.sm,
    flex: 1,
-    lineHeight: 20,
+    lineHeight: 22,
+    fontWeight: '400',
  },

-  // 通用卡片样式
+  // 通用卡片样式 - 扁平化
  card: {
    backgroundColor: colors.background.paper,
    borderRadius: borderRadius.xl,
    padding: spacing.lg,
-    marginBottom: spacing.lg,
-    ...shadows.sm,
+    marginBottom: spacing.md,
+    borderWidth: 0.5,
+    borderColor: colors.divider + '40',
  },
  cardHeader: {
    flexDirection: 'row',
@@ -1189,33 +1199,41 @@ function createGroupInfoStyles(colors: AppColors) {
    width: 36,
    height: 36,
    borderRadius: borderRadius.md,
-    backgroundColor: colors.info.light + '20',
+    backgroundColor: colors.info.light + '15',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.sm,
  },
  cardTitle: {
-    fontWeight: '600',
+    fontWeight: '700',
+    fontSize: fontSizes.md + 1,
    flex: 1,
+    letterSpacing: 0.3,
  },

-  // 公告样式
+  // 公告样式 - 更现代的卡片
  announcementContent: {
-    backgroundColor: colors.background.default,
+    backgroundColor: colors.warning.light + '08',
    borderRadius: borderRadius.lg,
    padding: spacing.md,
+    borderLeftWidth: 3,
+    borderLeftColor: colors.warning.main,
  },
  announcementText: {
    lineHeight: 22,
    marginBottom: spacing.sm,
+    fontWeight: '400',
  },
  announcementTime: {
    textAlign: 'right',
+    fontWeight: '500',
  },

  // 成员预览样式
  memberCount: {
    marginRight: spacing.xs,
+    fontWeight: '600',
+    color: colors.text.secondary,
  },
  memberPreview: {
    flexDirection: 'row',
@@ -1226,7 +1244,7 @@ function createGroupInfoStyles(colors: AppColors) {
  },
  memberAvatar: {
    position: 'relative',
-    marginLeft: -10,
+    marginLeft: -8,
  },
  memberAvatarFirst: {
    marginLeft: 0,
@@ -1239,12 +1257,12 @@ function createGroupInfoStyles(colors: AppColors) {
    borderRadius: borderRadius.sm,
    paddingHorizontal: 4,
    paddingVertical: 1,
-    borderWidth: 1.5,
+    borderWidth: 2,
    borderColor: colors.background.paper,
  },
  ownerBadgeText: {
    fontSize: 8,
-    fontWeight: '700',
+    fontWeight: '800',
  },
  moreMembers: {
    minWidth: 44,
@@ -1254,49 +1272,55 @@ function createGroupInfoStyles(colors: AppColors) {
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
-    borderColor: colors.divider,
-    marginLeft: -10,
+    borderColor: colors.divider + '60',
+    marginLeft: -8,
    paddingHorizontal: spacing.xs,
  },
  moreMembersText: {
-    fontWeight: '600',
+    fontWeight: '700',
    includeFontPadding: false,
+    fontSize: fontSizes.sm,
  },

-  // 邀请按钮样式
+  // 邀请按钮样式 - 更加醒目
  inviteButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.md,
    borderRadius: borderRadius.lg,
-    backgroundColor: colors.primary.light + '15',
-    borderWidth: 1,
-    borderColor: colors.primary.light,
+    backgroundColor: colors.primary.light + '10',
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '60',
    borderStyle: 'dashed',
  },
  inviteIconContainer: {
    width: 32,
    height: 32,
    borderRadius: 16,
-    backgroundColor: colors.background.paper,
+    backgroundColor: colors.primary.light + '20',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.sm,
  },
  inviteButtonText: {
-    fontWeight: '600',
+    fontWeight: '700',
    marginRight: spacing.xs,
+    letterSpacing: 0.3,
  },

-  // 设置项样式
+  // 设置项样式 - 更加扁平
  settingsList: {
    marginTop: spacing.sm,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
-    paddingVertical: spacing.sm,
+    paddingVertical: spacing.md,
+    borderRadius: borderRadius.md,
+    paddingHorizontal: spacing.sm,
+    marginLeft: -spacing.sm,
+    marginRight: -spacing.sm,
  },
  settingIconContainer: {
    width: 40,
@@ -1308,24 +1332,29 @@ function createGroupInfoStyles(colors: AppColors) {
    marginRight: spacing.md,
  },
  settingIconDanger: {
-    backgroundColor: colors.error.light + '20',
+    backgroundColor: colors.error.light + '15',
  },
  settingContent: {
    flex: 1,
  },
  dangerText: {
    color: colors.error.main,
+    fontWeight: '600',
  },
  settingDivider: {
    marginLeft: 56,
    width: 'auto',
    marginVertical: spacing.xs,
+    opacity: 0.5,
  },

-  // 危险操作卡片
+  // 危险操作卡片 - 更加醒目
  dangerCard: {
    padding: 0,
    overflow: 'hidden',
+    borderTopWidth: 1,
+    borderTopColor: colors.error.light + '30',
+    marginTop: spacing.sm,
  },
  dangerButton: {
    flexDirection: 'row',
@@ -1333,15 +1362,17 @@ function createGroupInfoStyles(colors: AppColors) {
    justifyContent: 'center',
    paddingVertical: spacing.lg,
    gap: spacing.sm,
+    backgroundColor: colors.error.light + '08',
  },
  dangerButtonText: {
-    fontWeight: '600',
+    fontWeight: '700',
+    letterSpacing: 0.3,
  },

-  // 模态框样式
+  // 模态框样式 - 更现代
  modalOverlay: {
    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
    justifyContent: 'flex-end',
  },
  modalContent: {
@@ -1350,7 +1381,7 @@ function createGroupInfoStyles(colors: AppColors) {
    borderTopRightRadius: borderRadius['2xl'],
    height: '80%',
    paddingHorizontal: spacing.lg,
-    paddingTop: spacing.lg,
+    paddingTop: spacing.md,
    paddingBottom: spacing.xl,
  },
  modalHeader: {
@@ -1358,24 +1389,29 @@ function createGroupInfoStyles(colors: AppColors) {
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: spacing.lg,
+    paddingBottom: spacing.md,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '60',
  },
  modalHeaderButton: {
    paddingVertical: spacing.sm,
    minWidth: 60,
  },
  modalTitle: {
-    fontWeight: '700',
-    fontSize: fontSizes.xl,
+    fontWeight: '800',
+    fontSize: fontSizes.xl + 1,
+    letterSpacing: 0.5,
  },
  saveButton: {
-    fontWeight: '600',
+    fontWeight: '700',
+    letterSpacing: 0.3,
  },
  confirmButton: {
-    fontWeight: '600',
+    fontWeight: '700',
    textAlign: 'right',
  },

-  // 编辑表单样式
+  // 编辑表单样式 - 更现代
  editForm: {
    alignItems: 'center',
  },
@@ -1387,12 +1423,17 @@ function createGroupInfoStyles(colors: AppColors) {
    width: 90,
    height: 90,
    borderRadius: 45,
+    borderWidth: 3,
+    borderColor: colors.primary.light + '40',
  },
  editAvatarPlaceholder: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.background.default,
    borderRadius: 45,
+    borderWidth: 2,
+    borderColor: colors.divider,
+    borderStyle: 'dashed',
  },
  editAvatarButton: {
    position: 'absolute',
@@ -1413,7 +1454,9 @@ function createGroupInfoStyles(colors: AppColors) {
  },
  editLabel: {
    marginBottom: spacing.sm,
-    fontWeight: '600',
+    fontWeight: '700',
+    fontSize: fontSizes.sm + 1,
+    letterSpacing: 0.3,
  },
  editInput: {
    backgroundColor: colors.background.default,
@@ -1422,8 +1465,9 @@ function createGroupInfoStyles(colors: AppColors) {
    paddingVertical: spacing.md,
    fontSize: fontSizes.md,
    color: colors.text.primary,
-    borderWidth: 1,
-    borderColor: colors.divider,
+    borderWidth: 1.5,
+    borderColor: colors.divider + '80',
+    fontWeight: '400',
  },
  editTextArea: {
    minHeight: 100,
@@ -1433,6 +1477,7 @@ function createGroupInfoStyles(colors: AppColors) {
  editCharCount: {
    textAlign: 'right',
    marginTop: spacing.xs,
+    fontWeight: '500',
  },

  // 公告表单样式
@@ -1446,17 +1491,18 @@ function createGroupInfoStyles(colors: AppColors) {
    padding: spacing.md,
    fontSize: fontSizes.md,
    color: colors.text.primary,
-    borderWidth: 1,
-    borderColor: colors.divider,
+    borderWidth: 1.5,
+    borderColor: colors.divider + '80',
    lineHeight: 22,
    textAlignVertical: 'top',
  },
  announcementCharCount: {
    textAlign: 'right',
    marginTop: spacing.sm,
+    fontWeight: '500',
  },

-  // 加群方式样式
+  // 加群方式样式 - 更现代的选中状态
  joinTypeList: {
    gap: spacing.md,
  },
@@ -1465,36 +1511,39 @@ function createGroupInfoStyles(colors: AppColors) {
    alignItems: 'center',
    padding: spacing.md,
    borderRadius: borderRadius.lg,
-    borderWidth: 1,
-    borderColor: colors.divider,
+    borderWidth: 1.5,
+    borderColor: colors.divider + '80',
+    backgroundColor: colors.background.default,
  },
  joinTypeItemSelected: {
    borderColor: colors.primary.main,
-    backgroundColor: colors.primary.light + '10',
+    backgroundColor: colors.primary.light + '12',
+    borderWidth: 2,
  },
  joinTypeIcon: {
    width: 48,
    height: 48,
    borderRadius: borderRadius.lg,
-    backgroundColor: colors.background.default,
+    backgroundColor: colors.background.paper,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.md,
  },
  joinTypeIconSelected: {
-    backgroundColor: colors.primary.light + '20',
+    backgroundColor: colors.primary.light + '25',
  },
  joinTypeInfo: {
    flex: 1,
  },
  joinTypeTextSelected: {
-    fontWeight: '600',
+    fontWeight: '700',
    color: colors.primary.main,
  },

  // 转让群主样式
  transferDesc: {
    marginBottom: spacing.md,
+    fontWeight: '500',
  },
  transferList: {
    flex: 1,
@@ -1504,11 +1553,15 @@ function createGroupInfoStyles(colors: AppColors) {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.md,
    borderRadius: borderRadius.lg,
-    marginBottom: spacing.xs,
+    marginBottom: spacing.sm,
+    backgroundColor: colors.background.default,
  },
  transferItemSelected: {
-    backgroundColor: colors.primary.light + '15',
+    backgroundColor: colors.primary.light + '12',
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '60',
  },
  transferItemInfo: {
    flex: 1,
@@ -1530,6 +1583,7 @@ function createGroupInfoStyles(colors: AppColors) {
    borderColor: colors.divider,
    justifyContent: 'center',
    alignItems: 'center',
+    backgroundColor: colors.background.paper,
  },
  transferRadioSelected: {
    backgroundColor: colors.primary.main,
@@ -1546,6 +1600,8 @@ function createGroupInfoStyles(colors: AppColors) {
    borderRadius: borderRadius.lg,
    padding: spacing.xs,
    marginBottom: spacing.md,
+    borderWidth: 1,
+    borderColor: colors.divider + '60',
  },
  tab: {
    flex: 1,
@@ -1555,10 +1611,11 @@ function createGroupInfoStyles(colors: AppColors) {
  },
  tabActive: {
    backgroundColor: colors.background.paper,
-    ...shadows.sm,
+    borderWidth: 1,
+    borderColor: colors.divider + '60',
  },
  tabTextActive: {
-    fontWeight: '600',
+    fontWeight: '700',
  },
  selectedBadge: {
    backgroundColor: colors.primary.light + '20',
@@ -1577,10 +1634,13 @@ function createGroupInfoStyles(colors: AppColors) {
    paddingVertical: spacing.md,
    paddingHorizontal: spacing.sm,
    borderRadius: borderRadius.lg,
-    marginBottom: spacing.xs,
+    marginBottom: spacing.sm,
+    backgroundColor: colors.background.default,
  },
  friendItemSelected: {
-    backgroundColor: colors.primary.light + '15',
+    backgroundColor: colors.primary.light + '12',
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '60',
  },
  friendInfo: {
    flex: 1,
@@ -1588,7 +1648,7 @@ function createGroupInfoStyles(colors: AppColors) {
    marginRight: spacing.sm,
  },
  nickname: {
-    fontWeight: '500',
+    fontWeight: '600',
    marginBottom: 2,
  },
  checkbox: {
@@ -1599,6 +1659,7 @@ function createGroupInfoStyles(colors: AppColors) {
    borderColor: colors.divider,
    justifyContent: 'center',
    alignItems: 'center',
+    backgroundColor: colors.background.paper,
  },
  checkboxSelected: {
    backgroundColor: colors.primary.main,
--- a/src/screens/message/GroupInviteDetailScreen.tsx
+++ b/src/screens/message/GroupInviteDetailScreen.tsx
@@ -3,7 +3,7 @@ import { View, StyleSheet, ActivityIndicator, Alert, ScrollView, TouchableOpacit
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import { Avatar, Text } from '../../components/common';
 import { routePayloadCache } from '../../stores/routePayloadCache';
 import { groupService } from '../../services/groupService';
@@ -196,14 +196,15 @@ function createGroupInviteDetailStyles(colors: AppColors) {
      flex: 1,
    },
    scrollContent: {
-      padding: spacing.lg,
-      paddingBottom: spacing.xl,
+      padding: spacing.md,
+      paddingBottom: spacing.xl * 2,
    },
    card: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.xl,
      padding: spacing.lg,
-      ...shadows.sm,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    cardHeader: {
      flexDirection: 'row',
@@ -211,20 +212,23 @@ function createGroupInviteDetailStyles(colors: AppColors) {
      marginBottom: spacing.md,
    },
    cardIconContainer: {
-      width: 30,
-      height: 30,
-      borderRadius: 15,
-      backgroundColor: colors.info.light + '30',
+      width: 36,
+      height: 36,
+      borderRadius: borderRadius.md,
+      backgroundColor: colors.info.light + '15',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: spacing.sm,
    },
    cardTitle: {
-      fontWeight: '600',
+      fontWeight: '700',
+      fontSize: fontSizes.md + 1,
      flex: 1,
+      letterSpacing: 0.3,
    },
    memberCount: {
      marginRight: spacing.xs,
+      fontWeight: '600',
    },
    loadingWrap: {
      paddingVertical: spacing.md,
@@ -247,13 +251,15 @@ function createGroupInviteDetailStyles(colors: AppColors) {
      bottom: -2,
      right: -2,
      backgroundColor: colors.warning.main,
-      borderRadius: 8,
+      borderRadius: borderRadius.sm,
      paddingHorizontal: 4,
      paddingVertical: 1,
+      borderWidth: 1.5,
+      borderColor: colors.background.paper,
    },
    ownerBadgeText: {
-      fontSize: 10,
-      fontWeight: '700',
+      fontSize: 8,
+      fontWeight: '800',
    },
  });
 }
--- a/src/screens/message/GroupMembersScreen.tsx
+++ b/src/screens/message/GroupMembersScreen.tsx
@@ -664,19 +664,21 @@ function createGroupMembersStyles(colors: AppColors) {
      flex: 1,
      backgroundColor: colors.background.default,
    },
-    // Header 样式
+    // Header 样式 - 扁平化
    pageHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
+      paddingVertical: spacing.md,
      backgroundColor: colors.background.paper,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.divider,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '60',
    },
    pageTitle: {
-      fontWeight: '600',
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
+      letterSpacing: 0.5,
    },
    pageHeaderPlaceholder: {
      width: 40,
@@ -688,18 +690,20 @@ function createGroupMembersStyles(colors: AppColors) {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.md,
      backgroundColor: colors.background.default,
+      borderTopWidth: 0.5,
+      borderTopColor: colors.divider + '40',
    },
    memberItem: {
      flexDirection: 'row',
      alignItems: 'center',
-      paddingHorizontal: spacing.md,
+      paddingHorizontal: spacing.lg,
      paddingVertical: spacing.md,
      backgroundColor: colors.background.paper,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.divider,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '40',
    },
    memberInfo: {
      flex: 1,
@@ -711,63 +715,81 @@ function createGroupMembersStyles(colors: AppColors) {
      marginBottom: 2,
    },
    memberName: {
-      fontWeight: '500',
+      fontWeight: '700',
+      fontSize: fontSizes.md + 1,
+      letterSpacing: 0.3,
    },
    roleBadge: {
-      paddingHorizontal: spacing.xs,
+      paddingHorizontal: spacing.sm,
      paddingVertical: 2,
      borderRadius: borderRadius.sm,
      marginLeft: spacing.sm,
+      fontWeight: '800',
+      fontSize: fontSizes.xs,
+      color: colors.background.paper,
    },
    mutedBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 2,
    },
-    // 模态框样式
+    // 模态框样式 - 更现代
    modalOverlay: {
      flex: 1,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      backgroundColor: 'rgba(0, 0, 0, 0.45)',
      justifyContent: 'flex-end',
    },
    modalContent: {
      backgroundColor: colors.background.paper,
-      borderTopLeftRadius: borderRadius.lg,
-      borderTopRightRadius: borderRadius.lg,
+      borderTopLeftRadius: borderRadius['2xl'],
+      borderTopRightRadius: borderRadius['2xl'],
      padding: spacing.lg,
      maxHeight: '80%',
    },
    modalHeader: {
      alignItems: 'center',
-      marginBottom: spacing.md,
+      marginBottom: spacing.lg,
+      paddingBottom: spacing.md,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '60',
    },
    modalTitle: {
-      fontWeight: '700',
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
      marginTop: spacing.sm,
      marginBottom: spacing.xs,
+      letterSpacing: 0.5,
    },
    actionItem: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: spacing.md,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.divider,
+      paddingHorizontal: spacing.sm,
+      marginLeft: -spacing.sm,
+      marginRight: -spacing.sm,
+      borderRadius: borderRadius.md,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.divider + '40',
    },
    actionText: {
      marginLeft: spacing.md,
+      fontWeight: '600',
+      fontSize: fontSizes.md,
    },
    inputLabel: {
      marginBottom: spacing.xs,
+      fontWeight: '700',
+      fontSize: fontSizes.sm + 1,
    },
    input: {
      backgroundColor: colors.background.default,
-      borderRadius: borderRadius.md,
+      borderRadius: borderRadius.lg,
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.md,
      fontSize: fontSizes.md,
      color: colors.text.primary,
-      borderWidth: 1,
-      borderColor: colors.divider,
+      borderWidth: 1.5,
+      borderColor: colors.divider + '80',
      marginBottom: spacing.md,
    },
    modalButtons: {
@@ -791,6 +813,8 @@ function createGroupMembersStyles(colors: AppColors) {
    noMoreText: {
      textAlign: 'center',
      paddingVertical: spacing.md,
+      fontWeight: '500',
+      color: colors.text.hint,
    },
  });
 }
--- a/src/screens/message/JoinGroupScreen.tsx
+++ b/src/screens/message/JoinGroupScreen.tsx
@@ -13,7 +13,7 @@ import {
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';

-import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../theme';
 import Avatar from '../../components/common/Avatar';
 import Text from '../../components/common/Text';
 import { groupService } from '../../services/groupService';
@@ -27,47 +27,58 @@ function createJoinGroupStyles(colors: AppColors) {
    container: {
      flex: 1,
      backgroundColor: colors.background.default,
-      padding: spacing.lg,
+      padding: spacing.md,
    },
    heroCard: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.xl,
      padding: spacing.lg,
-      marginBottom: spacing.lg,
+      marginBottom: spacing.md,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    heroIconWrap: {
      width: 48,
      height: 48,
      borderRadius: 24,
-      backgroundColor: colors.primary.light + '26',
+      backgroundColor: colors.primary.light + '15',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: spacing.md,
    },
    heroTitle: {
      marginBottom: spacing.xs,
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
+      letterSpacing: 0.3,
    },
    tip: {
-      lineHeight: 20,
+      lineHeight: 22,
+      fontWeight: '400',
    },
    formCard: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.xl,
      padding: spacing.lg,
      flex: 1,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    label: {
      marginBottom: spacing.xs,
+      fontWeight: '700',
+      fontSize: fontSizes.sm + 1,
    },
    input: {
      flex: 1,
-      borderWidth: 1,
-      borderColor: colors.divider,
-      borderRadius: borderRadius.md,
-      backgroundColor: colors.background.paper,
+      borderWidth: 1.5,
+      borderColor: colors.divider + '80',
+      borderRadius: borderRadius.lg,
+      backgroundColor: colors.background.default,
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.md,
      color: colors.text.primary,
+      fontSize: fontSizes.md,
    },
    searchRow: {
      flexDirection: 'row',
@@ -77,26 +88,28 @@ function createJoinGroupStyles(colors: AppColors) {
    searchBtn: {
      width: 46,
      height: 46,
-      borderRadius: borderRadius.md,
+      borderRadius: borderRadius.lg,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: spacing.sm,
    },
    searchResultSection: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing.md,
    },
    sectionTitle: {
      marginBottom: spacing.sm,
-      fontWeight: '600',
+      fontWeight: '800',
+      fontSize: fontSizes.md + 1,
+      letterSpacing: 0.3,
    },
    listSection: {
      flex: 1,
    },
    groupCard: {
-      borderWidth: 1,
-      borderColor: colors.divider,
-      borderRadius: borderRadius.md,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
+      borderRadius: borderRadius.lg,
      padding: spacing.md,
      backgroundColor: colors.background.default,
      marginBottom: spacing.md,
@@ -111,11 +124,14 @@ function createJoinGroupStyles(colors: AppColors) {
    },
    groupName: {
      marginBottom: spacing.xs,
-      fontWeight: '600',
+      fontWeight: '700',
+      fontSize: fontSizes.md + 1,
+      letterSpacing: 0.3,
    },
    groupDesc: {
      marginTop: spacing.sm,
-      lineHeight: 18,
+      lineHeight: 20,
+      fontWeight: '400',
    },
    groupInfoRow: {
      marginTop: spacing.sm,
@@ -135,16 +151,17 @@ function createJoinGroupStyles(colors: AppColors) {
      paddingHorizontal: spacing.sm,
      paddingVertical: 4,
      borderRadius: borderRadius.sm,
-      backgroundColor: colors.primary.light + '22',
+      backgroundColor: colors.primary.light + '15',
    },
    copyBtnText: {
      marginLeft: 4,
+      fontWeight: '600',
    },
    submitBtn: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
-      borderRadius: borderRadius.md,
+      borderRadius: borderRadius.lg,
      backgroundColor: colors.primary.main,
      minHeight: 46,
    },
@@ -153,10 +170,13 @@ function createJoinGroupStyles(colors: AppColors) {
    },
    submitText: {
      marginLeft: spacing.xs,
+      fontWeight: '700',
+      fontSize: fontSizes.md,
    },
    emptyText: {
      marginTop: spacing.sm,
      textAlign: 'center',
+      fontWeight: '500',
    },
    loadingFooter: {
      paddingVertical: spacing.md,
@@ -169,6 +189,8 @@ function createJoinGroupStyles(colors: AppColors) {
    noMoreText: {
      textAlign: 'center',
      paddingVertical: spacing.md,
+      fontWeight: '500',
+      color: colors.text.hint,
    },
  });
 }
--- a/src/screens/message/components/ChatScreen/ChatInput.tsx
+++ b/src/screens/message/components/ChatScreen/ChatInput.tsx
@@ -185,9 +185,11 @@ export const ChatInput: React.FC<ChatInputProps & {
          <TouchableOpacity
            style={styles.sendButtonActive}
            onPress={onSend}
-            activeOpacity={0.8}
+            activeOpacity={0.85}
          >
-            <MaterialCommunityIcons name="send" size={20} color="#FFF" />
+            {/* 光泽层 - 模拟渐变效果 */}
+            <View style={styles.sendButtonShine} pointerEvents="none" />
+            <MaterialCommunityIcons name="send" size={18} color="#FFF" />
          </TouchableOpacity>
        ) : isComposerBusy && !isDisabled ? (
          <TouchableOpacity
--- a/src/screens/message/components/ChatScreen/GroupInfoPanel.web.tsx
+++ b/src/screens/message/components/ChatScreen/GroupInfoPanel.web.tsx
@@ -374,7 +374,7 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  return StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'rgba(0, 0, 0, 0.35)',
    zIndex: 100,
  },
  overlayTouchable: {
@@ -388,24 +388,28 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    width: PANEL_WIDTH,
    backgroundColor: colors.background.paper,
    zIndex: 101,
-    ...shadows.lg,
+    borderLeftWidth: 0.5,
+    borderLeftColor: colors.divider + '60',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
-    paddingHorizontal: spacing.md,
+    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '60',
+    backgroundColor: colors.background.paper,
  },
  headerTitle: {
-    fontSize: fontSizes.xl,
-    fontWeight: '600',
+    fontSize: fontSizes.xl + 1,
+    fontWeight: '800',
    color: colors.text.primary,
+    letterSpacing: 0.5,
  },
  closeButton: {
    padding: spacing.xs,
+    borderRadius: borderRadius.md,
  },
  content: {
    flex: 1,
@@ -413,22 +417,26 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  groupInfoSection: {
    alignItems: 'center',
    paddingVertical: spacing.xl,
+    paddingHorizontal: spacing.md,
  },
  groupName: {
-    fontSize: fontSizes.xl,
-    fontWeight: '600',
+    fontSize: fontSizes.xl + 1,
+    fontWeight: '800',
    color: colors.text.primary,
    marginTop: spacing.md,
+    letterSpacing: 0.3,
  },
  memberCount: {
    fontSize: fontSizes.md,
    color: colors.text.secondary,
    marginTop: spacing.xs,
+    fontWeight: '500',
  },
  joinType: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
    marginTop: spacing.xs,
+    fontWeight: '600',
  },
  inviteButton: {
    flexDirection: 'row',
@@ -436,25 +444,27 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    justifyContent: 'center',
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.md,
-    backgroundColor: colors.primary.light + '15',
-    borderRadius: 20,
+    backgroundColor: colors.primary.light + '12',
+    borderRadius: borderRadius.lg,
    marginTop: spacing.md,
-    borderWidth: 1,
-    borderColor: colors.primary.light,
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '60',
+    borderStyle: 'dashed',
  },
  inviteButtonText: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
    marginLeft: spacing.xs,
-    fontWeight: '500',
+    fontWeight: '700',
+    letterSpacing: 0.3,
  },
  divider: {
-    height: 1,
-    backgroundColor: colors.divider,
-    marginHorizontal: spacing.md,
+    height: 0.5,
+    backgroundColor: colors.divider + '60',
+    marginHorizontal: spacing.lg,
  },
  section: {
-    padding: spacing.md,
+    padding: spacing.lg,
  },
  sectionHeader: {
    flexDirection: 'row',
@@ -462,38 +472,44 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    marginBottom: spacing.sm,
  },
  sectionTitle: {
-    fontSize: fontSizes.md,
-    fontWeight: '600',
+    fontSize: fontSizes.md + 1,
+    fontWeight: '700',
    color: colors.text.primary,
    marginLeft: spacing.xs,
+    letterSpacing: 0.3,
  },
  noticeBox: {
-    backgroundColor: colors.chat.tipBg,
+    backgroundColor: colors.warning.light + '08',
    padding: spacing.md,
-    borderRadius: 8,
+    borderRadius: borderRadius.lg,
    borderLeftWidth: 3,
    borderLeftColor: colors.warning.main,
  },
  noticeText: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
-    lineHeight: 20,
+    lineHeight: 22,
+    fontWeight: '400',
  },
  noticeTime: {
    fontSize: fontSizes.xs,
    color: colors.text.hint,
    marginTop: spacing.xs,
    textAlign: 'right',
+    fontWeight: '500',
  },
  descriptionBox: {
-    backgroundColor: colors.chat.surfaceMuted,
+    backgroundColor: colors.background.default,
    padding: spacing.md,
-    borderRadius: 8,
+    borderRadius: borderRadius.lg,
+    borderWidth: 0.5,
+    borderColor: colors.divider + '30',
  },
  description: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
-    lineHeight: 20,
+    lineHeight: 22,
+    fontWeight: '400',
  },
  memberList: {
    gap: spacing.sm,
@@ -511,15 +527,20 @@ function createGroupInfoPanelStyles(colors: AppColors) {
  viewAllText: {
    fontSize: fontSizes.sm,
    color: colors.primary.main,
+    fontWeight: '600',
  },
  memberItem: {
    flexDirection: 'row',
    alignItems: 'center',
-    paddingVertical: spacing.xs,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    borderRadius: borderRadius.md,
+    marginLeft: -spacing.sm,
+    marginRight: -spacing.sm,
  },
  memberInfo: {
    flex: 1,
-    marginLeft: spacing.sm,
+    marginLeft: spacing.md,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
@@ -528,48 +549,55 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    fontSize: fontSizes.md,
    color: colors.text.primary,
    flex: 1,
+    fontWeight: '600',
  },
  ownerBadge: {
    fontSize: fontSizes.xs,
-    color: colors.warning.main,
+    color: colors.background.paper,
    marginLeft: spacing.xs,
-    backgroundColor: colors.warning.light + '30',
+    backgroundColor: colors.warning.main,
    paddingHorizontal: 6,
    paddingVertical: 2,
-    borderRadius: 4,
+    borderRadius: borderRadius.sm,
+    fontWeight: '800',
  },
  adminBadge: {
    fontSize: fontSizes.xs,
    color: colors.primary.main,
    marginLeft: spacing.xs,
-    backgroundColor: colors.primary.light + '30',
+    backgroundColor: colors.primary.light + '20',
    paddingHorizontal: 6,
    paddingVertical: 2,
-    borderRadius: 4,
+    borderRadius: borderRadius.sm,
+    fontWeight: '700',
  },
  moreMembers: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
    textAlign: 'center',
    paddingVertical: spacing.sm,
+    fontWeight: '500',
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
-    paddingVertical: spacing.sm,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.chat.borderHairline,
+    paddingVertical: spacing.md,
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.divider + '40',
  },
  infoLabel: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
+    fontWeight: '500',
  },
  infoValue: {
    fontSize: fontSizes.sm,
    color: colors.text.primary,
+    fontWeight: '600',
+    textAlign: 'right',
  },
  actionSection: {
-    padding: spacing.md,
+    padding: spacing.lg,
    paddingBottom: spacing.xl,
  },
  actionButton: {
@@ -577,24 +605,27 @@ function createGroupInfoPanelStyles(colors: AppColors) {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.md,
-    backgroundColor: colors.primary.light + '15',
-    borderRadius: 12,
+    backgroundColor: colors.primary.light + '10',
+    borderRadius: borderRadius.lg,
    marginBottom: spacing.sm,
-    borderWidth: 1,
-    borderColor: colors.primary.light,
+    borderWidth: 1.5,
+    borderColor: colors.primary.light + '50',
  },
  actionButtonText: {
    fontSize: fontSizes.md,
-    fontWeight: '600',
+    fontWeight: '700',
    color: colors.primary.main,
    marginLeft: spacing.sm,
+    letterSpacing: 0.3,
  },
  leaveButton: {
-    backgroundColor: colors.error.light + '15',
-    borderColor: colors.error.light,
+    backgroundColor: colors.error.light + '08',
+    borderColor: colors.error.light + '50',
+    borderWidth: 1.5,
  },
  leaveButtonText: {
    color: colors.error.main,
+    fontWeight: '700',
  },
  });
 }
--- a/src/screens/message/components/ChatScreen/styles.ts
+++ b/src/screens/message/components/ChatScreen/styles.ts
@@ -432,18 +432,34 @@ export function createChatScreenStyles(colors: AppColors) {
    transform: [{ translateY: -1 }],
  },
  
-  // 发送按钮
+  // 发送按钮 - QQ/微信风格
  sendButtonActive: {
-    width: 38,
-    height: 30,
-    borderRadius: 15,
+    width: 36,
+    height: 36,
+    borderRadius: 18,  // 正圆形
    backgroundColor: colors.primary.main,
    alignItems: 'center',
    justifyContent: 'center',
-    ...shadows.md,
+    // 微信风格：轻微阴影，不夸张
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 2,
  },
  sendButtonDisabled: {
-    opacity: 0.6,
+    opacity: 0.4,
+  },
+  // 发送按钮光泽层（叠加在按钮上模拟渐变）
+  sendButtonShine: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '50%',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
  },
  
  // 输入框
--- a/src/screens/message/components/ConversationListRow.tsx
+++ b/src/screens/message/components/ConversationListRow.tsx
@@ -6,7 +6,7 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { spacing, shadows, useAppColors, type AppColors } from '../../../theme';
+import { spacing, shadows, borderRadius, useAppColors, type AppColors } from '../../../theme';
 import {
  ConversationResponse,
  extractTextFromSegments,
@@ -160,13 +160,14 @@ function createConversationRowStyles(colors: AppColors) {
      backgroundColor: colors.background.paper,
      marginHorizontal: spacing.md,
      marginTop: spacing.sm,
-      borderRadius: 12,
-      ...shadows.sm,
+      borderRadius: borderRadius.lg,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    conversationItemSelected: {
-      backgroundColor: colors.primary.light + '20',
-      borderColor: colors.primary.main,
-      borderWidth: 1,
+      backgroundColor: colors.primary.light + '12',
+      borderColor: colors.primary.main + '60',
+      borderWidth: 1.5,
    },
    avatarContainer: {
      position: 'relative',
@@ -174,7 +175,7 @@ function createConversationRowStyles(colors: AppColors) {
    systemAvatar: {
      width: 50,
      height: 50,
-      borderRadius: 12,
+      borderRadius: borderRadius.md,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.primary.main,
@@ -195,7 +196,7 @@ function createConversationRowStyles(colors: AppColors) {
    },
    officialBadge: {
      backgroundColor: colors.primary.main,
-      borderRadius: 4,
+      borderRadius: borderRadius.sm,
      paddingHorizontal: 6,
      paddingVertical: 2,
      marginRight: spacing.xs,
@@ -203,12 +204,13 @@ function createConversationRowStyles(colors: AppColors) {
    officialBadgeText: {
      color: colors.primary.contrast,
      fontSize: 10,
-      fontWeight: '600',
+      fontWeight: '800',
    },
    userName: {
-      fontWeight: '600',
+      fontWeight: '700',
      color: colors.text.primary,
      fontSize: 16,
+      letterSpacing: 0.3,
    },
    groupIcon: {
      marginRight: 4,
@@ -217,6 +219,7 @@ function createConversationRowStyles(colors: AppColors) {
      fontSize: 12,
      color: colors.text.secondary,
      marginLeft: 2,
+      fontWeight: '500',
    },
    pinnedIcon: {
      marginLeft: 6,
@@ -228,7 +231,7 @@ function createConversationRowStyles(colors: AppColors) {
    groupAvatarPlaceholder: {
      width: 50,
      height: 50,
-      borderRadius: 12,
+      borderRadius: borderRadius.md,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -236,6 +239,7 @@ function createConversationRowStyles(colors: AppColors) {
    timeText: {
      color: colors.text.secondary,
      fontSize: 12,
+      fontWeight: '500',
    },
    messageRow: {
      flexDirection: 'row',
@@ -245,15 +249,16 @@ function createConversationRowStyles(colors: AppColors) {
      flex: 1,
      color: colors.text.secondary,
      fontSize: 14,
+      fontWeight: '400',
    },
    unreadMessageText: {
      color: colors.text.primary,
-      fontWeight: '500',
+      fontWeight: '600',
    },
    unreadBadge: {
-      minWidth: 20,
-      height: 20,
-      borderRadius: 10,
+      minWidth: 22,
+      height: 22,
+      borderRadius: 11,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
@@ -263,7 +268,7 @@ function createConversationRowStyles(colors: AppColors) {
    unreadBadgeText: {
      color: colors.primary.contrast,
      fontSize: 12,
-      fontWeight: '600',
+      fontWeight: '800',
    },
  });
 }
--- a/src/screens/message/components/GroupRequestShared.tsx
+++ b/src/screens/message/components/GroupRequestShared.tsx
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';

 import { Avatar, Text } from '../../../components/common';
-import { spacing, borderRadius, shadows, useAppColors, type AppColors } from '../../../theme';
+import { spacing, borderRadius, fontSizes, useAppColors, type AppColors } from '../../../theme';

 interface GroupInfoSummaryCardProps {
  groupName?: string;
@@ -18,10 +18,11 @@ function createGroupRequestSharedStyles(colors: AppColors) {
  return StyleSheet.create({
    headerCard: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
+      borderRadius: borderRadius.xl,
      padding: spacing.lg,
      marginBottom: spacing.md,
-      ...shadows.sm,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '40',
    },
    groupHeader: {
      flexDirection: 'row',
@@ -33,7 +34,9 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    groupName: {
      marginBottom: spacing.xs,
-      fontWeight: '700',
+      fontWeight: '800',
+      fontSize: fontSizes.xl + 1,
+      letterSpacing: 0.3,
    },
    groupMeta: {
      flexDirection: 'row',
@@ -42,6 +45,7 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    groupNoText: {
      marginTop: spacing.xs,
+      fontWeight: '500',
    },
    descriptionContainer: {
      flexDirection: 'row',
@@ -50,11 +54,14 @@ function createGroupRequestSharedStyles(colors: AppColors) {
      borderRadius: borderRadius.lg,
      padding: spacing.md,
      marginTop: spacing.md,
+      borderWidth: 0.5,
+      borderColor: colors.divider + '30',
    },
    groupDesc: {
      marginLeft: spacing.sm,
      flex: 1,
-      lineHeight: 20,
+      lineHeight: 22,
+      fontWeight: '400',
    },
    footer: {
      paddingHorizontal: spacing.lg,
@@ -64,16 +71,16 @@ function createGroupRequestSharedStyles(colors: AppColors) {
    },
    btn: {
      flex: 1,
-      height: 42,
-      borderRadius: borderRadius.md,
+      height: 46,
+      borderRadius: borderRadius.lg,
      alignItems: 'center',
      justifyContent: 'center',
    },
    reject: {
      marginRight: spacing.sm,
-      backgroundColor: colors.error.light + '25',
-      borderWidth: 1,
-      borderColor: colors.error.light,
+      backgroundColor: colors.error.light + '12',
+      borderWidth: 1.5,
+      borderColor: colors.error.light + '60',
    },
    approve: {
      marginLeft: spacing.sm,