improvement(ui): use chips for ordinary product actions (#8081)

* improvement(ui): use chips for ordinary product actions

* improvement(ui): use shared chip alignment

* improvement(ui): use shared search action sizes (#8160)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Button,
+  Chip,
   ChipCombobox,
   ChipConfirmModal,
   Columns2,
@@ -2057,13 +2057,9 @@ function FilesContent() {
           </div>
         )}
         {hasActiveFilters && (
-          <Button
-            variant='ghost'
-            onClick={clearFileFilters}
-            className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
-          >
+          <Chip fullWidth onClick={clearFileFilters} align='center'>
             Clear all filters
-          </Button>
+          </Chip>
         )}
       </div>
     )

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -14,6 +14,7 @@ import {
 import {
   Button,
   Calendar,
+  Chip,
   ChipCombobox,
   type ComboboxOption,
   cn,
@@ -1584,13 +1585,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
       </div>
 
       {filtersActive && (
-        <Button
-          variant='active'
-          onClick={handleClearFilters}
-          className='h-[32px] w-full rounded-md'
-        >
+        <Chip variant='border-shadow' fullWidth onClick={handleClearFilters} align='center'>
           Clear All Filters
-        </Button>
+        </Chip>
       )}
     </div>
   )

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

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

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

@@ -3,7 +3,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipCopyInput,
   ChipInput,
   ChipModalTabs,
@@ -434,14 +434,13 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
             className='w-[160px]'
           />
         </div>
-        <Button
+        <Chip
           variant='primary'
-          className='h-[32px]'
           onClick={handleGenerate}
           disabled={generateLicense.isPending || !newName.trim()}
         >
           {generateLicense.isPending ? 'Generating...' : 'Generate'}
-        </Button>
+        </Chip>
       </div>
 
       {generatedKey && (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -575,12 +575,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
           onMouseDown={(event) => event.stopPropagation()}
         >
           <span className='text-[var(--text-muted)] text-xs'>{matchCountLabel}</span>
-          <Button
-            aria-label='Close search'
-            variant='ghost'
-            className='size-[26px] p-0'
-            onClick={close}
-          >
+          <Button aria-label='Close search' variant='ghost' iconSize='regular' onClick={close}>
             <X className='size-[14px]' />
           </Button>
         </div>
@@ -589,7 +584,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
       <div className='grid grid-cols-[2rem_minmax(0,1fr)_2rem_2rem] items-start gap-1.5'>
         <Button
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           aria-label={isReplaceExpanded ? 'Hide replace controls' : 'Show replace controls'}
           onClick={() => setIsReplaceExpanded((expanded) => !expanded)}
         >
@@ -614,7 +609,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
         <Button
           aria-label='Previous match'
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(-1)}
         >
@@ -623,7 +618,7 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
         <Button
           aria-label='Next match'
           variant='ghost'
-          className='size-8 p-0'
+          iconSize='roomy'
           disabled={hydratedMatches.length === 0}
           onClick={() => handleMoveActiveMatch(1)}
         >

apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx

@@ -2,7 +2,15 @@
 
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, OverflowText, Tooltip } from '@sim/emcn'
+import {
+  Chip,
+  chipBorderShadowRing,
+  chipContentLabelClass,
+  chipGeometryClass,
+  cn,
+  OverflowText,
+  Tooltip,
+} from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
@@ -295,23 +303,21 @@ export function Preview({
         <div className='absolute top-3 left-[12px] z-20 flex items-center gap-1.5'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={handleGoBack}
-                className='flex h-[28px] gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs hover-hover:bg-[var(--surface-4)]'
-              >
-                <ArrowLeft className='size-[12px]' />
-                <span className='text-caption'>Back</span>
-              </Button>
+              <Chip variant='border-shadow' leftIcon={ArrowLeft} onClick={handleGoBack}>
+                Back
+              </Chip>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-xs'>
-              <OverflowText
-                label={currentWorkflowName}
-                className='text-[var(--text-secondary)] text-caption'
-              />
+            <div
+              className={cn(
+                chipGeometryClass,
+                chipBorderShadowRing,
+                'inline-flex max-w-[200px] bg-[var(--surface-2)]'
+              )}
+            >
+              <OverflowText label={currentWorkflowName} className={chipContentLabelClass} />
             </div>
           )}
         </div>