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
@@ -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">