fix(ui): повысить контраст заполненных таблиц BGP и OSPF

components/data-grids/bgp-sessions-data-grid.tsx

@@ -8,6 +8,7 @@ import {
   useTable,
 } from "@tanstack/react-table"
 import { cn } from "@/lib/utils"
+import { Badge } from "@/components/reui/badge"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
@@ -22,83 +23,20 @@ import { BGP_AS_NAMES } from "@/lib/bgp/types"
 import { fmtBgpNum } from "@/lib/bgp/helpers"
 import { ChevronDownIcon, ChevronRightIcon, NetworkIcon } from "lucide-react"
 
-const STATE_STYLE: Record<BgpState, { bg: string; text: string; dot: string; label: string }> = {
-  Unknown: { bg: "bg-muted", text: "text-muted-foreground", dot: "bg-muted-foreground", label: "Неизвестно" },
-  Established: {
-    bg: "bg-emerald-500/10",
-    text: "text-emerald-600 dark:text-emerald-400",
-    dot: "bg-emerald-500",
-    label: "Established",
-  },
-  Active: {
-    bg: "bg-amber-500/10",
-    text: "text-amber-600 dark:text-amber-400",
-    dot: "bg-amber-500",
-    label: "Active",
-  },
-  Idle: {
-    bg: "bg-slate-500/10",
-    text: "text-slate-500 dark:text-slate-400",
-    dot: "bg-slate-500",
-    label: "Idle",
-  },
-  Connect: {
-    bg: "bg-blue-500/10",
-    text: "text-blue-600 dark:text-blue-400",
-    dot: "bg-blue-500",
-    label: "Connect",
-  },
-  OpenSent: {
-    bg: "bg-violet-500/10",
-    text: "text-violet-600 dark:text-violet-400",
-    dot: "bg-violet-500",
-    label: "OpenSent",
-  },
-  OpenConfirm: {
-    bg: "bg-violet-500/10",
-    text: "text-violet-600 dark:text-violet-400",
-    dot: "bg-violet-500",
-    label: "OpenConfirm",
-  },
-}
-
-const TYPE_STYLE: Record<BgpType, { bg: string; text: string }> = {
-  Unknown: { bg: "bg-muted", text: "text-muted-foreground" },
-  eBGP: { bg: "bg-blue-500/10", text: "text-blue-600 dark:text-blue-400" },
-  iBGP: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
+const STATE_DOT: Record<BgpState, string> = {
+  Unknown: "bg-muted-foreground", Established: "bg-success", Active: "bg-warning",
+  Idle: "bg-muted-foreground", Connect: "bg-info", OpenSent: "bg-info", OpenConfirm: "bg-info",
 }
 
 function StateBadge({ state }: { state: BgpState }) {
-  const s = STATE_STYLE[state]
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-semibold",
-        s.bg,
-        s.text,
-        "border-current/20",
-      )}
-    >
-      <span className={cn("size-1.5 rounded-full shrink-0", s.dot)} />
-      {s.label}
-    </span>
-  )
+  return <Badge variant="invert-light" size="sm">
+    <span aria-hidden="true" className={cn("size-1.5 rounded-full shrink-0", STATE_DOT[state])} />
+    {state === "Unknown" ? "Неизвестно" : state}
+  </Badge>
 }
 
 function TypeBadge({ type }: { type: BgpType }) {
-  const s = TYPE_STYLE[type]
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold",
-        s.bg,
-        s.text,
-        "border-current/20",
-      )}
-    >
-      {type === "Unknown" ? "Тип неизвестен" : type}
-    </span>
-  )
+  return <Badge variant="invert-light" size="sm">{type === "Unknown" ? "Тип неизвестен" : type}</Badge>
 }
 
 interface BgpSessionsDataGridProps {
@@ -227,7 +165,7 @@ function BgpSessionsDataGrid({ sessions, emptyTitle, selectedSessionId, onSelect
         cell: ({ row }) => {
           const n = row.original.prefixesRx
           return n !== null ? (
-            <span className="font-mono tabular-nums text-emerald-600 dark:text-emerald-400 text-right block">
+            <span className="font-mono tabular-nums text-right block">
               {fmtBgpNum(n)}
             </span>
           ) : (