From 7efe069be077a35e3538908d24bd68d11407d513 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 2 Jun 2026 21:15:33 +0300
Subject: [PATCH] =?UTF-8?q?fix(admin-remnawave):=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=D1=87=D0=B5=D1=81=D0=B0=D1=82=D1=8C=20=D0=B8=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=B2=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=85=20=D1=81=D1=82=D0=B0=D1=82=D0=B8=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Локальный StatCard держал иконку в чипе p-2, который подстраивался под
размер иконки (а часть иконок передавалась без className) — отсюда разные
по размеру чипы и «кривые» иконки. Привёл к виду карточек статистики продаж:
лейбл сверху, фиксированный чип h-9 w-9 с принудительным размером иконки
([&>svg]:h-5 w-5 нормализует все иконки разом), значение в тон чипу. Рамку
и subValue сохранил.
---
 src/pages/AdminRemnawave.tsx | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/pages/AdminRemnawave.tsx b/src/pages/AdminRemnawave.tsx
index 3c7c592..4658771 100644
--- a/src/pages/AdminRemnawave.tsx
+++ b/src/pages/AdminRemnawave.tsx
@@ -116,24 +116,33 @@ interface StatCardProps {
   subValue?: string;
 }
 
+// Soulful chip + matching value colour, in the spirit of the sales-stats cards.
+// Fixed-size chip + forced icon size normalises every icon regardless of what the
+// call site passes (some omit a className) — that was the source of the misalignment.
+const STAT_TONE: Record<string, { chip: string; value: string }> = {
+  accent: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
+  green: { chip: 'bg-success-500/15 text-success-400', value: 'text-success-400' },
+  blue: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
+  orange: { chip: 'bg-warning-500/15 text-warning-400', value: 'text-warning-400' },
+  red: { chip: 'bg-error-500/15 text-error-400', value: 'text-error-400' },
+  purple: { chip: 'bg-accent-500/15 text-accent-400', value: 'text-accent-400' },
+};
+
 function StatCard({ label, value, icon, color = 'accent', subValue }: StatCardProps) {
-  const colorClasses: Record<string, string> = {
-    accent: 'bg-accent-500/20 text-accent-400',
-    green: 'bg-success-500/20 text-success-400',
-    blue: 'bg-accent-500/20 text-accent-400',
-    orange: 'bg-warning-500/20 text-warning-400',
-    red: 'bg-error-500/20 text-error-400',
-    purple: 'bg-accent-500/20 text-accent-400',
-  };
+  const tone = STAT_TONE[color] ?? STAT_TONE.accent;
 
   return (
     <div className="rounded-xl border border-dark-700 bg-dark-800/50 p-4">
-      <div className="flex items-center gap-3">
-        <div className={`rounded-lg p-2 ${colorClasses[color]}`}>{icon}</div>
+      <p className="truncate text-xs text-dark-400 sm:text-sm">{label}</p>
+      <div className="mt-1.5 flex items-center gap-2.5">
+        <span
+          className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg [&>svg]:h-5 [&>svg]:w-5 ${tone.chip}`}
+        >
+          {icon}
+        </span>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-xs text-dark-400">{label}</p>
-          <p className="text-lg font-semibold text-dark-100">{value}</p>
-          {subValue && <p className="text-xs text-dark-500">{subValue}</p>}
+          <div className={`truncate text-lg font-semibold sm:text-xl ${tone.value}`}>{value}</div>
+          {subValue && <div className="truncate text-xs text-dark-500">{subValue}</div>}
         </div>
       </div>
     </div>