wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ganti warna desc diskusi dan pindahkan inline styles ke styles.ts

Browse Source 
- Ganti warna teks deskripsi dari dimmed ke text pada list diskusi umum dan divisi
- Tambah class discussionHeaderPadding, discussionListPadding, discussionTitleCol,
  discussionDescMargin, discussionEmptyText ke component.styles.ts
- Ganti semua inline style dengan themed object (warna dinamis) dan Styles.* (statis)
This commit is contained in:
amaliadwiy
2026-05-19 14:47:37 +08:00
parent 6d0203cc7d
commit d272b96e53
3 changed files with 57 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/(application)/discussion/index.tsx
View File

@@ -87,11 +87,24 @@ export default function Discussion() {
const isOpen = (item: Props) => item.status === 1 const isOpen = (item: Props) => item.status === 1
const themed = {
background: { backgroundColor: colors.background },
card: { backgroundColor: colors.card, borderColor: colors.icon + '20' },
cardPressed: { backgroundColor: colors.icon + '10' },
iconCircle: { backgroundColor: colors.icon + '20' },
title: { color: colors.text },
dimmed: { color: colors.dimmed },
statusOpen: { borderColor: '#10B981' as const },
statusClosed: { borderColor: colors.dimmed + '80' },
statusTextOpen: { color: '#10B981' as const },
statusTextClosed: { color: colors.dimmed },
}
return ( return (
<View style={[Styles.flex1, { backgroundColor: colors.background }]}> <View style={[Styles.flex1, themed.background]}>
<GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} /> <GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
{/* Header controls */} {/* Header controls */}
<View style={[Styles.ph15, { paddingTop: 12 }]}> <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
{entityUser.role != "user" && entityUser.role != "coadmin" && ( {entityUser.role != "user" && entityUser.role != "coadmin" && (
<WrapTab> <WrapTab>
<ButtonTab <ButtonTab
@@ -122,13 +135,13 @@ export default function Discussion() {
</View> </View>
{/* List */} {/* List */}
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}> <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
{isLoading ? ( {isLoading ? (
[0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />) [0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />)
) : flatData.length === 0 ? ( ) : flatData.length === 0 ? (
<View style={[Styles.contentItemCenter, Styles.mt30]}> <View style={[Styles.contentItemCenter, Styles.mt30]}>
<Feather name="message-circle" size={42} color={colors.icon + '40'} /> <Feather name="message-circle" size={42} color={colors.icon + '40'} />
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}> <Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
Tidak ada diskusi Tidak ada diskusi
</Text> </Text>
</View> </View>
@@ -154,27 +167,25 @@ export default function Discussion() {
onPress={() => router.push(`/discussion/${item.id}`)} onPress={() => router.push(`/discussion/${item.id}`)}
style={({ pressed }) => [ style={({ pressed }) => [
Styles.discussionCard, Styles.discussionCard,
{ themed.card,
backgroundColor: pressed ? colors.icon + '10' : colors.card, pressed && themed.cardPressed,
borderColor: colors.icon + '20',
}
]} ]}
> >
{/* Top row: icon + title + status badge */} {/* Top row: icon + title + status badge */}
<View style={[Styles.rowItemsCenter, Styles.mb08]}> <View style={[Styles.rowItemsCenter, Styles.mb08]}>
{/* Discussion icon */} {/* Discussion icon */}
<View style={[Styles.discussionIconCircle, { backgroundColor: colors.icon + '20' }]}> <View style={[Styles.discussionIconCircle, themed.iconCircle]}>
<Feather name="message-circle" size={20} color={colors.icon} /> <Feather name="message-circle" size={20} color={colors.icon} />
</View> </View>
{/* Title + status badge */} {/* Title + status badge */}
<View style={[Styles.flex1, { marginLeft: 10 }]}> <View style={[Styles.flex1, Styles.discussionTitleCol]}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}> <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
{item.title} {item.title}
</Text> </Text>
{status !== "false" && ( {status !== "false" && (
<View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}> <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
<Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}> <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
{isOpen(item) ? 'Buka' : 'Tutup'} {isOpen(item) ? 'Buka' : 'Tutup'}
</Text> </Text>
</View> </View>
@@ -185,7 +196,7 @@ export default function Discussion() {
{/* Description */} {/* Description */}
{item.desc ? ( {item.desc ? (
<Text <Text
style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]} style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]}
numberOfLines={2} numberOfLines={2}
> >
{item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')} {item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
@@ -196,11 +207,11 @@ export default function Discussion() {
<View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}> <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<Feather name="message-square" size={14} color={colors.dimmed} /> <Feather name="message-square" size={14} color={colors.dimmed} />
<Text style={[Styles.discussionCommentText, { color: colors.dimmed }]}> <Text style={[Styles.discussionCommentText, themed.dimmed]}>
{item.total_komentar} Komentar {item.total_komentar} Komentar
</Text> </Text>
</View> </View>
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}> <Text style={[Styles.discussionDateText, themed.dimmed]}>
{item.createdAt} {item.createdAt}
</Text> </Text>
</View> </View>

37
app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
View File

@@ -98,11 +98,23 @@ export default function DiscussionDivision() {
const isOpen = (item: Props) => item.status === 1 const isOpen = (item: Props) => item.status === 1
const themed = {
background: { backgroundColor: colors.background },
card: { backgroundColor: colors.card, borderColor: colors.icon + '20' },
cardPressed: { backgroundColor: colors.icon + '10' },
title: { color: colors.text },
dimmed: { color: colors.dimmed },
statusOpen: { borderColor: '#10B981' as const },
statusClosed: { borderColor: colors.dimmed + '80' },
statusTextOpen: { color: '#10B981' as const },
statusTextClosed: { color: colors.dimmed },
}
return ( return (
<View style={[Styles.flex1, { backgroundColor: colors.background }]}> <View style={[Styles.flex1, themed.background]}>
<GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} /> <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} />
{((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && ( {((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
<View style={[Styles.ph15, { paddingTop: 12 }]}> <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
<WrapTab> <WrapTab>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
@@ -125,13 +137,13 @@ export default function DiscussionDivision() {
</View> </View>
)} )}
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}> <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
{loading ? ( {loading ? (
arrSkeleton.map((_, i) => <SkeletonContent key={i} />) arrSkeleton.map((_, i) => <SkeletonContent key={i} />)
) : data.length === 0 ? ( ) : data.length === 0 ? (
<View style={[Styles.contentItemCenter, Styles.mt30]}> <View style={[Styles.contentItemCenter, Styles.mt30]}>
<Feather name="message-circle" size={42} color={colors.icon + '40'} /> <Feather name="message-circle" size={42} color={colors.icon + '40'} />
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}> <Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
Tidak ada diskusi Tidak ada diskusi
</Text> </Text>
</View> </View>
@@ -151,18 +163,19 @@ export default function DiscussionDivision() {
onPress={() => router.push(`./discussion/${item.id}`)} onPress={() => router.push(`./discussion/${item.id}`)}
style={({ pressed }) => [ style={({ pressed }) => [
Styles.discussionCard, Styles.discussionCard,
{ backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' } themed.card,
pressed && themed.cardPressed,
]} ]}
> >
<View style={[Styles.rowItemsCenter, Styles.mb08]}> <View style={[Styles.rowItemsCenter, Styles.mb08]}>
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" /> <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
<View style={[Styles.flex1, { marginLeft: 10 }]}> <View style={[Styles.flex1, Styles.discussionTitleCol]}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}> <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
{item.user_name} {item.user_name}
</Text> </Text>
{status === "true" && ( {status === "true" && (
<View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}> <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
<Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}> <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
{isOpen(item) ? 'Buka' : 'Tutup'} {isOpen(item) ? 'Buka' : 'Tutup'}
</Text> </Text>
</View> </View>
@@ -171,7 +184,7 @@ export default function DiscussionDivision() {
</View> </View>
{item.desc ? ( {item.desc ? (
<Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]} numberOfLines={2}> <Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]} numberOfLines={2}>
{item.desc} {item.desc}
</Text> </Text>
) : null} ) : null}
@@ -179,11 +192,11 @@ export default function DiscussionDivision() {
<View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}> <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<Feather name="message-square" size={14} color={colors.dimmed} /> <Feather name="message-square" size={14} color={colors.dimmed} />
<Text style={[Styles.discussionCommentText, { color: colors.dimmed }]}> <Text style={[Styles.discussionCommentText, themed.dimmed]}>
{item.total_komentar} Komentar {item.total_komentar} Komentar
</Text> </Text>
</View> </View>
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}> <Text style={[Styles.discussionDateText, themed.dimmed]}>
{item.createdAt} {item.createdAt}
</Text> </Text>
</View> </View>

5
constants/styles/component.styles.ts
View File

@@ -86,6 +86,11 @@ const ComponentStyles = StyleSheet.create({
discussionDateText: { fontSize: 11 }, discussionDateText: { fontSize: 11 },
discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' }, discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
discussionEditedText: { fontSize: 10, fontStyle: 'italic' }, discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
discussionHeaderPadding: { paddingTop: 12 },
discussionListPadding: { paddingTop: 8 },
discussionTitleCol: { marginLeft: 10 },
discussionDescMargin: { marginBottom: 10 },
discussionEmptyText: { fontSize: 14 },
// guide overlay // guide overlay
guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }, guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },