M: Improve checkboxes

This commit is contained in:
Ivan 2025-03-11 23:37:12 +03:00
parent 6f1afc68ad
commit 4f5e51e27b
5 changed files with 8 additions and 7 deletions

View File

@ -77,7 +77,7 @@ export function TableBody<TData>({
style={{ ...(conditionalRowStyles ? getRowStyles(row) : []) }} style={{ ...(conditionalRowStyles ? getRowStyles(row) : []) }}
> >
{enableRowSelection ? ( {enableRowSelection ? (
<td key={`select-${row.id}`} className='pl-3 pr-1 border-y'> <td key={`select-${row.id}`} className='pl-2 border-y'>
<SelectRow row={row} onChangeLastSelected={onChangeLastSelected} /> <SelectRow row={row} onChangeLastSelected={onChangeLastSelected} />
</td> </td>
) : null} ) : null}

View File

@ -31,7 +31,7 @@ export function TableHeader<TData>({
{table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>) => ( {table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{enableRowSelection ? ( {enableRowSelection ? (
<th className='pl-3 pr-1' scope='col'> <th className='pl-2' scope='col'>
<SelectAll table={table} resetLastSelected={resetLastSelected} /> <SelectAll table={table} resetLastSelected={resetLastSelected} />
</th> </th>
) : null} ) : null}

View File

@ -196,9 +196,10 @@ export function IconLogin(props: IconProps) {
); );
} }
export function CheckboxChecked() { export function CheckboxChecked() {
return ( return (
<svg className='w-4 h-4 p-0.75' viewBox='0 0 512 512' fill='#ffffff'> <svg className='w-4 h-4 p-0.75 -ml-0.25' viewBox='0 0 512 512' fill='#ffffff'>
<path d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7l233.4-233.3c12.5-12.5 32.8-12.5 45.3 0z' /> <path d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7l233.4-233.3c12.5-12.5 32.8-12.5 45.3 0z' />
</svg> </svg>
); );
@ -206,7 +207,7 @@ export function CheckboxChecked() {
export function CheckboxNull() { export function CheckboxNull() {
return ( return (
<svg className='w-4 h-4 p-0.25' viewBox='0 0 16 16' fill='#ffffff'> <svg className='w-4 h-4 px-0.25' viewBox='0 0 16 16' fill='#ffffff'>
<path d='M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z' /> <path d='M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z' />
</svg> </svg>
); );

View File

@ -65,7 +65,7 @@ export function Checkbox({
<div <div
className={clsx( className={clsx(
'w-4 h-4', // 'w-4 h-4', //
'border rounded-xs', 'border rounded-sm',
{ {
'bg-sec-600 text-sec-0': value !== false, 'bg-sec-600 text-sec-0': value !== false,
'bg-prim-100': value === false 'bg-prim-100': value === false

View File

@ -66,7 +66,7 @@ export function CheckboxTristate({
<div <div
className={clsx( className={clsx(
'w-4 h-4', // 'w-4 h-4', //
'border rounded-xs', 'border rounded-sm',
{ {
'bg-sec-600 text-sec-0': value !== false, 'bg-sec-600 text-sec-0': value !== false,
'bg-prim-100': value === false 'bg-prim-100': value === false