From d272b96e539dddf58ca1beaee0bad18647cabb74 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 19 May 2026 14:47:37 +0800
Subject: [PATCH] fix: ganti warna desc diskusi dan pindahkan inline styles ke
 styles.ts

- 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)
---
 app/(application)/discussion/index.tsx        | 43 ++++++++++++-------
 .../(fitur-division)/discussion/index.tsx     | 37 ++++++++++------
 constants/styles/component.styles.ts          |  5 +++
 3 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/app/(application)/discussion/index.tsx b/app/(application)/discussion/index.tsx
index 8320d0e..fe1a002 100644
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -87,11 +87,24 @@ export default function Discussion() {
 
    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 (
-      <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
+      <View style={[Styles.flex1, themed.background]}>
          <GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
          {/* Header controls */}
-         <View style={[Styles.ph15, { paddingTop: 12 }]}>
+         <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
             {entityUser.role != "user" && entityUser.role != "coadmin" && (
                <WrapTab>
                   <ButtonTab
@@ -122,13 +135,13 @@ export default function Discussion() {
          </View>
 
          {/* List */}
-         <View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
+         <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
             {isLoading ? (
                [0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />)
             ) : flatData.length === 0 ? (
                <View style={[Styles.contentItemCenter, Styles.mt30]}>
                   <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
                   </Text>
                </View>
@@ -154,27 +167,25 @@ export default function Discussion() {
                         onPress={() => router.push(`/discussion/${item.id}`)}
                         style={({ pressed }) => [
                            Styles.discussionCard,
-                           {
-                              backgroundColor: pressed ? colors.icon + '10' : colors.card,
-                              borderColor: colors.icon + '20',
-                           }
+                           themed.card,
+                           pressed && themed.cardPressed,
                         ]}
                      >
                         {/* Top row: icon + title + status badge */}
                         <View style={[Styles.rowItemsCenter, Styles.mb08]}>
                            {/* 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} />
                            </View>
 
                            {/* Title + status badge */}
-                           <View style={[Styles.flex1, { marginLeft: 10 }]}>
-                              <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}>
+                           <View style={[Styles.flex1, Styles.discussionTitleCol]}>
+                              <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
                                  {item.title}
                               </Text>
                               {status !== "false" && (
-                                 <View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}>
-                                    <Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}>
+                                 <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
+                                    <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
                                        {isOpen(item) ? 'Buka' : 'Tutup'}
                                     </Text>
                                  </View>
@@ -185,7 +196,7 @@ export default function Discussion() {
                         {/* Description */}
                         {item.desc ? (
                            <Text
-                              style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]}
+                              style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]}
                               numberOfLines={2}
                            >
                               {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}>
                               <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
                               </Text>
                            </View>
-                           <Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
+                           <Text style={[Styles.discussionDateText, themed.dimmed]}>
                               {item.createdAt}
                            </Text>
                         </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
index 41f7445..a8faaa2 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
@@ -98,11 +98,23 @@ export default function DiscussionDivision() {
 
    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 (
-      <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
+      <View style={[Styles.flex1, themed.background]}>
          <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} />
          {((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
-            <View style={[Styles.ph15, { paddingTop: 12 }]}>
+            <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
                <WrapTab>
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
@@ -125,13 +137,13 @@ export default function DiscussionDivision() {
             </View>
          )}
 
-         <View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
+         <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
             {loading ? (
                arrSkeleton.map((_, i) => <SkeletonContent key={i} />)
             ) : data.length === 0 ? (
                <View style={[Styles.contentItemCenter, Styles.mt30]}>
                   <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
                   </Text>
                </View>
@@ -151,18 +163,19 @@ export default function DiscussionDivision() {
                         onPress={() => router.push(`./discussion/${item.id}`)}
                         style={({ pressed }) => [
                            Styles.discussionCard,
-                           { backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
+                           themed.card,
+                           pressed && themed.cardPressed,
                         ]}
                      >
                         <View style={[Styles.rowItemsCenter, Styles.mb08]}>
                            <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
-                           <View style={[Styles.flex1, { marginLeft: 10 }]}>
-                              <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}>
+                           <View style={[Styles.flex1, Styles.discussionTitleCol]}>
+                              <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
                                  {item.user_name}
                               </Text>
                               {status === "true" && (
-                                 <View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}>
-                                    <Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}>
+                                 <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
+                                    <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
                                        {isOpen(item) ? 'Buka' : 'Tutup'}
                                     </Text>
                                  </View>
@@ -171,7 +184,7 @@ export default function DiscussionDivision() {
                         </View>
 
                         {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}
                            </Text>
                         ) : null}
@@ -179,11 +192,11 @@ export default function DiscussionDivision() {
                         <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
                            <View style={Styles.rowItemsCenter}>
                               <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
                               </Text>
                            </View>
-                           <Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
+                           <Text style={[Styles.discussionDateText, themed.dimmed]}>
                               {item.createdAt}
                            </Text>
                         </View>
diff --git a/constants/styles/component.styles.ts b/constants/styles/component.styles.ts
index 1fc0369..4851fa9 100644
--- a/constants/styles/component.styles.ts
+++ b/constants/styles/component.styles.ts
@@ -86,6 +86,11 @@ const ComponentStyles = StyleSheet.create({
    discussionDateText: { fontSize: 11 },
    discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
    discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
+   discussionHeaderPadding: { paddingTop: 12 },
+   discussionListPadding: { paddingTop: 8 },
+   discussionTitleCol: { marginLeft: 10 },
+   discussionDescMargin: { marginBottom: 10 },
+   discussionEmptyText: { fontSize: 14 },
 
    // guide overlay
    guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },