improvement(ui): use chips for table job actions (#8082)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/run-status-control/run-status-control.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { memo } from 'react'
-import { Button } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { Loader, Square } from '@sim/emcn/icons'
 
 interface RunStatusControlProps {
@@ -38,15 +38,9 @@ export const RunStatusControl = memo(function RunStatusControl({
           </>
         )}
       </div>
-      <Button
-        variant='subtle'
-        className='py-1 text-caption'
-        onClick={onStopAll}
-        disabled={isStopping}
-      >
-        <Square className='mr-1.5 size-[14px]' />
+      <Chip leftIcon={Square} onClick={onStopAll} disabled={isStopping}>
         {isStopping ? 'Stopping…' : 'Stop all'}
-      </Button>
+      </Chip>
     </div>
   )
 })

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import {
-  Button,
+  Chip,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
@@ -64,20 +64,21 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
   return (
     <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
       <DropdownMenuTrigger asChild>
-        <Button variant='subtle' className='py-1 text-caption'>
-          {/* Aggregate state, mirroring the row iconography: spinner while anything runs, then
-              alert if any job failed, else a check. */}
-          {anyRunning ? (
-            <Loader animate className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
-          ) : anyFailed ? (
-            <CircleAlert className='mr-1.5 size-[14px] text-[var(--text-error)]' />
-          ) : (
-            <CircleCheck className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
-          )}
+        <Chip
+          leftAdornment={
+            anyRunning ? (
+              <Loader animate className='size-[14px] text-[var(--text-icon)]' />
+            ) : anyFailed ? (
+              <CircleAlert className='size-[14px] text-[var(--text-error)]' />
+            ) : (
+              <CircleCheck className='size-[14px] text-[var(--text-icon)]' />
+            )
+          }
+        >
           <span className='tabular-nums'>
             {done}/{total}
           </span>
-        </Button>
+        </Chip>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='min-w-[320px] max-w-[420px]'>
         {imports.map((row) => {