diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx index 9a034beb7a0..6453c9b780d 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx @@ -74,7 +74,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut' export const CHART_CONFIG = { success: { label: , - color: 'var(--foreground-muted)', + color: 'var(--chart-success)', }, warning: { label: , diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx index 4f43c6c660e..16e6b86e234 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx @@ -44,25 +44,24 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { header: '', cell: ({ row }) => { return ( -
- row.toggleSelected(!!value)} - onClick={(e) => e.stopPropagation()} - /> -
+ row.toggleSelected(!!value)} + onClick={(e) => e.stopPropagation()} + /> ) }, enableHiding: false, enableResizing: false, enableSorting: false, filterFn: () => true, - size: 48, - minSize: 48, - maxSize: 48, + size: 42, + minSize: 42, + maxSize: 42, meta: { - cellClassName: 'w-[32px]', - headerClassName: 'w-[32px]', + // pl-3.5 → toggle-filter icon; pr-3 matches date pl-3 (equal gaps around the dot) + cellClassName: 'w-[42px] min-w-[42px] pl-3.5 pr-3', + headerClassName: 'w-[42px] min-w-[42px] pl-3.5 pr-3', }, }, // Level column - always visible @@ -77,12 +76,12 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { enableResizing: false, enableSorting: false, filterFn: () => true, - size: 48, - minSize: 48, - maxSize: 48, + size: 8, + minSize: 8, + maxSize: 8, meta: { - cellClassName: 'w-[32px]', - headerClassName: 'w-[32px]', + cellClassName: 'w-2 min-w-2 px-0', + headerClassName: 'w-2 min-w-2 px-0', }, }, // Date column - always visible @@ -100,8 +99,8 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { minSize: 140, maxSize: 140, meta: { - cellClassName: 'font-mono tracking-tight w-[140px]', - headerClassName: 'w-[140px]', + cellClassName: 'font-mono tracking-tight w-[140px] pl-3', + headerClassName: 'w-[140px] pl-3', dataType: 'date', }, }, @@ -113,7 +112,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): { const logType = row.getValue('log_type') return (
- +
) }, diff --git a/apps/studio/components/ui/DataTable/DataTable.utils.ts b/apps/studio/components/ui/DataTable/DataTable.utils.ts index d206a302dd8..54366ba78c7 100644 --- a/apps/studio/components/ui/DataTable/DataTable.utils.ts +++ b/apps/studio/components/ui/DataTable/DataTable.utils.ts @@ -63,8 +63,9 @@ export function getLevelColor( case 'success': return { text: 'text-muted', - bg: 'bg-muted group-data-[state=selected]/row:bg-foreground-lighter', - border: 'border-muted group-data-[state=selected]/row:border-foreground-lighter', + bg: 'bg-[var(--chart-success)] group-data-[state=selected]/row:bg-foreground-lighter', + border: + 'border-[var(--chart-success)] group-data-[state=selected]/row:border-foreground-lighter', } case 'warning': return { diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx index a29ac3b1c6c..43dddc72634 100644 --- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx +++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx @@ -14,7 +14,7 @@ import { SHORTCUT_IDS } from '@/state/shortcuts/registry' import { useShortcut } from '@/state/shortcuts/useShortcut' const TableRowClassName = 'border-b group data-[state=selected]:bg-muted hover:bg-surface-200' -const TableCellClassName = 'text-xs py-1! p-2 *:[[role=checkbox]]:translate-y-[2px] truncate' +const TableCellClassName = 'text-xs py-1! p-2 truncate' // TODO: add a possible chartGroupBy export interface DataTableInfiniteProps { @@ -105,7 +105,6 @@ export function DataTableInfinite({ 'w-full text-xs! font-normal! text-foreground-lighter font-mono', 'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0', 'text-muted-foreground h-9 px-2 text-left align-middle', - '[&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]', headerClassName )} aria-sort={sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : 'none'} diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css index 3b9726e0460..11a94f0d7b0 100644 --- a/apps/studio/styles/globals.css +++ b/apps/studio/styles/globals.css @@ -147,6 +147,7 @@ --chart-warning: hsl(var(--warning-500)); --chart-warning-muted: hsl(var(--warning-400)); --chart-destructive: hsl(var(--destructive-default)); + --chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default); @@ -169,6 +170,7 @@ --chart-warning: hsl(var(--warning-default)); --chart-warning-muted: hsl(var(--warning-500)); --chart-destructive: hsl(var(--destructive-default)); + --chart-success: color-mix(in oklch, var(--foreground-muted) 65%, white); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default);