refactor(ui): remove styles already supplied by EMCN controls (#7979)

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

Author: BillLeoutsakosvl346

apps/sim/app/(auth)/components/constants.ts

@@ -14,4 +14,4 @@ export const AUTH_CONTROL_HEIGHT = 'h-9'
  * under `justify-center` (the landing `HeroCta` idiom). Height-only inputs use
  * {@link AUTH_CONTROL_HEIGHT}; buttons compose this on top of it.
  */
-export const AUTH_BUTTON_CLASS = `${AUTH_CONTROL_HEIGHT} w-full justify-center [&>span]:flex-none`
+export const AUTH_BUTTON_CLASS = `${AUTH_CONTROL_HEIGHT} justify-center [&>span]:flex-none`

apps/sim/app/(interfaces)/chat/components/message-container/message-container.tsx

@@ -72,7 +72,7 @@ export function ChatMessageContainer({
           <Button
             onClick={scrollToBottom}
             size='sm'
-            className='gap-1 rounded-full px-3 py-1 shadow-medium'
+            className='gap-1 rounded-full px-3 shadow-medium'
           >
             <ArrowDown className='size-3.5' />
             <span className='sr-only'>Scroll to bottom</span>

apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx

@@ -172,7 +172,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
         variant='default'
         onClick={handleDownload}
         disabled={isDownloading}
-        className='group flex h-auto w-[200px] items-center gap-2 rounded-lg px-3 py-2'
+        className='group flex h-auto w-[200px] gap-2 rounded-lg px-3 py-2'
       >
         <div className='flex size-8 shrink-0 items-center justify-center'>{renderIcon()}</div>
         <div className='min-w-0 flex-1 text-left'>

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -14,7 +14,7 @@ import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
 import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
 import { useVoiceInput } from '@/hooks/use-voice-input'
 
-const SEND_BUTTON_BASE = 'size-[28px] rounded-full border-0 p-0 transition-colors'
+const SEND_BUTTON_BASE = 'size-[28px] rounded-full border-0 p-0'
 const SEND_BUTTON_ACTIVE =
   'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
 const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'

apps/sim/app/o/[organizationId]/search/search.tsx

@@ -25,7 +25,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useVoiceInput } from '@/hooks/use-voice-input'
 
-const SUBMIT_BUTTON_BASE = 'size-[28px] shrink-0 rounded-full border-0 p-0 transition-colors'
+const SUBMIT_BUTTON_BASE = 'size-[28px] shrink-0 rounded-full border-0 p-0'
 const SUBMIT_BUTTON_ACTIVE =
   'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
 const SUBMIT_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'

apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx

@@ -19,7 +19,7 @@ import { renderMoveOptions } from '@/app/workspace/[workspaceId]/components/fold
 /** Shared chrome for every action button, so the bar reads as one control strip. */
 const ACTION_BUTTON_CLASS = cn(
   chipFilledFillTokens,
-  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]'
 )
 
 interface ActionButtonProps {

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -539,8 +539,8 @@ const Pagination = memo(function Pagination({
                 variant='ghost'
                 onClick={() => onPageChange(page)}
                 className={cn(
-                  'h-auto p-0 text-sm transition-colors hover-hover:bg-transparent hover-hover:text-[var(--text-body)]',
-                  page === currentPage ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
+                  'h-auto p-0 text-sm hover-hover:bg-transparent hover-hover:text-[var(--text-body)]',
+                  page === currentPage ? 'text-[var(--text-body)]' : ''
                 )}
               >
                 {page}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts

@@ -97,7 +97,7 @@ export const SCROLLER_CLASSES = cn(
   '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
 )
 
-export const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
+export const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0'
 export const SEND_BUTTON_ACTIVE =
   'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
 export const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx

@@ -6,7 +6,7 @@ import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/provide
 /** One source of truth for the button chrome, so the three actions read as one control strip. */
 const ACTION_BUTTON_CLASS = cn(
   chipFilledFillTokens,
-  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]'
 )
 
 interface ActionBarProps {

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx

@@ -323,7 +323,7 @@ const TraceTreeRow = memo(function TraceTreeRow({
           <Button
             type='button'
             variant='ghost'
-            className='size-[14px] shrink-0 p-0 text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
+            className='size-[14px] shrink-0 p-0 text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-4)]'
             onClick={(e) => {
               e.stopPropagation()
               onToggleExpand(id)
@@ -512,7 +512,7 @@ function DetailCodeSection({
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
+                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='size-[10px] text-[var(--text-success)]' />
@@ -533,7 +533,7 @@ function DetailCodeSection({
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
+                      className='size-[20px] cursor-pointer border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='size-[10px]' />
                     </Button>