From bdbc42c22df5dc479f2e979ee8c09dc843bcd0c2 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sun, 28 Jun 2026 11:08:11 +0800
Subject: [PATCH] style(frontend): remove hardcoded text and bg color overrides
 on components

Remove redundant text/bg style overrides on Button and Badge components in UserDetailSheet and UserFilterBar to allow proper default and destructive theme variants.
---
 .../admin/users/components/user-detail-sheet.tsx      | 11 +++--------
 .../(main)/admin/users/components/user-filter-bar.tsx |  8 ++++----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/app/(main)/admin/users/components/user-detail-sheet.tsx b/frontend/app/(main)/admin/users/components/user-detail-sheet.tsx
index 0d07e0cf..3066778a 100644
--- a/frontend/app/(main)/admin/users/components/user-detail-sheet.tsx
+++ b/frontend/app/(main)/admin/users/components/user-detail-sheet.tsx
@@ -8,7 +8,7 @@ import {Badge} from "@/components/ui/badge"
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
 import {Sheet, SheetContent, SheetTitle} from "@/components/ui/sheet"
 import type {AdminUser} from "@/lib/services/admin"
-import {cn, formatDateTime} from "@/lib/utils"
+import {formatDateTime} from "@/lib/utils"
 
 interface UserDetailSheetProps {
   selectedUser: AdminUser | null
@@ -54,7 +54,7 @@ export function UserDetailSheet({
                           UID: {selectedUser.id}
                         </Badge>
                         {selectedUser.is_admin && (
-                          <Badge className="h-4.5 px-1.5 text-[9px] uppercase font-medium bg-primary text-primary-foreground">
+                          <Badge className="h-4.5 px-1.5 text-[9px] uppercase font-medium">
                             Admin
                           </Badge>
                         )}
@@ -157,12 +157,7 @@ export function UserDetailSheet({
                 <div className="p-4 border-t bg-background/80 backdrop-blur-md shrink-0">
                   <Button
                     variant={selectedUser.is_active ? "destructive" : "default"}
-                    className={cn(
-                      "w-full h-9 text-xs font-medium transition-all active:scale-[0.98]",
-                      selectedUser.is_active
-                        ? "bg-red-500 hover:bg-red-600 text-white"
-                        : "bg-primary text-primary-foreground hover:bg-primary/90"
-                    )}
+                    className="w-full h-9 text-xs font-medium transition-all active:scale-[0.98]"
                     onClick={() => onStatusToggle(selectedUser)}
                   >
                     {selectedUser.is_active ? (
diff --git a/frontend/app/(main)/admin/users/components/user-filter-bar.tsx b/frontend/app/(main)/admin/users/components/user-filter-bar.tsx
index e3684ec5..7fd8205f 100644
--- a/frontend/app/(main)/admin/users/components/user-filter-bar.tsx
+++ b/frontend/app/(main)/admin/users/components/user-filter-bar.tsx
@@ -51,8 +51,8 @@ export function UserFilterBar() {
                 <>
                   <Separator orientation="vertical" className="mx-1" />
                   <Badge
-                    variant="secondary"
-                    className="text-[10px] h-3 px-1 rounded-full bg-primary text-primary-foreground"
+                    variant="default"
+                    className="text-[10px] h-3 px-1 rounded-full"
                   >
                     !
                   </Badge>
@@ -114,8 +114,8 @@ export function UserFilterBar() {
                 <>
                   <Separator orientation="vertical" className="mx-1" />
                   <Badge
-                    variant="secondary"
-                    className="text-[10px] h-3 px-1 rounded-full bg-primary text-primary-foreground"
+                    variant="default"
+                    className="text-[10px] h-3 px-1 rounded-full"
                   >
                     1
                   </Badge>