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:
Zimin A.N.
2026-05-11 20:00:40 +03:00
parent 38f7dcee3e
commit a27e9ec901
3 changed files with 10 additions and 8 deletions
@@ -1655,7 +1655,7 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
{entries.map(([key, prop], idx) => ( {entries.map(([key, prop], idx) => (
<tr <tr
key={key} 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"> <td className="px-3 py-2 text-mono text-mute tabular-nums">
{String(idx + 1).padStart(2, '0')} {String(idx + 1).padStart(2, '0')}
@@ -1897,7 +1897,7 @@ function EventsTabContent({ dictName }: { dictName: string }) {
return ( return (
<tr <tr
key={`${r.id}`} 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"> <td className="text-mono text-cell tabular-nums px-3 py-2 text-ink-2">
{time.toLocaleString(undefined, { {time.toLocaleString(undefined, {
@@ -473,10 +473,10 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
} }
} }
// Per redesign prototype: row левый край имеет 4px stripe в scope color + // Table rows always white per user feedback ("строки таблиц белые").
// INTERNAL/RESTRICTED rows получают subtle bg tint для visual scope grouping. // Scope visually conveyed только через 3px left-stripe + colored SCOPE chip
// PUBLIC = plain white (default — самый common scope не нужно подкрашивать). // — без subtle row bg tint (был еле виден, плохо читался под page-bg).
const rowTint = d.scope === 'PUBLIC' ? '' : `${SCOPE_BG_TINT[d.scope]}/30` // Hover full-strength surface-2 (не /40 opacity) — clear visual affordance.
return ( return (
<tr <tr
@@ -484,7 +484,7 @@ function DictRow({ d, t }: { d: DictionaryDefinition; t: TFunc }) {
tabIndex={0} tabIndex={0}
onClick={handleClick} onClick={handleClick}
onKeyDown={handleKey} 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 */} {/* name + subtitle (description short) + scope-color left stripe */}
<td className="relative px-3 py-2 align-top min-w-0"> <td className="relative px-3 py-2 align-top min-w-0">
+3 -1
View File
@@ -78,7 +78,9 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttribut
<tr <tr
ref={ref} ref={ref}
className={cn( 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, className,
)} )}
{...props} {...props}