refactor: update UI components to use consistent popup and text colors

This commit is contained in:
Anish Sarkar 2026-05-13 16:46:35 +05:30
parent 481bb406b6
commit 6aa4dcef60
31 changed files with 50 additions and 108 deletions

View file

@ -493,7 +493,7 @@ function MemberRow({
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}
className="min-w-[120px] dark:bg-neutral-900 dark:border dark:border-white/5" className="min-w-[120px]"
> >
{canManageRoles && {canManageRoles &&
roles roles

View file

@ -137,7 +137,7 @@ export default function RootLayout({
<WebSiteJsonLd /> <WebSiteJsonLd />
<SoftwareApplicationJsonLd /> <SoftwareApplicationJsonLd />
</head> </head>
<body className={cn(roboto.className, "bg-white dark:bg-black antialiased h-full w-full ")}> <body className={cn(roboto.className, "bg-main-panel antialiased h-full w-full ")}>
<PostHogProvider> <PostHogProvider>
<LocaleProvider> <LocaleProvider>
<I18nProvider> <I18nProvider>

View file

@ -22,7 +22,7 @@ export function AnnouncementsDialog() {
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]"> <DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--popover)]">
<DialogTitle className="sr-only">What's New</DialogTitle> <DialogTitle className="sr-only">What's New</DialogTitle>
<div className="flex flex-1 flex-col overflow-hidden min-w-0"> <div className="flex flex-1 flex-col overflow-hidden min-w-0">

View file

@ -311,7 +311,7 @@ const MessageInfoDropdown: FC = () => {
</ActionBarMorePrimitive.Trigger> </ActionBarMorePrimitive.Trigger>
<ActionBarMorePrimitive.Content <ActionBarMorePrimitive.Content
align="start" align="start"
className="bg-muted text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[180px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border dark:border-neutral-700 p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" className="bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[180px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
> >
{createdAt && ( {createdAt && (
<DropdownMenuLabel className="text-xs text-muted-foreground font-normal select-none"> <DropdownMenuLabel className="text-xs text-muted-foreground font-normal select-none">

View file

@ -219,7 +219,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
onPointerDownOutside={(e) => { onPointerDownOutside={(e) => {
if (pickerOpen) e.preventDefault(); if (pickerOpen) e.preventDefault();
}} }}
className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 dark:ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button>svg]:size-5 select-none" className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden ring-0 dark:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button>svg]:size-5 select-none"
> >
<DialogTitle className="sr-only">Manage Connectors</DialogTitle> <DialogTitle className="sr-only">Manage Connectors</DialogTitle>
{/* YouTube Crawler View - shown when adding YouTube videos */} {/* YouTube Crawler View - shown when adding YouTube videos */}

View file

@ -133,10 +133,10 @@ const DocumentUploadPopupContent: FC<{
onPointerDownOutside={(e) => e.preventDefault()} onPointerDownOutside={(e) => e.preventDefault()}
onInteractOutside={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()} onEscapeKeyDown={(e) => e.preventDefault()}
className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(440px,75dvh)] sm:h-[min(520px,80vh)] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-5 sm:[&>button]:top-8 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button]:z-[100] [&>button>svg]:size-4 sm:[&>button>svg]:size-5" className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(440px,75dvh)] sm:h-[min(520px,80vh)] flex flex-col p-0 gap-0 overflow-hidden ring-0 [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-5 sm:[&>button]:top-8 [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10 [&>button]:z-[100] [&>button>svg]:size-4 sm:[&>button>svg]:size-5"
> >
<div className="flex-1 min-h-0 overflow-y-auto overscroll-contain"> <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain">
<DialogHeader className="sticky top-0 z-20 bg-muted px-4 sm:px-6 pt-6 sm:pt-8 pb-10"> <DialogHeader className="sticky top-0 z-20 bg-popover px-4 sm:px-6 pt-6 sm:pt-8 pb-10">
<DialogTitle className="text-xl sm:text-3xl font-semibold tracking-tight pr-8 sm:pr-0"> <DialogTitle className="text-xl sm:text-3xl font-semibold tracking-tight pr-8 sm:pr-0">
Upload Documents Upload Documents
</DialogTitle> </DialogTitle>

View file

@ -29,7 +29,7 @@ export function isVersionableType(documentType: string) {
} }
const DIALOG_CLASSES = const DIALOG_CLASSES =
"select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]"; "select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--popover)]";
export function VersionHistoryButton({ documentId, documentType }: VersionHistoryProps) { export function VersionHistoryButton({ documentId, documentType }: VersionHistoryProps) {
if (!isVersionableType(documentType)) return null; if (!isVersionableType(documentType)) return null;

View file

@ -122,7 +122,7 @@ export function FreeModelSelector({ className }: { className?: string }) {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[320px] p-0 rounded-lg shadow-lg overflow-hidden bg-white border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none" className="w-[320px] p-0 rounded-lg shadow-lg overflow-hidden select-none"
align="start" align="start"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}

View file

@ -76,7 +76,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
<SelectTrigger id="param-key" className="w-full"> <SelectTrigger id="param-key" className="w-full">
<SelectValue placeholder="Select parameter" /> <SelectValue placeholder="Select parameter" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="bg-muted dark:border-neutral-700"> <SelectContent>
{PARAM_KEYS.map((key) => ( {PARAM_KEYS.map((key) => (
<SelectItem key={key} value={key}> <SelectItem key={key} value={key}>
{key} {key}

View file

@ -173,7 +173,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg bg-muted border-border/60 dark:border dark:border-neutral-700 select-none" className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg select-none"
align="end" align="end"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}

View file

@ -428,7 +428,7 @@ export const DocumentMentionPicker = forwardRef<
return ( return (
<div <div
className="shadow-2xl rounded-lg border border-border dark:border-white/5 overflow-hidden bg-popover dark:bg-neutral-900 flex flex-col w-[280px] sm:w-[320px] select-none" className="shadow-2xl rounded-lg overflow-hidden bg-popover text-popover-foreground flex flex-col w-[280px] sm:w-[320px] select-none"
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
role="listbox" role="listbox"
tabIndex={-1} tabIndex={-1}

View file

@ -1428,7 +1428,7 @@ export function ModelSelector({
<Popover open={open} onOpenChange={handleOpenChange}> <Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>{triggerButton}</PopoverTrigger> <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden bg-muted border-border/60 dark:border dark:border-neutral-700 select-none" className="w-[300px] md:w-[380px] p-0 rounded-lg shadow-lg overflow-hidden select-none"
align="start" align="start"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}

View file

@ -112,7 +112,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
); );
return ( return (
<div className="shadow-2xl rounded-lg border border-border dark:border-white/5 overflow-hidden bg-popover dark:bg-neutral-900 flex flex-col w-[280px] sm:w-[320px] select-none"> <div className="shadow-2xl rounded-lg overflow-hidden bg-popover text-popover-foreground flex flex-col w-[280px] sm:w-[320px] select-none">
<div ref={scrollContainerRef} className="max-h-[180px] sm:max-h-[280px] overflow-y-auto"> <div ref={scrollContainerRef} className="max-h-[180px] sm:max-h-[280px] overflow-y-auto">
{isLoading ? ( {isLoading ? (
<div className="py-1 px-2"> <div className="py-1 px-2">

View file

@ -178,10 +178,6 @@ function TourTooltip({
const isLastStep = stepIndex === totalSteps - 1; const isLastStep = stepIndex === totalSteps - 1;
const isFirstStep = stepIndex === 0; const isFirstStep = stepIndex === 0;
const bgColor = isDarkMode ? "#27272a" : "#ffffff";
const textColor = isDarkMode ? "#ffffff" : "#18181b";
const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a";
// Calculate pointer line position // Calculate pointer line position
const getPointerStyles = (): React.CSSProperties => { const getPointerStyles = (): React.CSSProperties => {
const lineLength = 16; const lineLength = 16;
@ -224,68 +220,27 @@ function TourTooltip({
}; };
const renderPointer = () => { const renderPointer = () => {
const lineColor = isDarkMode ? "#27272a" : "#ffffff";
if (position.pointerPosition === "left") { if (position.pointerPosition === "left") {
return ( return (
<div style={getPointerStyles()}> <div style={getPointerStyles()}>
<div <div className="size-1.5 rounded-full bg-main-panel" />
style={{ <div className="h-0.5 w-4 bg-main-panel" />
width: 6,
height: 6,
borderRadius: "50%",
backgroundColor: lineColor,
}}
/>
<div
style={{
width: 16,
height: 2,
backgroundColor: lineColor,
}}
/>
</div> </div>
); );
} }
if (position.pointerPosition === "right") { if (position.pointerPosition === "right") {
return ( return (
<div style={getPointerStyles()}> <div style={getPointerStyles()}>
<div <div className="h-0.5 w-4 bg-main-panel" />
style={{ <div className="size-1.5 rounded-full bg-main-panel" />
width: 16,
height: 2,
backgroundColor: lineColor,
}}
/>
<div
style={{
width: 6,
height: 6,
borderRadius: "50%",
backgroundColor: lineColor,
}}
/>
</div> </div>
); );
} }
if (position.pointerPosition === "top") { if (position.pointerPosition === "top") {
return ( return (
<div style={getPointerStyles()}> <div style={getPointerStyles()}>
<div <div className="size-1.5 rounded-full bg-main-panel" />
style={{ <div className="h-4 w-0.5 bg-main-panel" />
width: 6,
height: 6,
borderRadius: "50%",
backgroundColor: lineColor,
}}
/>
<div
style={{
width: 2,
height: 16,
backgroundColor: lineColor,
}}
/>
</div> </div>
); );
} }
@ -338,10 +293,8 @@ function TourTooltip({
{renderPointer()} {renderPointer()}
<div <div
className="relative rounded-lg p-4" className="relative rounded-lg bg-main-panel p-4 text-foreground"
style={{ style={{
backgroundColor: bgColor,
color: textColor,
boxShadow: isDarkMode boxShadow: isDarkMode
? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
: "0 25px 50px -12px rgba(0, 0, 0, 0.15)", : "0 25px 50px -12px rgba(0, 0, 0, 0.15)",
@ -355,12 +308,10 @@ function TourTooltip({
}} }}
onAnimationEnd={onAnimationEnd} onAnimationEnd={onAnimationEnd}
> >
<h3 id="tour-title" className="text-sm font-semibold mb-1.5" style={{ color: textColor }}> <h3 id="tour-title" className="mb-1.5 text-sm font-semibold">
{step.title} {step.title}
</h3> </h3>
<p className="text-sm leading-relaxed" style={{ color: mutedTextColor }}> <p className="text-sm leading-relaxed text-muted-foreground">{step.content}</p>
{step.content}
</p>
</div> </div>
{/* Footer */} {/* Footer */}
@ -377,8 +328,7 @@ function TourTooltip({
e.stopPropagation(); e.stopPropagation();
onPrev(); onPrev();
}} }}
className="text-sm font-medium transition-opacity hover:opacity-80" className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80"
style={{ color: mutedTextColor }}
> >
Back Back
</button> </button>
@ -390,8 +340,7 @@ function TourTooltip({
e.stopPropagation(); e.stopPropagation();
onSkip(); onSkip();
}} }}
className="text-sm font-medium transition-opacity hover:opacity-80" className="text-sm font-medium text-muted-foreground transition-opacity hover:opacity-80"
style={{ color: mutedTextColor }}
> >
Skip Skip
</button> </button>
@ -402,8 +351,7 @@ function TourTooltip({
e.stopPropagation(); e.stopPropagation();
onNext(); onNext();
}} }}
className="text-sm font-medium transition-opacity hover:opacity-80" className="text-sm font-medium text-foreground transition-opacity hover:opacity-80"
style={{ color: textColor }}
> >
{isLastStep ? "Done" : "Next"} {isLastStep ? "Done" : "Next"}
</button> </button>

View file

@ -34,7 +34,7 @@ export function GlobalLoadingProvider({ children }: { children: React.ReactNode
)} )}
aria-hidden={!isLoading} aria-hidden={!isLoading}
> >
<div className="flex min-h-screen flex-col items-center justify-center bg-background"> <div className="flex min-h-screen flex-col items-center justify-center bg-main-panel">
<div className="h-12 w-12 flex items-center justify-center"> <div className="h-12 w-12 flex items-center justify-center">
<Spinner size="lg" className="text-muted-foreground" /> <Spinner size="lg" className="text-muted-foreground" />
</div> </div>

View file

@ -48,7 +48,7 @@ export function SettingsDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]"> <DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--popover)]">
<DialogTitle className="sr-only">{title}</DialogTitle> <DialogTitle className="sr-only">{title}</DialogTitle>
{/* Desktop: Left sidebar */} {/* Desktop: Left sidebar */}

View file

@ -17,7 +17,7 @@ export function TeamDialog({ searchSpaceId }: TeamDialogProps) {
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent <DialogContent
className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]" className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--popover)]"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
<DialogTitle className="sr-only">{t("manage_members")}</DialogTitle> <DialogTitle className="sr-only">{t("manage_members")}</DialogTitle>

View file

@ -202,7 +202,7 @@ export function LLMConfigForm({
<SelectValue placeholder="Select a provider" /> <SelectValue placeholder="Select a provider" />
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent className="max-h-[300px] bg-muted dark:border-neutral-700"> <SelectContent className="max-h-[300px]">
{LLM_PROVIDERS.map((provider) => ( {LLM_PROVIDERS.map((provider) => (
<SelectItem <SelectItem
key={provider.value} key={provider.value}
@ -260,10 +260,7 @@ export function LLMConfigForm({
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="w-full p-0" align="start">
className="w-full p-0 bg-muted dark:border-neutral-700"
align="start"
>
<Command shouldFilter={false} className="bg-transparent"> <Command shouldFilter={false} className="bg-transparent">
<CommandInput <CommandInput
placeholder={selectedProvider?.example || "Search model name"} placeholder={selectedProvider?.example || "Search model name"}

View file

@ -339,10 +339,7 @@ export function VisionConfigDialog({
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent className="w-full p-0" align="start">
className="w-full p-0 bg-muted dark:border-neutral-700"
align="start"
>
<Command shouldFilter={false} className="bg-transparent"> <Command shouldFilter={false} className="bg-transparent">
<CommandInput <CommandInput
placeholder={selectedProvider?.example || "Search model name"} placeholder={selectedProvider?.example || "Search model name"}

View file

@ -164,7 +164,7 @@ export function FolderWatchDialog({
return ( return (
<Dialog open={open} onOpenChange={handleOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="sm:max-w-md select-none p-0 gap-0 overflow-hidden bg-muted dark:bg-muted border border-border [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10"> <DialogContent className="sm:max-w-md select-none p-0 gap-0 overflow-hidden [&>button]:opacity-80 [&>button]:hover:opacity-100 [&>button]:hover:bg-foreground/10">
<DialogHeader className="px-4 sm:px-6 pt-5 sm:pt-6 pb-3"> <DialogHeader className="px-4 sm:px-6 pt-5 sm:pt-6 pb-3">
<DialogTitle className="text-lg sm:text-xl font-semibold tracking-tight"> <DialogTitle className="text-lg sm:text-xl font-semibold tracking-tight">
Watch Local Folder Watch Local Folder

View file

@ -45,7 +45,7 @@ function AlertDialogContent({
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
data-slot="alert-dialog-content" data-slot="alert-dialog-content"
className={cn( className={cn(
"bg-background dark:bg-neutral-900 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 shadow-2xl duration-200 sm:max-w-lg select-none", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 shadow-2xl duration-200 sm:max-w-lg select-none",
className className
)} )}
{...props} {...props}

View file

@ -66,7 +66,7 @@ function ContextMenuSubContent({
<ContextMenuPrimitive.SubContent <ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content" data-slot="context-menu-sub-content"
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border dark:border-neutral-700 p-1 shadow-lg", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-lg",
className className
)} )}
{...props} {...props}
@ -83,7 +83,7 @@ function ContextMenuContent({
<ContextMenuPrimitive.Content <ContextMenuPrimitive.Content
data-slot="context-menu-content" data-slot="context-menu-content"
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border dark:border-neutral-700 p-1 shadow-md", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-md",
className className
)} )}
{...props} {...props}

View file

@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background dark:bg-neutral-900 p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 select-none", "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-popover text-popover-foreground p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-xl focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 select-none",
className className
)} )}
{...props} {...props}

View file

@ -33,7 +33,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content" data-slot="dropdown-menu-content"
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border dark:border-neutral-700 p-1 shadow-md", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md",
className className
)} )}
{...props} {...props}
@ -201,7 +201,7 @@ function DropdownMenuSubContent({
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border dark:border-neutral-700 p-1 shadow-lg", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1 shadow-lg",
className className
)} )}
{...props} {...props}

View file

@ -151,7 +151,7 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
{isEditing && ( {isEditing && (
<span <span
className="absolute z-50 mt-1 rounded-md border bg-popover p-2 shadow-md" className="absolute z-50 mt-1 rounded-md bg-popover p-2 shadow-md"
contentEditable={false} contentEditable={false}
> >
<textarea <textarea

View file

@ -65,7 +65,7 @@ export function FloatingToolbar({
{...rootProps} {...rootProps}
ref={ref} ref={ref}
className={cn( className={cn(
"scrollbar-hide absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border dark:border-neutral-700 bg-muted p-1 opacity-100 shadow-md print:hidden", "scrollbar-hide absolute z-50 overflow-x-auto whitespace-nowrap rounded-md bg-muted p-1 opacity-100 shadow-md print:hidden",
"max-w-[80vw]", "max-w-[80vw]",
"[&_button:hover]:bg-neutral-200 dark:[&_button:hover]:bg-neutral-700", "[&_button:hover]:bg-neutral-200 dark:[&_button:hover]:bg-neutral-700",
className className

View file

@ -26,7 +26,7 @@ import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
const popoverVariants = cva( const popoverVariants = cva(
"z-50 w-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden" "z-50 w-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md outline-hidden"
); );
const inputVariants = cva( const inputVariants = cva(

View file

@ -26,7 +26,7 @@ function PopoverContent({
align={align} align={align}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border dark:border-neutral-700 p-4 shadow-md outline-hidden", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md p-4 shadow-md outline-hidden",
className className
)} )}
{...props} {...props}

View file

@ -51,7 +51,7 @@ function SelectContent({
<SelectPrimitive.Content <SelectPrimitive.Content
data-slot="select-content" data-slot="select-content"
className={cn( className={cn(
"bg-muted text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border dark:border-neutral-700 shadow-md", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md shadow-md",
position === "popper" && position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className className

View file

@ -54,15 +54,15 @@ function SheetContent({
<SheetPrimitive.Content <SheetPrimitive.Content
data-slot="sheet-content" data-slot="sheet-content"
className={cn( className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" && side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
side === "left" && side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
side === "top" && side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
side === "bottom" && side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
className className
)} )}
{...props} {...props}

View file

@ -123,7 +123,7 @@ function TableFloatingToolbar({ children, ...props }: React.ComponentProps<typeo
{...props} {...props}
> >
<Toolbar <Toolbar
className="scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden" className="scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md bg-popover p-1 shadow-md print:hidden"
contentEditable={false} contentEditable={false}
> >
<ToolbarGroup> <ToolbarGroup>