fix(ui): preserve icon action parity and address review feedback

Author: Bill Leoutsakos

apps/sim/app/_styles/globals.css

@@ -1358,10 +1358,6 @@ input[type="search"]::-ms-clear {
     background-color: transparent !important;
     color: var(--text-tertiary) !important;
   }
-
-  html[data-panel-active-tab] .panel-container [data-tab-button] span {
-    color: inherit !important;
-  }
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button/mic-button.tsx

@@ -89,13 +89,17 @@ export const MicButton = memo(function MicButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isListening ? 'active' : 'quiet'}
+          variant={isListening ? 'active' : 'ghost'}
           iconSize='regular'
           shape='round'
           onClick={onToggle}
           aria-label={isListening ? 'Stop listening' : 'Voice input'}
           aria-pressed={isListening}
-          className='relative overflow-hidden transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100'
+          className={cn(
+            'relative overflow-hidden transition-[background-color,color,scale] duration-150 ease-out active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100',
+            !isListening &&
+              'text-[var(--text-icon)] hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-icon)]'
+          )}
         >
           <span
             className={cn(

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -391,7 +391,7 @@ export function DocumentTagsModal({
                   typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                   detail={formatValueForDisplay(tag.value, tag.fieldType)}
                   truncateDetail
-                  removeLabel='Remove tag'
+                  removeLabel={`Remove ${tag.displayName}`}
                   onRemove={(e) => {
                     e.stopPropagation()
                     handleRemoveTag(index)

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -280,7 +280,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
                       </>
                     }
-                    removeLabel='Delete Tag'
+                    removeLabel={`Delete ${tag.displayName}`}
                     onRemove={(e) => {
                       e.stopPropagation()
                       handleDeleteTagClick(tag)

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.test.tsx

@@ -28,7 +28,7 @@ describe('KnowledgeTagRow actions', () => {
           typeLabel='Text'
           detail='3 documents'
           activateLabel='View documents for Customer'
-          removeLabel='Delete tag'
+          removeLabel='Delete Customer'
           onActivate={onActivate}
           onRemove={onRemove}
         />
@@ -40,6 +40,7 @@ describe('KnowledgeTagRow actions', () => {
     expect(buttons[0].contains(buttons[1])).toBe(false)
     expect(buttons[0].getAttribute('type')).toBe('button')
     expect(buttons[0].getAttribute('aria-label')).toBe('View documents for Customer')
+    expect(buttons[1].getAttribute('aria-label')).toBe('Delete Customer')
 
     act(() => buttons[0].click())
     expect(onActivate).toHaveBeenCalledTimes(1)

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx

@@ -106,7 +106,7 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
           {file.type}
           {file.version === undefined ? '' : ` · v${file.version}`}
         </span>
-        <Button variant='ghost' size='inline' onClick={handleDownload}>
+        <Button variant='ghost' size='inline' onClick={handleDownload} className='text-xs'>
           <Download className='mr-1 size-[10px]' />
           Download
         </Button>

apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx

@@ -443,8 +443,9 @@ export function Admin() {
                     Page {currentPage} of {totalPages} ({usersData.total} users)
                   </span>
                   <div className='flex gap-1'>
-                    <Chip
-                      variant='border-shadow'
+                    <Button
+                      variant='active'
+                      className='h-[28px] text-caption'
                       onClick={() =>
                         setAdminParams((prev) => ({
                           offset: Math.max(0, prev.offset - PAGE_SIZE),
@@ -453,16 +454,17 @@ export function Admin() {
                       disabled={usersOffset === 0 || usersLoading}
                     >
                       Previous
-                    </Chip>
-                    <Chip
-                      variant='border-shadow'
+                    </Button>
+                    <Button
+                      variant='active'
+                      className='h-[28px] text-caption'
                       onClick={() =>
                         setAdminParams((prev) => ({ offset: prev.offset + PAGE_SIZE }))
                       }
                       disabled={usersOffset + PAGE_SIZE >= (usersData?.total ?? 0) || usersLoading}
                     >
                       Next
-                    </Chip>
+                    </Button>
                   </div>
                 </div>
               )}

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx

@@ -763,8 +763,7 @@ export function McpServerFormModal({
               type='button'
               variant='ghost'
               onClick={() => setShowAdvanced((v) => !v)}
-              size='inline'
-              className='gap-1 self-start'
+              className='gap-1 self-start py-0 text-small'
             >
               {showAdvanced ? (
                 <ChevronDown className='size-[14px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx

@@ -72,8 +72,11 @@ export const AddRowButton = React.memo(function AddRowButton({
     <Button
       type='button'
       variant='ghost'
-      size='inline'
-      className={cn('gap-2', blockedReason && 'cursor-not-allowed opacity-50')}
+      size='sm'
+      className={cn(
+        'h-[20px] gap-2 p-0 text-[var(--text-body)]',
+        blockedReason && 'cursor-not-allowed opacity-50'
+      )}
       aria-disabled={blockedReason ? true : undefined}
       onClick={blockedReason ? undefined : onClick}
     >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx

@@ -97,10 +97,10 @@ export function GroupedCheckboxList({
   const noneSelected = selectedValues.length === 0
 
   useEffect(() => {
-    if (activeSearchTarget?.subBlockId === subBlockId) {
+    if (!isPreview && activeSearchTarget?.subBlockId === subBlockId) {
       setOpen(true)
     }
-  }, [activeSearchTarget, subBlockId])
+  }, [activeSearchTarget, isPreview, subBlockId])
 
   useEffect(() => {
     if (!open || activeSearchTarget?.subBlockId !== subBlockId) return
@@ -119,7 +119,8 @@ export function GroupedCheckboxList({
         leftAdornment={
           <ManageWorkspace className='size-4 shrink-0 opacity-50' data-preview-full-opacity />
         }
-        disabled={disabled}
+        disabled={disabled || isPreview}
+        data-preview-full-opacity={isPreview || undefined}
         onClick={() => setOpen(true)}
         rightAdornment={
           <SelectedCountDisplay
@@ -131,7 +132,12 @@ export function GroupedCheckboxList({
       >
         Configure PII Types
       </Chip>
-      <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
+      <ChipModal
+        open={open && !isPreview}
+        onOpenChange={setOpen}
+        srTitle='Select PII Types to Detect'
+        size='lg'
+      >
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
         <ChipModalBody onWheel={(e) => e.stopPropagation()}>
           <ChipModalField