improvement(enrichments): align enrichments sidebar with design system (#4801)

* improvement(enrichments): align enrichments sidebar with design system

* fix(enrichments): consistent close button pattern and fix url link hover

Author: waleedlatif1

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'

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 { 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'
 import { ALL_ENRICHMENTS } from '@/enrichments'
@@ -75,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'>
@@ -121,15 +119,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 +152,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 +166,7 @@ function EnrichmentsSidebarBody({
                         {enrichment.description}
                       </span>
                     </span>
-                  </Button>
+                  </button>
                 </li>
               )
             })}

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

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'