improvement(ui): reuse inline and overlay workflow actions

Author: waleedlatif1

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()}
                     >

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

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>