Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-04-21 14:37:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

add a few dark: variant classes to maintain consistent elevation (#7618)

Browse source 
Co-authored-by: Jonathan Brennan <jonathanawesome@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
Piotr Monwid-Olechnowicz 2026-02-05 01:58:32 +01:00 committed by GitHub
parent 6c166ae0a8
commit d889247bee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 79 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -170,6 +170,9 @@
"nextra": "patches/nextra.patch",
"nextra-theme-docs": "patches/nextra-theme-docs.patch",
"@graphql-codegen/schema-ast": "patches/@graphql-codegen__schema-ast.patch"
}
},
"onlyBuiltDependencies": [
"msw"
]
}
}

2
packages/web/app/src/components/navigation/header.tsx
View file

@ -4,7 +4,7 @@ type HeaderProps = {
export function Header({ children }: HeaderProps) {
return (
<div className="h-(--header-height) bg-neutral-3">
<div className="h-(--header-height) bg-neutral-2 dark:bg-neutral-3">
<header className="container flex h-full items-center justify-between">{children}</header>
</div>
);

2
packages/web/app/src/components/navigation/secondary-navigation.tsx
View file

@ -4,7 +4,7 @@ type SecondaryNavigationProps = {
export function SecondaryNavigation({ children }: SecondaryNavigationProps) {
return (
<div className="h-(--tabs-navbar-height) border-neutral-5 bg-neutral-3 relative border-b">
<div className="h-(--tabs-navbar-height) border-neutral-5 bg-neutral-2 dark:bg-neutral-3 relative border-b">
{children}
</div>
);

2
packages/web/app/src/components/target/history/errors-and-changes.tsx
View file

@ -155,7 +155,7 @@ export function ChangesBlock(
): ReactElement | null {
return (
<div>
<h2 className="text-neutral-2 mb-3 font-bold">{props.title}</h2>
<h2 className="text-neutral-10 mb-3 font-bold">{props.title}</h2>
<div className="list-inside list-disc space-y-2 text-sm/relaxed">
{props.changesWithUsage?.map((change, key) => (
<ChangeItem

2
packages/web/app/src/components/ui/button.tsx
View file

@ -12,7 +12,7 @@ const buttonVariants = cva(
primary: 'bg-accent text-neutral-2 hover:brightness-110 active:bg-accent',
destructive: 'bg-red-500 text-neutral-1 dark:text-neutral-12 hover:bg-red-700',
outline:
'text-neutral-11 hover:text-neutral-12 border border-neutral-5 hover:border-neutral-6 bg-neutral-3 hover:bg-neutral-4',
'text-neutral-11 hover:text-neutral-12 border border-neutral-5 hover:border-neutral-6 dark:bg-neutral-3 dark:hover:bg-neutral-4 bg-neutral-2 hover:bg-neutral-3',
secondary: 'bg-neutral-2 text-neutral-11 hover:bg-neutral-2/80',
ghost: 'hover:bg-neutral-2 hover:text-neutral-12',
link: 'underline-offset-4 hover:underline text-accent',

2
packages/web/app/src/components/ui/card.tsx
View file

@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
<div
ref={ref}
className={cn(
'text-neutral-11 bg-neutral-3 border-neutral-4 rounded-lg border shadow-sm',
'text-neutral-11 bg-neutral-2 dark:bg-neutral-3 border-neutral-4 rounded-lg border shadow-sm',
className,
)}
{...props}

16
packages/web/app/src/components/ui/dropdown-menu.tsx
View file

@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'focus:bg-neutral-5 data-[state=open]:bg-neutral-5 flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
'dark:focus:bg-neutral-5 focus:bg-neutral-3 data-[state=open]:bg-neutral-3 dark:data-[state=open]:bg-neutral-5 flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
inset && 'pl-8',
className,
)}
@ -39,7 +39,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
'bg-neutral-4 text-neutral-11 animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
'dark:bg-neutral-4 bg-neutral-1 text-neutral-11 animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
className,
)}
{...props}
@ -56,7 +56,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
'bg-neutral-4 text-neutral-11 animate-in 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 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-2 shadow-md',
'dark:bg-neutral-4 bg-neutral-1 text-neutral-11 animate-in 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 border-neutral-5 z-50 min-w-[8rem] overflow-hidden rounded-md border p-2 shadow-md',
className,
)}
{...props}
@ -75,9 +75,9 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm p-2 text-sm outline-none transition-colors',
'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm p-2 text-sm outline-none transition-colors',
inset && 'pl-8',
active && 'bg-neutral-5 text-neutral-12',
active && 'dark:bg-neutral-5 bg-neutral-3 text-neutral-12',
className,
)}
{...props}
@ -92,7 +92,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
className,
)}
checked={checked}
@ -115,7 +115,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
'focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
'focus:bg-neutral-3 dark:focus:bg-neutral-5 focus:text-neutral-12 data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
className,
)}
{...props}
@ -150,7 +150,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn('bg-neutral-6 -mx-1 my-1 h-px', className)}
className={cn('dark:bg-neutral-6 bg-neutral-5 -mx-1 my-1 h-px', className)}
{...props}
/>
));

