fix(table): white row bg + stronger hover per user feedback
User: "строки таблиц белые / ховер на них более чёткий а то еле видно". Прошлый hover был bg-surface-2/40 (40% opacity на cream/yellow page bg) — почти неотличим от default. Под page bg #faf9f5 + 40% opacity surface-2 тёмное пятно еле проступало. На long тяжело отследить какая row под cursor. Изменения: - DictRow (catalog table): убран subtle scope-color bg tint (был warn-bg/30, pink-bg/30 — еле виден на page bg). Row всегда `bg-surface` (white). Scope visually conveyed через 3px left-stripe + colored SCOPE chip. Hover full strength `bg-surface-2` (no /40 opacity). - FieldsTabContent + EventsTabContent rows: same change — bg-surface + hover:bg-surface-2. - Shared TableRow component (ui/components/table.tsx): bg-surface + hover:bg-surface-2 — applies к records table, audit, и любым другим TableRow callsites.
This commit is contained in:
@@ -1655,7 +1655,7 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
|
||||
{entries.map(([key, prop], idx) => (
|
||||
<tr
|
||||
key={key}
|
||||
className="border-t border-line-2 hover:bg-surface-2/40 transition-colors"
|
||||
className="border-t border-line-2 bg-surface hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
<td className="px-3 py-2 text-mono text-mute tabular-nums">
|
||||
{String(idx + 1).padStart(2, '0')}
|
||||
@@ -1897,7 +1897,7 @@ function EventsTabContent({ dictName }: { dictName: string }) {
|
||||
return (
|
||||
<tr
|
||||
key={`${r.id}`}
|
||||
className="border-t border-line-2 hover:bg-surface-2/40 transition-colors"
|
||||
className="border-t border-line-2 bg-surface hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
<td className="text-mono text-cell tabular-nums px-3 py-2 text-ink-2">
|
||||
{time.toLocaleString(undefined, {
|
||||
|
||||
@@ -473,10 +473,10 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
|
||||
}
|
||||
}
|
||||
|
||||
// Per redesign prototype: row левый край имеет 4px stripe в scope color +
|
||||
// INTERNAL/RESTRICTED rows получают subtle bg tint для visual scope grouping.
|
||||
// PUBLIC = plain white (default — самый common scope не нужно подкрашивать).
|
||||
const rowTint = d.scope === 'PUBLIC' ? '' : `${SCOPE_BG_TINT[d.scope]}/30`
|
||||
// Table rows always white per user feedback ("строки таблиц белые").
|
||||
// Scope visually conveyed только через 3px left-stripe + colored SCOPE chip
|
||||
// — без subtle row bg tint (был еле виден, плохо читался под page-bg).
|
||||
// Hover full-strength surface-2 (не /40 opacity) — clear visual affordance.
|
||||
|
||||
return (
|
||||
<tr
|
||||
@@ -484,7 +484,7 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
|
||||
tabIndex={0}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKey}
|
||||
className={`relative border-b border-line-2 last:border-b-0 cursor-pointer hover:bg-surface-2/40 focus-visible:outline-none focus-visible:bg-accent-bg/30 transition-colors ${rowTint}`}
|
||||
className="relative border-b border-line-2 last:border-b-0 cursor-pointer bg-surface hover:bg-surface-2 focus-visible:outline-none focus-visible:bg-accent-bg/30 transition-colors"
|
||||
>
|
||||
{/* name + subtitle (description short) + scope-color left stripe */}
|
||||
<td className="relative px-3 py-2 align-top min-w-0">
|
||||
|
||||
@@ -78,7 +78,9 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttribut
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'border-b border-line transition-colors hover:bg-surface-2/40 data-[state=selected]:bg-accent-bg',
|
||||
// White row bg + clear hover state per user feedback ("строки белые,
|
||||
// ховер более чёткий"). Прошлый /40 opacity на hover был еле виден.
|
||||
'border-b border-line bg-surface transition-colors hover:bg-surface-2 data-[state=selected]:bg-accent-bg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user