MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(analytics): replace hardcoded color tokens with theme-aware CSS variables

Browse Source
This commit is contained in:
MythEclipse
2026-06-04 14:17:45 +07:00
parent 3ecb7bd15c
commit 0a35e83a6c
3 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/features/analytics/components/ControlBar.tsx
+4 -4
View File
@@ -55,14 +55,14 @@ export function ControlBar({
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex flex-wrap items-center gap-3"> <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) => ( {TIME_RANGES.map((tr) => (
<button <button
key={tr.value} key={tr.value}
type="button" type="button"
onClick={() => onHoursChange(tr.value)} onClick={() => onHoursChange(tr.value)}
className={cn( 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 hours === tr.value
? "bg-primary text-white shadow-sm" ? "bg-primary text-white shadow-sm"
: "text-muted-foreground hover:text-foreground", : "text-muted-foreground hover:text-foreground",
@@ -77,11 +77,11 @@ export function ControlBar({
disabled={isFetching} disabled={isFetching}
variant="outline" variant="outline"
size="sm" 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 ? ( {isFetching ? (
<span className="flex items-center gap-1.5"> <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... Memuat...
</span> </span>
) : ( ) : (
services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
+6 -9
View File
@@ -49,10 +49,7 @@ export function ModerationActionsPanel({
actions, actions,
loading, loading,
}: ModerationActionsPanelProps) { }: ModerationActionsPanelProps) {
if (loading && !actions?.length) { if (loading && !actions?.length) return <LoadingBox />;
return <LoadingBox />;
}
if (!actions?.length) { if (!actions?.length) {
return ( return (
<Card> <Card>
@@ -81,7 +78,7 @@ export function ModerationActionsPanel({
</CardHeader> </CardHeader>
<CardContent className="p-0"> <CardContent className="p-0">
<ScrollArea className="max-h-[320px]"> <ScrollArea className="max-h-[320px]">
<div className="divide-y divide-sky-50"> <div className="divide-y divide-muted/30">
{actions.map((action) => { {actions.map((action) => {
const actionStyle = ACTION_LABELS[action.action_type] ?? { const actionStyle = ACTION_LABELS[action.action_type] ?? {
label: action.action_type, label: action.action_type,
@@ -95,7 +92,7 @@ export function ModerationActionsPanel({
return ( return (
<div <div
key={action.id} 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 justify-between gap-3">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
@@ -108,7 +105,7 @@ export function ModerationActionsPanel({
> >
{actionStyle.label} {actionStyle.label}
</Badge> </Badge>
<span className="truncate text-xs font-medium"> <span className="truncate text-xs font-medium text-foreground">
{action.username} {action.username}
</span> </span>
</div> </div>
@@ -128,7 +125,7 @@ export function ModerationActionsPanel({
</p> </p>
)} )}
{action.error && ( {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} Error: {action.error}
</p> </p>
)} )}
@@ -154,7 +151,7 @@ function LoadingBox() {
return ( return (
<Card> <Card>
<CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground"> <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> <span className="ml-2">Memuat data...</span>
</CardContent> </CardContent>
</Card> </Card>
services/frontend/src/features/analytics/components/ViolatorTable.tsx
+10 -13
View File
@@ -17,10 +17,7 @@ interface ViolatorTableProps {
} }
export function ViolatorTable({ users, loading }: ViolatorTableProps) { export function ViolatorTable({ users, loading }: ViolatorTableProps) {
if (loading && !users?.length) { if (loading && !users?.length) return <LoadingBox />;
return <LoadingBox />;
}
if (!users?.length) { if (!users?.length) {
return ( return (
<Card> <Card>
@@ -59,7 +56,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
<ScrollArea className="max-h-[320px]"> <ScrollArea className="max-h-[320px]">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <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 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">User</th>
<th className="py-2 pr-2 font-semibold text-right">Flagged</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> <th className="py-2 pr-4 font-semibold">Flag</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-sky-50"> <tbody className="divide-y divide-muted/20">
{users.map((user, i) => { {users.map((user, i) => {
const danger = dangerLabel(user.violation_score); const danger = dangerLabel(user.violation_score);
return ( return (
@@ -76,7 +73,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
key={user.user_id} key={user.user_id}
className={cn( className={cn(
"transition-colors border-l-2", "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" danger.variant === "destructive"
? "border-l-accent/60" ? "border-l-accent/60"
: danger.variant === "warning" : danger.variant === "warning"
@@ -93,11 +90,11 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
<img <img
src={user.avatar_url} src={user.avatar_url}
alt="" 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" 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()} {user.username.charAt(0).toUpperCase()}
</div> </div>
)} )}
@@ -120,10 +117,10 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
</td> </td>
<td className="py-1.5 pr-2 text-right"> <td className="py-1.5 pr-2 text-right">
<div className="flex items-center justify-end gap-1.5"> <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 <div
className={cn( className={cn(
"h-full rounded-full", "h-full rounded-sm",
user.violation_score >= 10 user.violation_score >= 10
? "bg-gradient-to-r from-accent to-pink-400" ? "bg-gradient-to-r from-accent to-pink-400"
: user.violation_score >= 5 : user.violation_score >= 5
@@ -135,7 +132,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
}} }}
/> />
</div> </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} {user.violation_score}
</span> </span>
</div> </div>
@@ -174,7 +171,7 @@ function LoadingBox() {
return ( return (
<Card> <Card>
<CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground"> <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> <span className="ml-2">Memuat data...</span>
</CardContent> </CardContent>
</Card> </Card>