fix: style nullable indicators (#992)

* fix: style nullable indicators (?, N toggle, tooltip) in orange

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
This commit is contained in:
Jonathan Fishner
2025-12-03 18:06:06 +02:00
committed by GitHub
parent 94d7d3f522
commit 3f53ab52da
4 changed files with 16 additions and 6 deletions

View File

@@ -162,7 +162,7 @@ export const TableEditModeField: React.FC<TableEditModeFieldProps> = React.memo(
</span>
</TooltipTrigger>
<TooltipContent>
{t('side_panel.tables_section.table.nullable')}
{nullable ? 'Null' : 'Not Null'}
</TooltipContent>
</Tooltip>
<Tooltip>

View File

@@ -1,16 +1,21 @@
import React from 'react';
import { Toggle } from '@/components/toggle/toggle';
import { cn } from '@/lib/utils';
export const TableFieldToggle = React.forwardRef<
React.ElementRef<typeof Toggle>,
React.ComponentPropsWithoutRef<typeof Toggle>
>((props, ref) => {
>(({ className, ...props }, ref) => {
return (
<Toggle
{...props}
ref={ref}
variant="default"
className="h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
className={cn(
'h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
'data-[state=on]:text-orange-600 dark:data-[state=on]:text-orange-400',
className
)}
/>
);
});

View File

@@ -1,16 +1,21 @@
import React from 'react';
import { Toggle } from '@/components/toggle/toggle';
import { cn } from '@/lib/utils';
export const TableFieldToggle = React.forwardRef<
React.ElementRef<typeof Toggle>,
React.ComponentPropsWithoutRef<typeof Toggle>
>((props, ref) => {
>(({ className, ...props }, ref) => {
return (
<Toggle
{...props}
ref={ref}
variant="default"
className="h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
className={cn(
'h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
'data-[state=on]:text-orange-600 dark:data-[state=on]:text-orange-400',
className
)}
/>
);
});

View File

@@ -165,7 +165,7 @@ export const TableField: React.FC<TableFieldProps> = ({
</span>
</TooltipTrigger>
<TooltipContent>
{t('side_panel.tables_section.table.nullable')}
{nullable ? 'Null' : 'Not Null'}
</TooltipContent>
</Tooltip>
<Tooltip>