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