improvement(ui): use shared geometry for standard icon actions (#8153)

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

Author: BillLeoutsakosvl346

apps/sim/app/(interfaces)/chat/components/input/public-chat-action-button.tsx

@@ -4,14 +4,14 @@ import { Button } from '@sim/emcn'
 interface PublicChatActionButtonProps
   extends Omit<
     ComponentProps<typeof Button>,
-    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className'
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'className' | 'shape'
   > {
   variant: 'primary' | 'quiet'
   'aria-label': string
 }
 
 /** Public chat's circular composer action, retaining its primary and quiet palettes. */
 export const PublicChatActionButton = forwardRef<HTMLButtonElement, PublicChatActionButtonProps>(
-  (props, ref) => <Button {...props} ref={ref} className='size-[28px] rounded-full p-0' />
+  (props, ref) => <Button {...props} ref={ref} iconSize='regular' shape='round' />
 )
 PublicChatActionButton.displayName = 'PublicChatActionButton'

apps/sim/app/playground/page.tsx

@@ -172,7 +172,7 @@ export default function PlaygroundPage() {
                   aria-label='Go back'
                   variant='ghost'
                   onClick={() => router.back()}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   <ArrowLeft className='size-4' />
                 </Button>
@@ -187,7 +187,7 @@ export default function PlaygroundPage() {
                   aria-label={isDarkMode ? 'Light mode' : 'Dark mode'}
                   variant='default'
                   onClick={toggleDarkMode}
-                  className='size-8 p-0'
+                  iconSize='roomy'
                 >
                   {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
                 </Button>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx

@@ -282,9 +282,11 @@ export function ResizableImageView({ node, selected, editor, getPos }: ReactNode
           type='button'
           variant='ghost'
           size='icon'
+          iconSize={{ base: 'touch', sm: 'roomy' }}
+          iconPadding='sm'
           aria-label='Resize image'
           onPointerDown={startResize}
-          className='absolute right-0 bottom-0 flex size-10 cursor-nwse-resize touch-none items-end justify-end p-1 sm:size-8'
+          className='absolute right-0 bottom-0 cursor-nwse-resize touch-none items-end justify-end'
         >
           <span className='size-3 rounded-[3px] border border-[var(--bg)] bg-[var(--brand-secondary)]' />
         </Button>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.test.tsx

@@ -41,7 +41,8 @@ describe('ToolbarButton', () => {
     )
 
     const button = host.querySelector('button[aria-label="Add to Chat"]')
-    expect(button?.className).toContain('size-[28px]')
+    expect(button?.classList.contains('size-10')).toBe(true)
+    expect(button?.classList.contains('sm:size-7')).toBe(true)
     expect(button?.querySelector('svg')?.className.baseVal).toContain('size-[12px]')
   })
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/toolbar-button.tsx

@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps } from 'react'
-import { Button, cn, Tooltip } from '@sim/emcn'
+import { Button, Tooltip } from '@sim/emcn'
 
 interface ToolbarButtonProps {
   /** Any SVG icon component, e.g. from `@sim/emcn/icons`. */
@@ -28,17 +28,15 @@ export function ToolbarButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isActive ? 'active' : 'ghost'}
+          variant={isActive ? 'active' : 'quiet'}
           size='icon'
+          iconSize={{ base: 'touch', sm: 'regular' }}
           aria-label={label}
           aria-pressed={isActive}
           disabled={disabled}
           onPointerDown={(event) => event.preventDefault()}
           onClick={onClick}
-          className={cn(
-            'size-10 focus-visible:bg-[var(--surface-hover)] sm:size-[28px]',
-            !isActive && 'hover-hover:bg-[var(--surface-hover)]'
-          )}
+          className='focus-visible:bg-[var(--surface-hover)]'
         >
           <Icon className={iconSize === 'compact' ? 'size-[12px]' : 'size-[14px]'} />
         </Button>

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

@@ -72,7 +72,7 @@ describe('MicButton', () => {
     const waveform = container.querySelector('svg[viewBox="0 0 18 18"]')
     const bars = waveform?.querySelectorAll('line')
 
-    expect(button?.className).toContain('size-[28px]')
+    expect(button?.classList.contains('size-7')).toBe(true)
     expect(button?.className).toContain('overflow-hidden')
     expect(button?.className).toContain('rounded-full')
     expect(waveform?.classList.contains('size-[18px]')).toBe(true)

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

@@ -89,15 +89,13 @@ export const MicButton = memo(function MicButton({
       <Tooltip.Trigger asChild>
         <Button
           type='button'
-          variant={isListening ? 'active' : 'ghost'}
+          variant={isListening ? 'active' : 'quiet'}
+          iconSize='regular'
+          shape='round'
           onClick={onToggle}
           aria-label={isListening ? 'Stop listening' : 'Voice input'}
           aria-pressed={isListening}
-          className={cn(
-            'relative size-[28px] overflow-hidden rounded-full p-0 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)]'
-          )}
+          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'
         >
           <span
             className={cn(