refactor: update button styling for better user experience in ConnectToolsBanner and enhance document type icon visibility in DocumentNode

This commit is contained in:
Anish Sarkar 2026-04-08 04:48:16 +05:30
parent b7c9077fb2
commit d264aec57d
2 changed files with 10 additions and 3 deletions

View file

@ -268,7 +268,7 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
<div className="flex w-full items-center gap-2.5 px-4 py-2.5"> <div className="flex w-full items-center gap-2.5 px-4 py-2.5">
<button <button
type="button" type="button"
className="flex flex-1 items-center gap-2.5 text-left cursor-pointer" className="flex flex-1 items-center gap-2.5 text-left cursor-pointer select-none"
onClick={() => setConnectorDialogOpen(true)} onClick={() => setConnectorDialogOpen(true)}
> >
<Unplug className="size-4 text-muted-foreground shrink-0" /> <Unplug className="size-4 text-muted-foreground shrink-0" />

View file

@ -222,11 +222,17 @@ export const DocumentNode = React.memo(function DocumentNode({
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
<span className="relative shrink-0 flex items-center justify-center h-6 w-6">
{getDocumentTypeIcon( {getDocumentTypeIcon(
doc.document_type as DocumentTypeEnum, doc.document_type as DocumentTypeEnum,
"h-3.5 w-3.5 text-muted-foreground" "h-3.5 w-3.5 text-muted-foreground"
) && ( ) && (
<span className="shrink-0"> <span
className={cn(
"absolute inset-0 flex items-center justify-center transition-opacity pointer-events-none",
dropdownOpen ? "opacity-0" : "group-hover:opacity-0"
)}
>
{getDocumentTypeIcon( {getDocumentTypeIcon(
doc.document_type as DocumentTypeEnum, doc.document_type as DocumentTypeEnum,
"h-3.5 w-3.5 text-muted-foreground" "h-3.5 w-3.5 text-muted-foreground"
@ -247,7 +253,7 @@ export const DocumentNode = React.memo(function DocumentNode({
)} )}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<MoreHorizontal className="h-3.5 w-3.5" /> <MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40" onClick={(e) => e.stopPropagation()}> <DropdownMenuContent align="end" className="w-40" onClick={(e) => e.stopPropagation()}>
@ -288,6 +294,7 @@ export const DocumentNode = React.memo(function DocumentNode({
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</span>
</div> </div>
</ContextMenuTrigger> </ContextMenuTrigger>