fix(ui): исправить фокус списка серверов и контраст общих элементов

components/data-grids/servers-data-grid.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tanstack/react-table"
 import type { Server, ServerType } from "@/lib/data"
 import { StatusBadge } from "@/components/status-badge"
+import { Badge, type BadgeProps } from "@/components/reui/badge"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -49,10 +50,10 @@ const TYPE_LABELS: Record<ServerType, string> = {
   "home-router": "Home Router",
 }
 
-const TYPE_STYLES: Record<ServerType, string> = {
-  "jump-host": "bg-violet-500/10 text-violet-400 border-violet-500/20",
-  "exit-node": "bg-sky-500/10 text-sky-400 border-sky-500/20",
-  "home-router": "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+const TYPE_VARIANTS: Record<ServerType, BadgeProps["variant"]> = {
+  "jump-host": "primary-light",
+  "exit-node": "info-light",
+  "home-router": "success-light",
 }
 
 function rosVer(os: string): number {
@@ -63,13 +64,13 @@ function rosVer(os: string): number {
 
 function TypeBadge({ type }: { type: ServerType }) {
   const icon =
-    type === "jump-host" ? <ServerIcon className="size-3 mr-1" />
-    : type === "exit-node" ? <NetworkIcon className="size-3 mr-1" />
-    : <HomeIcon className="size-3 mr-1" />
+    type === "jump-host" ? <ServerIcon aria-hidden="true" />
+    : type === "exit-node" ? <NetworkIcon aria-hidden="true" />
+    : <HomeIcon aria-hidden="true" />
   return (
-    <span className={cn("inline-flex items-center text-xs font-medium border rounded px-2 py-0.5", TYPE_STYLES[type])}>
+    <Badge variant={TYPE_VARIANTS[type]} className="text-foreground">
       {icon}{TYPE_LABELS[type]}
-    </span>
+    </Badge>
   )
 }