Skip to content

Commit eaefa56

Browse files
waleedlatif1waleedlatif1
committed
feat(knowledge): align connector UI with integrations page styling
- ConnectorTypeCard now matches integration rows: brand-colored rounded-xl tile, ArrowRight, title/subtitle hierarchy - ConnectorCard icon upgraded from flat surface-4 to branded tile (white icon on brand bg, graceful fallback) - Connector header badges use chipVariants instead of custom Button classes - Add-connector search input aligned to integrations style (h-[30px], rounded-lg, border-1)
1 parent 7b32a85 commit eaefa56

3 files changed

Lines changed: 56 additions & 26 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ChipModalBody,
2020
ChipModalFooter,
2121
ChipModalHeader,
22+
chipVariants,
2223
Input,
2324
Loader,
2425
Tooltip,
@@ -932,15 +933,13 @@ export function KnowledgeBase({
932933
const def = CONNECTOR_REGISTRY[connector.connectorType]
933934
const ConnectorIcon = def?.icon
934935
return (
935-
<Button
936+
<button
936937
key={connector.id}
937938
type='button'
938-
variant='ghost'
939-
size='sm'
940939
onClick={() => setShowConnectorsModal(true)}
941-
className='h-7 max-w-[180px] shrink-0 justify-start gap-1.5 rounded-lg border border-[var(--border-muted)] bg-[var(--surface-2)] px-2 text-[var(--text-secondary)] text-caption hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
940+
className={cn(chipVariants({ variant: 'filled', flush: true }), 'max-w-[180px]')}
942941
>
943-
<span className='relative flex size-4 flex-shrink-0 items-center justify-center'>
942+
<span className='relative flex size-[14px] flex-shrink-0 items-center justify-center'>
944943
{connector.status === 'syncing' ? (
945944
<Loader className='size-[14px]' animate />
946945
) : (
@@ -959,8 +958,10 @@ export function KnowledgeBase({
959958
/>
960959
)}
961960
</span>
962-
<span className='truncate'>{def?.name || connector.connectorType}</span>
963-
</Button>
961+
<span className='truncate text-[var(--text-body)]'>
962+
{def?.name || connector.connectorType}
963+
</span>
964+
</button>
964965
)
965966
})}
966967
</>

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
44
import { ArrowLeft, ArrowLeftRight, Info, Plus, Search } from 'lucide-react'
55
import { useParams } from 'next/navigation'
66
import {
7+
ArrowRight,
78
Button,
89
ButtonGroup,
910
ButtonGroupItem,
@@ -22,6 +23,7 @@ import {
2223
Tooltip,
2324
} from '@/components/emcn'
2425
import { getSubscriptionAccessState } from '@/lib/billing/client'
26+
import { cn } from '@/lib/core/utils/cn'
2527
import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
2628
import { consumeOAuthReturnContext } from '@/lib/credentials/client-state'
2729
import {
@@ -36,6 +38,7 @@ import { MaxBadge } from '@/app/workspace/[workspaceId]/knowledge/[id]/component
3638
import type { ConfigFieldValue } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
3739
import { useConnectorConfigFields } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
3840
import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
41+
import { getBlock } from '@/blocks'
3942
import { CONNECTOR_REGISTRY } from '@/connectors/registry'
4043
import type { ConnectorConfig, ConnectorConfigField } from '@/connectors/types'
4144
import { useCreateConnector } from '@/hooks/queries/kb/connectors'
@@ -250,23 +253,21 @@ export function AddConnectorModal({
250253
<ModalBody className={step === 'select-type' ? 'pt-2 pb-3' : 'pb-3'}>
251254
{step === 'select-type' ? (
252255
<div className='flex min-h-0 flex-col gap-2.5'>
253-
<div className='flex h-8 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--surface-3)] px-2 transition-colors duration-100 hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-4)]'>
254-
<Search
255-
className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
256-
strokeWidth={2}
257-
/>
256+
<div className='flex h-[30px] items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
257+
<Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
258258
<Input
259259
placeholder='Search sources...'
260260
value={searchTerm}
261261
onChange={(e) => setSearchTerm(e.target.value)}
262-
className='h-auto flex-1 border-0 bg-transparent p-0 font-medium text-small leading-none placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
262+
className='h-full w-full border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
263263
/>
264264
</div>
265265
<div className='max-h-[390px] min-h-0 overflow-y-auto [scrollbar-gutter:stable]'>
266266
<div className='flex flex-col gap-0.5 pr-1'>
267267
{filteredEntries.map(([type, config]) => (
268268
<ConnectorTypeCard
269269
key={type}
270+
type={type}
270271
config={config}
271272
onClick={() => handleSelectType(type)}
272273
/>
@@ -543,27 +544,39 @@ export function AddConnectorModal({
543544
}
544545

545546
interface ConnectorTypeCardProps {
547+
type: string
546548
config: ConnectorConfig
547549
onClick: () => void
548550
}
549551

550-
function ConnectorTypeCard({ config, onClick }: ConnectorTypeCardProps) {
552+
function ConnectorTypeCard({ type, config, onClick }: ConnectorTypeCardProps) {
551553
const Icon = config.icon
554+
const brandBg = getBlock(type)?.bgColor ?? null
552555

553556
return (
554-
<Button
557+
<button
555558
type='button'
556-
variant='ghost'
557-
className='group flex min-h-10 w-full justify-start gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
559+
className='flex w-full items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
558560
onClick={onClick}
559561
>
560-
<Icon className='size-[18px] flex-shrink-0 text-[var(--text-icon)]' />
561-
<div className='flex min-w-0 flex-1 flex-col gap-[1px]'>
562-
<span className='truncate font-medium text-[var(--text-body)] text-small'>
563-
{config.name}
564-
</span>
565-
<span className='truncate text-[var(--text-muted)] text-caption'>{config.description}</span>
562+
<div className='size-9 flex-shrink-0'>
563+
<div
564+
className={cn(
565+
'flex size-full items-center justify-center rounded-xl border',
566+
brandBg
567+
? 'border-[var(--border-1)]'
568+
: 'border-[var(--border-muted)] bg-[var(--surface-4)]'
569+
)}
570+
style={brandBg ? { background: brandBg } : undefined}
571+
>
572+
<Icon className={cn('size-5', brandBg ? 'text-white' : 'text-[var(--text-icon)]')} />
573+
</div>
574+
</div>
575+
<div className='flex min-w-0 flex-1 flex-col'>
576+
<span className='truncate text-[14px] text-[var(--text-body)]'>{config.name}</span>
577+
<span className='truncate text-[12px] text-[var(--text-muted)]'>{config.description}</span>
566578
</div>
567-
</Button>
579+
<ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
580+
</button>
568581
)
569582
}

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { getCanonicalScopesForProvider, getProviderIdFromServiceId } from '@/lib
3434
import { getMissingRequiredScopes } from '@/lib/oauth/utils'
3535
import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
3636
import { EditConnectorModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal'
37+
import { getBlock } from '@/blocks'
3738
import { CONNECTOR_REGISTRY } from '@/connectors/registry'
3839
import type { ConnectorData, SyncLogData } from '@/hooks/queries/kb/connectors'
3940
import {
@@ -331,6 +332,7 @@ function ConnectorCard({
331332

332333
const connectorDef = CONNECTOR_REGISTRY[connector.connectorType]
333334
const Icon = connectorDef?.icon
335+
const brandBg = getBlock(connector.connectorType)?.bgColor ?? null
334336
const statusConfig =
335337
STATUS_CONFIG[connector.status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.active
336338

@@ -369,8 +371,22 @@ function ConnectorCard({
369371
>
370372
<div className='flex items-center justify-between gap-2 px-2 py-2'>
371373
<div className='flex min-w-0 items-center gap-2.5'>
372-
<div className='relative flex size-9 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--surface-4)]'>
373-
{Icon && <Icon className='size-5 text-[var(--text-icon)]' />}
374+
<div className='relative size-9 flex-shrink-0'>
375+
<div
376+
className={cn(
377+
'flex size-full items-center justify-center rounded-xl border',
378+
brandBg
379+
? 'border-[var(--border-1)]'
380+
: 'border-[var(--border-muted)] bg-[var(--surface-4)]'
381+
)}
382+
style={brandBg ? { background: brandBg } : undefined}
383+
>
384+
{Icon && (
385+
<Icon
386+
className={cn('size-5', brandBg ? 'text-white' : 'text-[var(--text-icon)]')}
387+
/>
388+
)}
389+
</div>
374390
{connector.status === 'disabled' && (
375391
<AlertTriangle className='-right-0.5 -top-0.5 absolute size-3 text-[var(--caution)]' />
376392
)}

0 commit comments

Comments
 (0)