From 08b4f432f1af1744e6a01ef374ffc4a7f46eedab Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 14:12:42 -0700
Subject: [PATCH] improvement(ui): reuse inline and overlay workflow actions

---
 .../components/general/components/versions.tsx    | 10 +++-------
 .../editor/components/sub-block/sub-block.tsx     |  3 ++-
 .../workflow/workflow-preview-action.tsx          | 15 +++++++--------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index 2245b6a3647..00c7e36830a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -329,12 +329,8 @@ export function Versions({
                   <Tooltip.Trigger asChild>
                     <Button
                       aria-label={v.description ? 'Edit description' : 'Add description'}
-                      variant='ghost'
-                      iconPadding='sm'
-                      className={cn(
-                        !v.description &&
-                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
-                      )}
+                      variant={v.description ? 'ghost' : 'ghost-secondary'}
+                      size='inline'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleOpenDescriptionModal(v.version)
@@ -359,7 +355,7 @@ export function Versions({
                     <Button
                       aria-label='Version actions'
                       variant='ghost'
-                      iconPadding='sm'
+                      size='inline'
                       disabled={isPromotingVersion}
                       onClick={(e) => e.stopPropagation()}
                     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 4795928d1c6..8512fce1f95 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -302,7 +302,8 @@ const renderLabel = (
             {!wandState.isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 py-0 text-xs'
+                size='inline'
+                className='-my-1'
                 onClick={wandState.onSearchClick}
               >
                 Generate
diff --git a/apps/sim/components/workflow/workflow-preview-action.tsx b/apps/sim/components/workflow/workflow-preview-action.tsx
index e372a7bf4e3..96ee8275afd 100644
--- a/apps/sim/components/workflow/workflow-preview-action.tsx
+++ b/apps/sim/components/workflow/workflow-preview-action.tsx
@@ -1,29 +1,28 @@
 'use client'
 
 import { type ComponentProps, forwardRef } from 'react'
-import { Button, Tooltip } from '@sim/emcn'
+import { OverlayActionButton, Tooltip } from '@sim/emcn'
 
 interface WorkflowPreviewActionProps
   extends Omit<
-    ComponentProps<typeof Button>,
-    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type' | 'className'
+    ComponentProps<typeof OverlayActionButton>,
+    'size' | 'type' | 'className' | 'shape'
   > {
   'aria-label': string
 }
 
-/** Solid corner action shared by embedded workflow previews. */
+/** Overlay corner action shared by embedded workflow previews. */
 export const WorkflowPreviewAction = forwardRef<HTMLButtonElement, WorkflowPreviewActionProps>(
   ({ 'aria-label': label, ...props }, ref) => (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <Button
+        <OverlayActionButton
           {...props}
           ref={ref}
           type='button'
           aria-label={label}
-          variant='ghost'
-          iconSize='compact-fixed'
-          className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
+          size='md'
+          className='absolute right-[6px] bottom-1.5 z-10'
         />
       </Tooltip.Trigger>
       <Tooltip.Content side='top'>{label}</Tooltip.Content>