mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
refactor: update UI components to utilize 'popover-border' for consistent styling and enhance overall design coherence
This commit is contained in:
parent
468f4ef121
commit
88f9c3353c
23 changed files with 89 additions and 97 deletions
|
|
@ -231,7 +231,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
|
|||
{canCreatePublicLink && (
|
||||
<>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border dark:border-white/5 my-1" />
|
||||
<div className="border-t border-popover-border my-1" />
|
||||
|
||||
{/* Public Link Option */}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -521,7 +521,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
{userDocsList.length > 0 && (
|
||||
<>
|
||||
{surfsenseDocsList.length > 0 && (
|
||||
<div className="mx-2 my-4 border-t border-border dark:border-white/5" />
|
||||
<div className="mx-2 my-4 border-t border-popover-border" />
|
||||
)}
|
||||
<div className="px-3 py-2 text-xs font-bold text-muted-foreground/55">
|
||||
Your Documents
|
||||
|
|
@ -581,7 +581,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
{folderMentions.length > 0 && (
|
||||
<>
|
||||
{(surfsenseDocsList.length > 0 || userDocsList.length > 0) && (
|
||||
<div className="mx-2 my-4 border-t border-border dark:border-white/5" />
|
||||
<div className="mx-2 my-4 border-t border-popover-border" />
|
||||
)}
|
||||
<div className="px-3 py-2 text-xs font-bold text-muted-foreground/55">
|
||||
Folders
|
||||
|
|
|
|||
|
|
@ -840,8 +840,8 @@ export function ModelSelector({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 border-border/50 flex relative",
|
||||
isMobile ? "flex-row items-center border-b border-border/40" : "flex-col w-10 border-r"
|
||||
"shrink-0 border-popover-border flex relative",
|
||||
isMobile ? "flex-row items-center border-b" : "flex-col w-10 border-r"
|
||||
)}
|
||||
>
|
||||
{!isMobile && (
|
||||
|
|
@ -907,9 +907,9 @@ export function ModelSelector({
|
|||
<Fragment key={provider}>
|
||||
{showSeparator &&
|
||||
(isMobile ? (
|
||||
<div className="w-px h-5 bg-border/60 shrink-0 self-center mx-0.5" />
|
||||
<div className="w-px h-5 bg-popover-border shrink-0 self-center mx-0.5" />
|
||||
) : (
|
||||
<div className="h-px w-5 bg-border/60 mx-auto my-0.5" />
|
||||
<div className="h-px w-5 bg-popover-border mx-auto my-0.5" />
|
||||
))}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
|
|
@ -1125,7 +1125,11 @@ export function ModelSelector({
|
|||
<Pencil className="size-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
{isSelected && <Check className="size-4 text-primary shrink-0" />}
|
||||
{isSelected && (
|
||||
<div className="size-7 grid place-items-center shrink-0">
|
||||
<Check className="size-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1150,7 +1154,7 @@ export function ModelSelector({
|
|||
return (
|
||||
<div className="flex flex-col w-full overflow-hidden">
|
||||
{/* Tab header */}
|
||||
<div className="border-b border-border/50">
|
||||
<div className="border-b border-popover-border">
|
||||
<div className="w-full grid grid-cols-3 h-11">
|
||||
{(
|
||||
[
|
||||
|
|
@ -1303,7 +1307,7 @@ export function ModelSelector({
|
|||
</>
|
||||
)}
|
||||
{globalItems.length > 0 && userItems.length > 0 && (
|
||||
<div className="my-1.5 mx-4 h-px bg-border/60" />
|
||||
<div className="my-1.5 mx-4 h-px bg-popover-border" />
|
||||
)}
|
||||
{userItems.length > 0 && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
|
|||
</button>
|
||||
))}
|
||||
|
||||
<div className="mx-2 my-1 border-t border-border dark:border-white/5" />
|
||||
<div className="mx-2 my-1 border-t border-popover-border" />
|
||||
<button
|
||||
ref={(el) => {
|
||||
if (el) itemRefs.current.set(createPromptIndex, el);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue