From 0a35e83a6c25ae1f897715804bfc709a0d87a1f7 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Thu, 4 Jun 2026 14:17:45 +0700
Subject: [PATCH] refactor(analytics): replace hardcoded color tokens with
 theme-aware CSS variables

---
 .../analytics/components/ControlBar.tsx       |  8 +++----
 .../components/ModerationActionsPanel.tsx     | 15 +++++-------
 .../analytics/components/ViolatorTable.tsx    | 23 ++++++++-----------
 3 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/services/frontend/src/features/analytics/components/ControlBar.tsx b/services/frontend/src/features/analytics/components/ControlBar.tsx
index fdb2a18..dde02a7 100644
--- a/services/frontend/src/features/analytics/components/ControlBar.tsx
+++ b/services/frontend/src/features/analytics/components/ControlBar.tsx
@@ -55,14 +55,14 @@ export function ControlBar({
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-1 rounded-xl bg-sky-50 p-0.5 ring-1 ring-sky-200/50">
+          <div className="flex items-center gap-1 rounded-lg bg-muted/30 p-0.5 ring-1 ring-muted/50">
             {TIME_RANGES.map((tr) => (
               <button
                 key={tr.value}
                 type="button"
                 onClick={() => onHoursChange(tr.value)}
                 className={cn(
-                  "rounded-lg px-2.5 py-1 text-xs font-medium transition-all",
+                  "rounded-md px-2.5 py-1 text-xs font-medium transition-all",
                   hours === tr.value
                     ? "bg-primary text-white shadow-sm"
                     : "text-muted-foreground hover:text-foreground",
@@ -77,11 +77,11 @@ export function ControlBar({
             disabled={isFetching}
             variant="outline"
             size="sm"
-            className="ml-auto shrink-0 rounded-xl border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
+            className="ml-auto shrink-0 rounded-lg border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
           >
             {isFetching ? (
               <span className="flex items-center gap-1.5">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                <span className="h-3 w-3 animate-spin rounded-sm border-2 border-primary border-t-transparent" />
                 Memuat...
               </span>
             ) : (
diff --git a/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx b/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
index c7a0821..9c6d464 100644
--- a/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
+++ b/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
@@ -49,10 +49,7 @@ export function ModerationActionsPanel({
   actions,
   loading,
 }: ModerationActionsPanelProps) {
-  if (loading && !actions?.length) {
-    return <LoadingBox />;
-  }
-
+  if (loading && !actions?.length) return <LoadingBox />;
   if (!actions?.length) {
     return (
       <Card>
@@ -81,7 +78,7 @@ export function ModerationActionsPanel({
       </CardHeader>
       <CardContent className="p-0">
         <ScrollArea className="max-h-[320px]">
-          <div className="divide-y divide-sky-50">
+          <div className="divide-y divide-muted/30">
             {actions.map((action) => {
               const actionStyle = ACTION_LABELS[action.action_type] ?? {
                 label: action.action_type,
@@ -95,7 +92,7 @@ export function ModerationActionsPanel({
               return (
                 <div
                   key={action.id}
-                  className="px-5 py-3 text-sm hover:bg-sky-50/30 transition-colors"
+                  className="px-5 py-3 text-sm hover:bg-muted/10 transition-colors"
                 >
                   <div className="flex items-center justify-between gap-3">
                     <div className="flex items-center gap-2 min-w-0">
@@ -108,7 +105,7 @@ export function ModerationActionsPanel({
                       >
                         {actionStyle.label}
                       </Badge>
-                      <span className="truncate text-xs font-medium">
+                      <span className="truncate text-xs font-medium text-foreground">
                         {action.username}
                       </span>
                     </div>
@@ -128,7 +125,7 @@ export function ModerationActionsPanel({
                     </p>
                   )}
                   {action.error && (
-                    <p className="mt-0.5 text-[10px] text-red-400 pl-1">
+                    <p className="mt-0.5 text-[10px] text-destructive pl-1">
                       Error: {action.error}
                     </p>
                   )}
@@ -154,7 +151,7 @@ function LoadingBox() {
   return (
     <Card>
       <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
-        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        <span className="h-4 w-4 animate-spin rounded-sm border-2 border-current border-t-transparent" />
         <span className="ml-2">Memuat data...</span>
       </CardContent>
     </Card>
diff --git a/services/frontend/src/features/analytics/components/ViolatorTable.tsx b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
index f73a785..d769779 100644
--- a/services/frontend/src/features/analytics/components/ViolatorTable.tsx
+++ b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
@@ -17,10 +17,7 @@ interface ViolatorTableProps {
 }
 
 export function ViolatorTable({ users, loading }: ViolatorTableProps) {
-  if (loading && !users?.length) {
-    return <LoadingBox />;
-  }
-
+  if (loading && !users?.length) return <LoadingBox />;
   if (!users?.length) {
     return (
       <Card>
@@ -59,7 +56,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
         <ScrollArea className="max-h-[320px]">
           <table className="w-full text-sm">
             <thead>
-              <tr className="sticky top-0 z-10 bg-white border-b border-sky-100 text-left text-[10px] uppercase tracking-wider text-muted-foreground">
+              <tr className="sticky top-0 z-10 bg-white border-b border-muted/50 text-left text-[10px] uppercase tracking-wider text-muted-foreground">
                 <th className="py-2 pl-4 pr-2 font-semibold">#</th>
                 <th className="py-2 pr-2 font-semibold">User</th>
                 <th className="py-2 pr-2 font-semibold text-right">Flagged</th>
@@ -68,7 +65,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                 <th className="py-2 pr-4 font-semibold">Flag</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-sky-50">
+            <tbody className="divide-y divide-muted/20">
               {users.map((user, i) => {
                 const danger = dangerLabel(user.violation_score);
                 return (
@@ -76,7 +73,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                     key={user.user_id}
                     className={cn(
                       "transition-colors border-l-2",
-                      i % 2 === 0 ? "bg-white" : "bg-sky-50/20",
+                      i % 2 === 0 ? "bg-white" : "bg-muted/10",
                       danger.variant === "destructive"
                         ? "border-l-accent/60"
                         : danger.variant === "warning"
@@ -93,11 +90,11 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                           <img
                             src={user.avatar_url}
                             alt=""
-                            className="h-6 w-6 rounded-full ring-2 ring-pink-100"
+                            className="h-6 w-6 rounded-md ring-1 ring-muted"
                             loading="lazy"
                           />
                         ) : (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-pink-100 text-[10px] font-bold text-accent">
+                          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-accent/10 text-[10px] font-bold text-accent">
                             {user.username.charAt(0).toUpperCase()}
                           </div>
                         )}
@@ -120,10 +117,10 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                     </td>
                     <td className="py-1.5 pr-2 text-right">
                       <div className="flex items-center justify-end gap-1.5">
-                        <div className="h-1.5 w-12 overflow-hidden rounded-full bg-pink-50">
+                        <div className="h-1.5 w-14 overflow-hidden rounded-sm bg-muted/30">
                           <div
                             className={cn(
-                              "h-full rounded-full",
+                              "h-full rounded-sm",
                               user.violation_score >= 10
                                 ? "bg-gradient-to-r from-accent to-pink-400"
                                 : user.violation_score >= 5
@@ -135,7 +132,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                             }}
                           />
                         </div>
-                        <span className="font-mono text-xs font-bold tabular-nums">
+                        <span className="font-mono text-xs font-bold tabular-nums text-foreground">
                           {user.violation_score}
                         </span>
                       </div>
@@ -174,7 +171,7 @@ function LoadingBox() {
   return (
     <Card>
       <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
-        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        <span className="h-4 w-4 animate-spin rounded-sm border-2 border-current border-t-transparent" />
         <span className="ml-2">Memuat data...</span>
       </CardContent>
     </Card>