further break apart and use tailwind for style

Author: themisvaltinos

vscode/react/src/components/tablediff/ColumnStatsSection.tsx

@@ -1,5 +1,6 @@
 import { SectionToggle } from './SectionToggle'
-import { type TableDiffData, type SampleValue, themeColors } from './types'
+import { type TableDiffData, type SampleValue } from './types'
+import { twColors, twMerge } from './tailwind-utils'
 
 interface ColumnStatsSectionProps {
   columnStats: TableDiffData['row_diff']['column_stats']
@@ -14,9 +15,8 @@ interface StatHeaderProps {
 const StatHeader = ({ stat }: StatHeaderProps) => (
   <th
     key={stat}
-    className="text-left py-2 px-1 font-medium w-16"
+    className={twMerge('text-left py-2 px-1 font-medium w-16', twColors.textMuted)}
     title={stat}
-    style={{ color: themeColors.muted }}
   >
     {stat.length > 6 ? stat.slice(0, 6) + '..' : stat}
   </th>
@@ -28,9 +28,8 @@ interface StatCellProps {
 
 const StatCell = ({ value }: StatCellProps) => (
   <td
-    className="py-2 px-1 font-mono text-xs truncate"
+    className={twMerge('py-2 px-1 font-mono text-xs truncate', twColors.textMuted)}
     title={String(value)}
-    style={{ color: themeColors.muted }}
   >
     {typeof value === 'number'
       ? value.toFixed(1)
@@ -47,17 +46,11 @@ interface ColumnStatRowProps {
 
 const ColumnStatRow = ({ columnName, statsValue }: ColumnStatRowProps) => (
   <tr
-    className="transition-colors"
-    style={{
-      borderBottom: `1px solid ${themeColors.border}`,
-    }}
-    onMouseEnter={e => {
-      e.currentTarget.style.backgroundColor =
-        'var(--vscode-list-hoverBackground)'
-    }}
-    onMouseLeave={e => {
-      e.currentTarget.style.backgroundColor = 'transparent'
-    }}
+    className={twMerge(
+      'transition-colors border-b',
+      twColors.borderPanel,
+      twColors.bgHover
+    )}
   >
     <td
       className="py-2 pr-2 font-mono truncate"
@@ -94,32 +87,21 @@ export function ColumnStatsSection({
       id="columnStats"
       title="Column Statistics"
       badge={`${Object.keys(columnStats).length} columns`}
-      badgeStyle={{
-        backgroundColor: 'var(--vscode-input-background)',
-        color: 'var(--vscode-symbolIcon-classForeground, #9b59b6)',
-        borderColor: 'var(--vscode-symbolIcon-classForeground, #9b59b6)',
-      }}
+      badgeClassName={twMerge(
+        'px-2 py-1 text-xs rounded border',
+        twColors.bgInput,
+        'text-[var(--vscode-symbolIcon-classForeground,#9b59b6)]',
+        'border-[var(--vscode-symbolIcon-classForeground,#9b59b6)]'
+      )}
       expanded={expanded}
       onToggle={onToggle}
     >
       <div className="px-8 py-3">
         <div className="overflow-auto max-h-80">
           <table className="w-full text-xs table-fixed">
-            <thead
-              className="sticky top-0 z-10"
-              style={{
-                backgroundColor: 'var(--vscode-editor-background)',
-              }}
-            >
-              <tr
-                style={{
-                  borderBottom: `1px solid ${themeColors.border}`,
-                }}
-              >
-                <th
-                  className="text-left py-2 pr-2 font-medium w-28"
-                  style={{ color: themeColors.muted }}
-                >
+            <thead className={twMerge('sticky top-0 z-10', twColors.bgEditor)}>
+              <tr className={twMerge('border-b', twColors.borderPanel)}>
+                <th className={twMerge('text-left py-2 pr-2 font-medium w-28', twColors.textMuted)}>
                   Column
                 </th>
                 {statKeys.map(stat => (

vscode/react/src/components/tablediff/RowStatsSection.tsx

@@ -1,5 +1,6 @@
 import { SectionToggle } from './SectionToggle'
-import { type TableDiffData, themeColors } from './types'
+import { type TableDiffData } from './types'
+import { twColors, twMerge } from './tailwind-utils'
 
 interface RowStatsSectionProps {
   rowDiff: TableDiffData['row_diff']
@@ -28,60 +29,52 @@ export function RowStatsSection({
       id="rows"
       title="Row Statistics"
       badge={`${formatPercentage(fullMatchPct)} match rate`}
-      badgeStyle={{
-        backgroundColor: 'var(--vscode-input-background)',
-        color: themeColors.info,
-        borderColor: themeColors.info,
-      }}
+      badgeClassName={twMerge(
+        'px-2 py-1 text-xs rounded border',
+        twColors.bgInput,
+        twColors.textInfo,
+        twColors.borderInfo
+      )}
       expanded={expanded}
       onToggle={onToggle}
     >
       <div className="px-8 py-3 space-y-3">
         <div className="grid grid-cols-2 gap-4 text-xs">
           <div className="space-y-1">
             <div className="flex justify-between">
-              <span style={{ color: themeColors.success }}>✓ Full Matches</span>
+              <span className={twColors.textSuccess}>✓ Full Matches</span>
               <span className="font-medium">{formatCount(fullMatchCount)}</span>
             </div>
             <div className="flex justify-between">
-              <span style={{ color: themeColors.info }}>~ Partial Matches</span>
+              <span className={twColors.textInfo}>~ Partial Matches</span>
               <span className="font-medium">
                 {formatCount(partialMatchCount)}
               </span>
             </div>
           </div>
           <div className="space-y-1">
             <div className="flex justify-between">
-              <span style={{ color: themeColors.warning }}>+ Source Only</span>
+              <span className={twColors.textWarning}>+ Source Only</span>
               <span className="font-medium">{formatCount(sOnlyCount)}</span>
             </div>
             <div className="flex justify-between">
-              <span style={{ color: themeColors.error }}>- Target Only</span>
+              <span className={twColors.textError}>- Target Only</span>
               <span className="font-medium">{formatCount(tOnlyCount)}</span>
             </div>
           </div>
         </div>
         {/* Match rate progress bar */}
         <div className="mt-3 space-y-1">
-          <div
-            className="flex items-center gap-2 text-xs"
-            style={{ color: themeColors.muted }}
-          >
+          <div className={twMerge('flex items-center gap-2 text-xs', twColors.textMuted)}>
             <span>Match Rate</span>
             <span className="font-medium">
               {formatPercentage(fullMatchPct)}
             </span>
           </div>
-          <div
-            className="h-2 rounded-full overflow-hidden"
-            style={{ backgroundColor: 'var(--vscode-input-background)' }}
-          >
+          <div className={twMerge('h-2 rounded-full overflow-hidden', twColors.bgInput)}>
             <div
-              className="h-full transition-all duration-300"
-              style={{
-                width: `${fullMatchPct * 100}%`,
-                backgroundColor: themeColors.success,
-              }}
+              className={twMerge('h-full transition-all duration-300', twColors.textSuccess.replace('text-', 'bg-'))}
+              style={{ width: `${fullMatchPct * 100}%` }}
             />
           </div>
         </div>