19
packages/web/app/src/components/ui/popover.tsx
View file

@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'bg-neutral-4 border-neutral-5 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 p-4 shadow-md outline-none',
'bg-neutral-1 border-neutral-4 dark:bg-neutral-4 dark:border-neutral-5 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 p-4 shadow-md outline-none',
className,
)}
{...props}
@ -29,7 +29,22 @@ const PopoverArrow = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Arrow>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
>(({ className, ...props }, ref) => (
<PopoverPrimitive.Arrow ref={ref} className={cn('fill-neutral-5', className)} {...props} />
<PopoverPrimitive.Arrow
ref={ref}
className={cn('dark:fill-neutral-4 fill-neutral-1 relative -top-px', className)}
{...props}
asChild
>
<svg>
<polygon points="0,0 30,0 15,10" />
<path
d="M0,0 L15,10 L30,0"
className="stroke-neutral-4 dark:stroke-neutral-5"
fill="none"
vector-effect="non-scaling-stroke"
/>
</svg>
</PopoverPrimitive.Arrow>
));
PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;

4
packages/web/app/src/components/ui/select.tsx
View file

@ -16,7 +16,7 @@ const selectVariants = cva(
variants: {
variant: {
default:
'hover:text-neutral-12 text-neutral-11 hover:bg-neutral-5 bg-neutral-4 hover:border-neutral-6 border-neutral-5 border ring-offset-neutral-2 placeholder:text-neutral-10 focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1',
'hover:text-neutral-12 text-neutral-11 hover:bg-neutral-3 dark:hover:bg-neutral-5 bg-neutral-2 dark:bg-neutral-4 hover:border-neutral-6 border-neutral-5 border ring-offset-neutral-2 placeholder:text-neutral-10 focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1',
ghost: '',
},
},
@ -54,7 +54,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
'bg-neutral-4 border-neutral-5 animate-in fade-in-80 relative z-50 min-w-[8rem] cursor-pointer overflow-hidden rounded-md border shadow-md',
'border-neutral-4 bg-neutral-3 dark:bg-neutral-4 dark:border-neutral-5 animate-in fade-in-80 relative z-50 min-w-[8rem] cursor-pointer overflow-hidden rounded-md border shadow-md',
position === 'popper' && 'translate-y-1',
className,
)}

27
packages/web/app/src/components/ui/tabs.tsx
View file

