From 34a9ca50e53986694cabe7a671754dc57f15539a Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Fri, 29 May 2026 16:27:05 -0700
Subject: [PATCH 1/2] improvement(enrichments): align enrichments sidebar with
 design system

---
 .../enrichments-sidebar/enrichment-config.tsx |  3 +--
 .../enrichments-sidebar.tsx                   | 19 ++++++++-----------
 apps/sim/enrichments/work-email/work-email.ts |  2 +-
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index 2e02179785..257c66861a 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
-import { X } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -15,7 +14,7 @@ import {
   Switch,
   toast,
 } from '@/components/emcn'
-import { ArrowLeft } from '@/components/emcn/icons'
+import { ArrowLeft, X } from '@/components/emcn/icons'
 import type { AddWorkflowGroupBodyInput } from '@/lib/api/contracts/tables'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib/table'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index b77fc386db..9de6ba632e 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { X } from 'lucide-react'
 import { Button, Input } from '@/components/emcn'
-import { Search } from '@/components/emcn/icons'
+import { Search, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
 import { ALL_ENRICHMENTS } from '@/enrichments'
@@ -121,15 +120,14 @@ function EnrichmentsSidebarBody({
     <div className='flex h-full flex-col'>
       <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichments</h2>
-        <Button
-          variant='ghost'
-          size='sm'
+        <button
+          type='button'
           onClick={onClose}
-          className='!p-1 size-7 flex-none'
+          className='flex size-7 flex-none items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-primary)]'
           aria-label='Close'
         >
           <X className='size-[14px]' />
-        </Button>
+        </button>
       </div>
 
       <div className='px-2 pt-3'>
@@ -155,11 +153,10 @@ function EnrichmentsSidebarBody({
               const Icon = enrichment.icon
               return (
                 <li key={enrichment.id}>
-                  <Button
-                    variant='ghost'
+                  <button
                     type='button'
                     onClick={() => setSelected(enrichment)}
-                    className='flex w-full items-start justify-start gap-2.5 rounded-md px-2 py-2 text-left hover-hover:bg-[var(--surface-3)]'
+                    className='flex w-full items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors hover-hover:bg-[var(--surface-hover)]'
                   >
                     <Icon className='mt-0.5 size-[14px] flex-none text-[var(--text-icon)]' />
                     <span className='flex min-w-0 flex-col gap-0.5'>
@@ -170,7 +167,7 @@ function EnrichmentsSidebarBody({
                         {enrichment.description}
                       </span>
                     </span>
-                  </Button>
+                  </button>
                 </li>
               )
             })}
diff --git a/apps/sim/enrichments/work-email/work-email.ts b/apps/sim/enrichments/work-email/work-email.ts
index 4166217a1c..2076e18eb4 100644
--- a/apps/sim/enrichments/work-email/work-email.ts
+++ b/apps/sim/enrichments/work-email/work-email.ts
@@ -1,5 +1,5 @@
 import { filterUndefined } from '@sim/utils/object'
-import { Mail } from 'lucide-react'
+import { Mail } from '@/components/emcn/icons'
 import { normalizeDomain, splitName, str, toolProvider } from '@/enrichments/providers'
 import type { EnrichmentConfig } from '@/enrichments/types'
 

From d76ffe2f365d666fe7fd32fea1f2abde3f3cccd3 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Fri, 29 May 2026 16:34:37 -0700
Subject: [PATCH 2/2] fix(enrichments): consistent close button pattern and fix
 url link hover

---
 .../enrichments-sidebar/enrichments-sidebar.tsx       | 11 +++++------
 .../components/table-grid/cells/cell-render.tsx       |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 9de6ba632e..a2575b4b43 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, Input } from '@/components/emcn'
+import { Input } from '@/components/emcn'
 import { Search, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
@@ -74,15 +74,14 @@ function EnrichmentsSidebarBody({
       <div className='flex h-full flex-col'>
         <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
           <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichment</h2>
-          <Button
-            variant='ghost'
-            size='sm'
+          <button
+            type='button'
             onClick={onClose}
-            className='!p-1 size-7 flex-none'
+            className='flex size-7 flex-none items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-primary)]'
             aria-label='Close'
           >
             <X className='size-[14px]' />
-          </Button>
+          </button>
         </div>
         <div className='flex flex-1 items-center justify-center px-6 text-center'>
           <p className='text-[var(--text-tertiary)] text-small'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
index 91cabea799..fe6a6bfd3d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx
@@ -320,7 +320,7 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
             target='_blank'
             rel='noopener noreferrer'
             className={cn(
-              'min-w-0 overflow-clip text-ellipsis text-[var(--text-primary)] underline underline-offset-2 hover:opacity-70',
+              'min-w-0 overflow-clip text-ellipsis text-[var(--text-primary)] underline underline-offset-2 transition-colors hover-hover:text-[var(--text-secondary)]',
               isEditing && 'pointer-events-none'
             )}
             onClick={(e) => e.stopPropagation()}