apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-06 20:15:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Update connector UI components with improved button styles and border adjustments for better visual consistency

Browse source
This commit is contained in:
Anish Sarkar 2025-12-31 23:24:20 +05:30
parent 75119bf06b
commit 3a6749e86f
4 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

5
surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
View file

@ -108,10 +108,11 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
</div> </div>
<Button <Button
size="sm" size="sm"
variant={isConnected ? "outline" : "default"} variant={isConnected ? "secondary" : "default"}
className={cn( className={cn(
"h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium", "h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium",
isConnected && "border-0" isConnected && "bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80",
!isConnected && "shadow-xs"
)} )}
onClick={isConnected ? onManage : onConnect} onClick={isConnected ? onManage : onConnect}
disabled={isConnecting || isIndexing} disabled={isConnecting || isIndexing}

6
surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { Search } from "lucide-react"; import { Search } from "lucide-react";
import { type FC } from "react"; import type { FC } from "react";
import { import {
DialogDescription, DialogDescription,
DialogHeader, DialogHeader,
@ -23,10 +23,8 @@ interface ConnectorDialogHeaderProps {
} }
export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
activeTab,
totalSourceCount, totalSourceCount,
searchQuery, searchQuery,
onTabChange,
onSearchChange, onSearchChange,
isScrolled, isScrolled,
}) => { }) => {
@ -46,7 +44,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5"> <div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-border/80 dark:border-white/5">
<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start"> <TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
<TabsTrigger <TabsTrigger
value="all" value="all"

4
surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
View file

@ -115,9 +115,9 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
)} )}
</div> </div>
<Button <Button
variant="outline" variant="secondary"
size="sm" size="sm"
className="h-8 text-[11px] px-3 rounded-lg font-medium border-0" className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
onClick={onManage ? () => onManage(connector) : undefined} onClick={onManage ? () => onManage(connector) : undefined}
disabled={isIndexing} disabled={isIndexing}
> >

6
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -212,7 +212,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/30" className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/60"
align="start" align="start"
sideOffset={8} sideOffset={8}
> >
@ -252,7 +252,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
{/* Global Configs Section */} {/* Global Configs Section */}
{filteredGlobalConfigs.length > 0 && ( {filteredGlobalConfigs.length > 0 && (
<CommandGroup> <CommandGroup>
<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider"> <div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
<Globe className="size-3.5" /> <Globe className="size-3.5" />
Global Models Global Models
</div> </div>
@ -314,7 +314,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
{/* User Configs Section */} {/* User Configs Section */}
{filteredUserConfigs.length > 0 && ( {filteredUserConfigs.length > 0 && (
<CommandGroup> <CommandGroup>
<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider"> <div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
<User className="size-3.5" /> <User className="size-3.5" />
Your Configurations Your Configurations
</div> </div>