@ -19,20 +19,23 @@ const tabsListVariants = cva('relative flex items-center', {
});
// Define variants for TabsTrigger
const tabsTriggerVariants = cva('cursor-pointer appearance-none! text-sm font-medium transition', {
variants: {
variant: {
default:
'ring-offset-neutral-2 focus-visible:ring-ring data-[state=active]:bg-neutral-5 data-[state=active]:text-neutral-12 inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:shadow-sm disabled:cursor-not-allowed active:disabled:pointer-events-none',
menu: 'text-neutral-12 data-[state=active]:border-b-accent border-b-2 border-b-transparent px-4 py-3 hover:border-b-accent_80',
content:
'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-neutral-12 data-[state=active]:border-accent data-[state=active]:text-accent',
const tabsTriggerVariants = cva(
'cursor-pointer appearance-none! text-sm font-medium transition hover:text-neutral-12',
{
variants: {
variant: {
default:
'ring-offset-neutral-2 focus-visible:ring-ring dark:data-[state=active]:bg-neutral-5 data-[state=active]:text-neutral-12 inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:bg-neutral-3 disabled:cursor-not-allowed active:disabled:pointer-events-none focus-visible:z-1',
menu: 'text-neutral-12 data-[state=active]:border-b-accent border-b-2 border-b-transparent px-4 py-3 hover:border-b-accent_80',
content:
'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-neutral-12 data-[state=active]:border-accent data-[state=active]:text-accent',
},
},
defaultVariants: {
variant: 'default',
},
},
defaultVariants: {
variant: 'default',
},
});
);
// Define variants for TabsContent
const tabsContentVariants = cva(

6
packages/web/app/src/components/ui/user-menu.tsx
View file

@ -206,10 +206,8 @@ export function UserMenu(props: {
<SettingsIcon className="mr-2 size-4" />
Profile settings
</DropdownMenuItem>
<>
<DropdownMenuSeparator />
<ThemeSwitcher />
</>
<DropdownMenuSeparator />
<ThemeSwitcher />
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<a href={docsUrl} target="_blank" rel="noreferrer">

8
packages/web/app/src/index.css
View file

@ -295,13 +295,9 @@
@apply border-neutral-5;
}
#root {
background-color: var(--color-neutral-2);
color: var(--color-neutral-11);
}
#root,
body {
@apply text-neutral-11 bg-neutral-2;
@apply text-neutral-11 dark:bg-neutral-2 bg-neutral-3;
}
button,

4
packages/web/app/src/laboratory/components/ui/tabs.tsx
View file

@ -16,7 +16,7 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
'bg-neutral-3 text-neutral-10 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
'bg-neutral-2 dark:bg-neutral-3 text-neutral-10 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
className,
)}
{...props}
@ -29,7 +29,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"data-[state=active]:text-neutral-11 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring data-[state=active]:border-neutral-4 data-[state=active]:bg-neutral-4/30 text-neutral-8 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-[state=active]:text-neutral-11 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring data-[state=active]:border-neutral-4 data-[state=active]:bg-neutral-4/30 text-neutral-8 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}

2
packages/web/app/src/pages/auth.tsx
View file

@ -31,7 +31,7 @@ export function AuthPage() {
</div>
) : (
<div className="grid h-full min-h-screen items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
<div className="bg-neutral-3 border-r-neutral-3 text-neutral-12 relative hidden h-full flex-col border-r p-10 lg:flex">
<div className="dark:bg-neutral-3 bg-neutral-2 border-r-neutral-3 text-neutral-12 relative hidden h-full flex-col border-r p-10 lg:flex">
<div className="bg-neutral-1 absolute inset-0" />
<Link to="/">
<div className="relative z-20 flex items-center text-lg font-medium">

2
packages/web/app/src/pages/organization-members.tsx
View file

@ -79,7 +79,7 @@ function PageContent(props: {
variant="ghost"
className={cn(
props.page === subPage.key
? 'bg-neutral-3 hover:bg-neutral-3'
? 'bg-neutral-4 hover:bg-neutral-4 dark:bg-neutral-3 dark:hover:bg-neutral-3'
: 'hover:bg-transparent hover:underline',
'justify-start',
)}

2
packages/web/app/src/pages/organization-subscription-manage.tsx
View file

@ -333,7 +333,7 @@ function Inner(props: {
<Card className="w-full">
<Heading className="mb-4">Choose Your Plan</Heading>
{missingBillingUpdatePermissions ? (
<div className="text-neutral-2 mb-3 text-sm">
<div className="text-neutral-10 mb-3 text-sm">
You lack the necessary permission 'billing:update' to update the subscription plan.
</div>
) : null}

10
packages/web/app/src/pages/organization.tsx
View file

@ -415,12 +415,12 @@ function OrganizationPageContent(
placeholder="Search..."
defaultValue={props.search}
onChange={onSearchChange}
className="bg-neutral-3 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
className="dark:bg-neutral-3 bg-neutral-2 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<Separator orientation="vertical" className="mx-4 h-8" />
<Select value={props.sortBy ?? 'requests'} onValueChange={onRequestsValueChange}>
<SelectTrigger className="hover:bg-neutral-2 bg-transparent">
<SelectTrigger>
{props.sortBy === 'versions'
? 'Schema Versions'
: props.sortBy === 'name'
@ -429,19 +429,19 @@ function OrganizationPageContent(
</SelectTrigger>
<SelectContent>
<SelectItem value="requests">
<div className="font-bold">Requests</div>
<div className="font-medium">Requests</div>
<div className="text-neutral-10 text-xs">
GraphQL requests made in the last {days} days.
</div>
</SelectItem>
<SelectItem value="versions">
<div className="font-bold">Schema Versions</div>
<div className="font-medium">Schema Versions</div>
<div className="text-neutral-10 text-xs">
Schemas published in last {days} days.
</div>
</SelectItem>
<SelectItem value="name">
<div className="font-bold">Name</div>
<div className="font-medium">Name</div>
<div className="text-neutral-10 text-xs">Sort by project name.</div>
</SelectItem>
</SelectContent>

8
packages/web/app/src/pages/project.tsx
View file

@ -373,7 +373,7 @@ const ProjectsPageContent = (
placeholder="Search..."
defaultValue={props.search}
onChange={onSearchChange}
className="bg-neutral-3 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
className="dark:bg-neutral-3 bg-neutral-2 w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
/>
</div>
<Separator orientation="vertical" className="mx-4 h-8" />
@ -387,19 +387,19 @@ const ProjectsPageContent = (
</SelectTrigger>
<SelectContent>
<SelectItem value="requests">
<div className="font-bold">Requests</div>
<div className="font-medium">Requests</div>
<div className="text-neutral-10 text-xs">
GraphQL requests made in the last {days} days.
</div>
</SelectItem>
<SelectItem value="versions">
<div className="font-bold">Schema Versions</div>
<div className="font-medium">Schema Versions</div>
<div className="text-neutral-10 text-xs">
Schemas published in last {days} days.
</div>
</SelectItem>
<SelectItem value="name">
<div className="font-bold">Name</div>
<div className="font-medium">Name</div>
<div className="text-neutral-10 text-xs">Sort by target name.</div>
</SelectItem>
</SelectContent>

17
packages/web/app/src/pages/target-history-version.tsx
View file

@ -147,8 +147,11 @@ function SchemaVersionView(props: {
value={selectedItem}
onValueChange={value => setSelectedItem(value)}
>
<TabsList className="w-full justify-start rounded-b-none px-2 py-0">
<TabsTrigger value="default" className="mt-1 py-2 data-[state=active]:rounded-b-none">
<TabsList className="w-full justify-start rounded-b-none bg-transparent px-2 py-0">
<TabsTrigger
value="default"
className="data-[state=active]:bg-neutral-5 dark:data-[state=active]:bg-neutral-3 border-neutral-5 dark:border-neutral-3 mt-1 rounded-b-none border py-2"
>
<span>Default Graph</span>
<TooltipProvider>
<Tooltip>
@ -181,7 +184,7 @@ function SchemaVersionView(props: {
<TabsTrigger
value={edge.node.id}
key={edge.node.id}
className="mt-1 py-2 data-[state=active]:rounded-b-none"
className="data-[state=active]:bg-neutral-5 dark:data-[state=active]:bg-neutral-3 border-neutral-5 dark:border-neutral-3 mt-1 rounded-b-none border py-2"
>
{edge.node.contractName}
<TooltipProvider>
@ -346,7 +349,7 @@ function DefaultSchemaVersionView(props: {
<Tabs value={selectedView} onValueChange={value => setSelectedView(value)}>
<TabsList
className={cn(
'bg-neutral-3 border-neutral-3 w-full justify-start rounded-none border-x border-b',
'bg-neutral-5 dark:bg-neutral-3 border-neutral-5 dark:border-neutral-3 w-full justify-start rounded-none border-x border-b',
!props.hasContracts && 'rounded-t border-t',
)}
>
@ -370,7 +373,7 @@ function DefaultSchemaVersionView(props: {
</TabsList>
</Tabs>
</TooltipProvider>
<div className="border-neutral-3 grow rounded-md rounded-t-none border border-t-0">
<div className="dark:border-neutral-3 border-neutral-5 grow rounded-md rounded-t-none border border-t-0">
{selectedView === 'details' && (
<div className="my-4 px-4">
{schemaVersion.isFirstComposableVersion ? (
@ -522,7 +525,7 @@ function ContractVersionView(props: {
<>
<TooltipProvider>
<Tabs value={selectedView} onValueChange={value => setSelectedView(value)}>
<TabsList className="bg-neutral-3 border-neutral-3 w-full justify-start rounded-none border-x border-b">
<TabsList className="dark:bg-neutral-3 bg-neutral-5 dark:border-neutral-3 w-full justify-start rounded-none border-x border-b">
{availableViews.map(item => (
<Tooltip key={item.value}>
<TooltipTrigger>
@ -543,7 +546,7 @@ function ContractVersionView(props: {
</TabsList>
</Tabs>
</TooltipProvider>
<div className="border-neutral-3 grow rounded-md rounded-t-none border border-t-0">
<div className="dark:border-neutral-3 border-neutral-5 grow rounded-md rounded-t-none border border-t-0">
{selectedView === 'details' && (
<div className="my-4 px-4">
{contractVersion.isFirstComposableVersion ? (