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
This commit is contained in:
lafay
@@ -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',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user