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

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,
     },
   });
 }