From b61ee9b088f1db1792cedc9a89ae758b3e9e2822 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 4 Jun 2026 19:02:53 +0800
Subject: [PATCH] feat(web): align AwoooP controls with WOOO radius tokens

---
 .../src/app/[locale]/awooop/approvals/page.tsx   |  4 ++--
 apps/web/src/app/[locale]/awooop/runs/page.tsx   | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/awooop/approvals/page.tsx b/apps/web/src/app/[locale]/awooop/approvals/page.tsx
index 9d4271f6..881e5611 100644
--- a/apps/web/src/app/[locale]/awooop/approvals/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/approvals/page.tsx
@@ -1390,7 +1390,7 @@ export default function ApprovalsPage() {
           <button
             onClick={() => { setLoading(true); fetchApprovals(); }}
             disabled={loading}
-            className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition disabled:opacity-50"
+            className="flex items-center gap-2 rounded-button px-3 py-2 text-sm text-muted-foreground transition hover:bg-accent hover:text-foreground disabled:opacity-50"
             aria-label={t("page.refreshNow")}
           >
             <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} aria-hidden="true" />
@@ -1454,7 +1454,7 @@ export default function ApprovalsPage() {
           <select
             value={evidenceFilter}
             onChange={(e) => setEvidenceFilter(e.target.value as "" | RemediationStatus)}
-            className="appearance-none pl-3 pr-8 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50 cursor-pointer"
+            className="appearance-none rounded-button border border-border bg-background py-1.5 pl-3 pr-8 text-sm text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
             aria-label={tEvidence("filters.label")}
           >
             <option value="">{tEvidence("filters.all")}</option>
diff --git a/apps/web/src/app/[locale]/awooop/runs/page.tsx b/apps/web/src/app/[locale]/awooop/runs/page.tsx
index d9f9f77d..78242791 100644
--- a/apps/web/src/app/[locale]/awooop/runs/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/runs/page.tsx
@@ -955,7 +955,7 @@ function RunStateBadge({ state }: { state: RunState }) {
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-md text-xs font-mono font-medium border",
+        "inline-flex items-center gap-1.5 rounded-wooo-sm border px-2.5 py-0.5 text-xs font-mono font-medium",
         config.bg,
         config.text,
         config.border
@@ -4161,7 +4161,7 @@ export default function RunsPage() {
               fetchRuns({ refresh: true });
             }}
             disabled={loading}
-            className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition disabled:opacity-50"
+            className="flex items-center gap-2 rounded-button px-3 py-2 text-sm text-muted-foreground transition hover:bg-accent hover:text-foreground disabled:opacity-50"
             aria-label="立即重新整理"
           >
             <RefreshCw className={cn("w-4 h-4", loading && "animate-spin")} aria-hidden="true" />
@@ -4312,7 +4312,7 @@ export default function RunsPage() {
           <select
             value={projectFilter}
             onChange={(e) => { setProjectFilter(e.target.value); setPage(1); }}
-            className="appearance-none pl-3 pr-8 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50 cursor-pointer"
+            className="appearance-none rounded-button border border-border bg-background py-1.5 pl-3 pr-8 text-sm text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
             aria-label="選擇租戶"
           >
             <option value="">所有租戶</option>
@@ -4330,7 +4330,7 @@ export default function RunsPage() {
           <select
             value={statusFilter}
             onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
-            className="appearance-none pl-3 pr-8 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50 cursor-pointer"
+            className="appearance-none rounded-button border border-border bg-background py-1.5 pl-3 pr-8 text-sm text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
             aria-label="選擇狀態"
           >
             <option value="">所有狀態</option>
@@ -4351,7 +4351,7 @@ export default function RunsPage() {
               setEvidenceFilter(e.target.value as "" | RemediationStatus);
               setPage(1);
             }}
-            className="appearance-none pl-3 pr-8 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50 cursor-pointer"
+            className="appearance-none rounded-button border border-border bg-background py-1.5 pl-3 pr-8 text-sm text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
             aria-label={tEvidence("filters.label")}
           >
             <option value="">{tEvidence("filters.all")}</option>
@@ -4372,7 +4372,7 @@ export default function RunsPage() {
               setCallbackFilter(e.target.value as "" | CallbackReplyStatus);
               setPage(1);
             }}
-            className="appearance-none pl-3 pr-8 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50 cursor-pointer"
+            className="appearance-none rounded-button border border-border bg-background py-1.5 pl-3 pr-8 text-sm text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
             aria-label={tCallback("filters.label")}
           >
             <option value="">{tCallback("filters.all")}</option>
@@ -4392,7 +4392,7 @@ export default function RunsPage() {
             setIncidentFilter(e.target.value.trim().toUpperCase());
             setPage(1);
           }}
-          className="min-w-[260px] rounded-lg border border-border bg-background px-3 py-1.5 font-mono text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
+          className="min-w-[260px] rounded-button border border-border bg-background px-3 py-1.5 font-mono text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-brand-accent/50"
           aria-label={tEvidence("filters.incidentLabel")}
           placeholder={tEvidence("filters.incidentPlaceholder")}
         />
@@ -4400,7 +4400,7 @@ export default function RunsPage() {
 
       {/* Error State */}
       {error && (
-        <div className="flex items-start gap-3 p-4 bg-red-900/20 border border-red-800/40 rounded-lg">
+        <div className="flex items-start gap-3 rounded-card border border-red-800/40 bg-red-900/20 p-4">
           <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" aria-hidden="true" />
           <div>
             <p className="text-sm font-medium text-red-300">無法載入 Run 資料</p>