From 26644bfd1e45c424105fcd9033f4b86cbc70add4 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 19 Jul 2025 02:49:14 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(card-table):=20replace=20T?=
 =?UTF-8?q?ailwind=20border=E2=80=90gray=20util=20with=20Semi=20UI=20borde?=
 =?UTF-8?q?r=20variable=20for=20consistent=20theming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detailed changes
1. Removed `border-gray-200` Tailwind utility from two `<div>` elements in `web/src/components/common/ui/CardTable.js`.
2. Added inline style `borderColor: 'var(--semi-color-border)'` while keeping existing `border-b border-dashed` classes.
3. Ensures all borders use Semi UI’s design token, keeping visual consistency across light/dark themes and custom palettes.

Why
• Aligns component styling with Semi UI’s design system.
• Avoids hard-coded colors and prevents theme mismatch issues on future updates.

No breaking changes; visual update only.
---
 web/src/components/common/ui/CardTable.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/common/ui/CardTable.js b/web/src/components/common/ui/CardTable.js
index b90f38af..421de9cc 100644
--- a/web/src/components/common/ui/CardTable.js
+++ b/web/src/components/common/ui/CardTable.js
@@ -73,7 +73,7 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
             }
 
             return (
-              <div key={idx} className="flex justify-between items-center py-1 border-b last:border-b-0 border-dashed border-gray-200">
+              <div key={idx} className="flex justify-between items-center py-1 border-b last:border-b-0 border-dashed" style={{ borderColor: 'var(--semi-color-border)' }}>
                 <Skeleton.Title active style={{ width: 80, height: 14 }} />
                 <Skeleton.Title active style={{ width: `${50 + (idx % 3) * 10}%`, maxWidth: 180, height: 14 }} />
               </div>
@@ -142,7 +142,8 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
               return (
                 <div
                   key={col.key || colIdx}
-                  className="flex justify-between items-start py-1 border-b last:border-b-0 border-dashed border-gray-200"
+                  className="flex justify-between items-start py-1 border-b last:border-b-0 border-dashed"
+                  style={{ borderColor: 'var(--semi-color-border)' }}
                 >
                   <span className="font-medium text-gray-600 mr-2 whitespace-nowrap select-none">
                     {title}