Browse Source

🎨 style(card-table): replace Tailwind border‐gray util with Semi UI border variable for consistent theming

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.
t0ng7u 7 months ago
parent
commit
26644bfd1e
1 changed files with 3 additions and 2 deletions
  1. 3 2
      web/src/components/common/ui/CardTable.js

+ 3 - 2
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}