From 81dd103cb455c871654d521d4f4b6ab36a330437 Mon Sep 17 00:00:00 2001
From: lekss361 <alexey.kondratev@balance-pl.ru>
Date: Sun, 24 May 2026 15:47:40 +0300
Subject: [PATCH] fix(tradein-ui): replace Tailwind with OKLCH tokens + a11y on
 disclaimer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review-bot feedback on #517:
- tradein-mvp/frontend doesn't use Tailwind — classes (rounded-lg, bg-amber-50, …)
  rendered as plain unstyled text. Replace with inline styles using project's
  OKLCH design tokens (--accent-2, --accent-2-soft, --surface-2, --radius, --fg).
- Add role=status aria-live=polite on disclaimer for screen readers
- Move handleResubmit below resultData declaration (ESLint no-use-before-define)
---
 tradein-mvp/frontend/src/app/page.tsx         |  12 +-
 .../src/components/trade-in/HeroSummary.tsx   | 124 +++++++++++-------
 2 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/tradein-mvp/frontend/src/app/page.tsx b/tradein-mvp/frontend/src/app/page.tsx
index e5748af4..99afcf14 100644
--- a/tradein-mvp/frontend/src/app/page.tsx
+++ b/tradein-mvp/frontend/src/app/page.tsx
@@ -59,12 +59,6 @@ export default function TradeInPage() {
     });
   }
 
-  function handleResubmit(patch: { house_type?: HouseType; repair_state?: RepairState }) {
-    if (!resultData) return;
-    const enrichedInput: TradeInEstimateInput = { ...resultData.input, ...patch };
-    handleSubmit(enrichedInput);
-  }
-
   const apiError = mutation.error?.message ?? null;
   const resultData =
     freshResult ??
@@ -81,6 +75,12 @@ export default function TradeInPage() {
         }
       : null);
 
+  function handleResubmit(patch: { house_type?: HouseType; repair_state?: RepairState }) {
+    if (!resultData) return;
+    const enrichedInput: TradeInEstimateInput = { ...resultData.input, ...patch };
+    handleSubmit(enrichedInput);
+  }
+
   const isPending = mutation.isPending;
 
   return (
diff --git a/tradein-mvp/frontend/src/components/trade-in/HeroSummary.tsx b/tradein-mvp/frontend/src/components/trade-in/HeroSummary.tsx
index cfd48d14..812a6e06 100644
--- a/tradein-mvp/frontend/src/components/trade-in/HeroSummary.tsx
+++ b/tradein-mvp/frontend/src/components/trade-in/HeroSummary.tsx
@@ -102,8 +102,21 @@ export function HeroSummary({ estimate, input, onResubmit, isResubmitting = fals
   return (
     <article className="card hero-card">
       {showMockDisclaimer && (
-        <div className="rounded-lg border border-amber-500/40 bg-amber-50 px-4 py-3 text-sm text-amber-900" style={{ margin: "16px 16px 0" }}>
-          Адрес распознан неточно — оценка может быть приближённой.
+        <div
+          role="status"
+          aria-live="polite"
+          style={{
+            margin: "16px 16px 0",
+            padding: "12px 16px",
+            border: "1px solid var(--accent-2)",
+            background: "var(--accent-2-soft)",
+            color: "var(--fg)",
+            borderRadius: "var(--radius)",
+            fontSize: 13,
+            lineHeight: 1.4,
+          }}
+        >
+          ⚠️ Адрес распознан неточно — оценка может быть приближённой.
           Уточните адрес и пересчитайте для более точного результата.
         </div>
       )}
@@ -323,55 +336,64 @@ export function HeroSummary({ estimate, input, onResubmit, isResubmitting = fals
       )}
 
       {showEnrichment && (
-        <div style={{ margin: "0 16px 16px" }}>
-          <div className="rounded-lg border border-slate-200 bg-slate-50 p-4 space-y-3">
-            <p className="text-sm font-medium" style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>
-              Уточните для повышения точности оценки:
-            </p>
-            <form onSubmit={handleEnrichSubmit}>
-              <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 12 }}>
-                {needsHouseType && (
-                  <select
-                    className="control"
-                    value={enrichHouseType}
-                    onChange={(e) => setEnrichHouseType(e.target.value)}
-                    aria-label="Тип дома"
-                    style={{ flex: "1 1 160px", minWidth: 140 }}
-                  >
-                    <option value="">Тип дома…</option>
-                    <option value="panel">Панельный</option>
-                    <option value="brick">Кирпичный</option>
-                    <option value="monolith">Монолит</option>
-                    <option value="monolith_brick">Монолит-кирпич</option>
-                    <option value="other">Другое</option>
-                  </select>
-                )}
-                {needsRepairState && (
-                  <select
-                    className="control"
-                    value={enrichRepairState}
-                    onChange={(e) => setEnrichRepairState(e.target.value)}
-                    aria-label="Состояние ремонта"
-                    style={{ flex: "1 1 160px", minWidth: 140 }}
-                  >
-                    <option value="">Состояние…</option>
-                    <option value="needs_repair">Требует ремонта</option>
-                    <option value="standard">Стандартный</option>
-                    <option value="good">Хороший</option>
-                    <option value="excellent">Евроремонт</option>
-                  </select>
-                )}
-              </div>
-              <button
-                type="submit"
-                className="btn btn-primary"
-                disabled={isResubmitting || (!enrichHouseType && !enrichRepairState)}
-                style={{ opacity: isResubmitting || (!enrichHouseType && !enrichRepairState) ? 0.55 : 1 }}
-              >
-                {isResubmitting ? "Пересчитываем…" : "Пересчитать"}
-              </button>
-            </form>
-          </div>
+        <div
+          style={{
+            margin: "16px 16px 0",
+            padding: 16,
+            border: "1px solid var(--border, #e5e7eb)",
+            background: "var(--surface-2, #f8fafc)",
+            borderRadius: "var(--radius, 8px)",
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+          }}
+        >
+          <p style={{ fontSize: 13, fontWeight: 500, margin: 0 }}>
+            Уточните для повышения точности оценки:
+          </p>
+          <form onSubmit={handleEnrichSubmit}>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 12 }}>
+              {needsHouseType && (
+                <select
+                  className="control"
+                  value={enrichHouseType}
+                  onChange={(e) => setEnrichHouseType(e.target.value)}
+                  aria-label="Тип дома"
+                  style={{ flex: "1 1 160px", minWidth: 140 }}
+                >
+                  <option value="">Тип дома…</option>
+                  <option value="panel">Панельный</option>
+                  <option value="brick">Кирпичный</option>
+                  <option value="monolith">Монолит</option>
+                  <option value="monolith_brick">Монолит-кирпич</option>
+                  <option value="other">Другое</option>
+                </select>
+              )}
+              {needsRepairState && (
+                <select
+                  className="control"
+                  value={enrichRepairState}
+                  onChange={(e) => setEnrichRepairState(e.target.value)}
+                  aria-label="Состояние ремонта"
+                  style={{ flex: "1 1 160px", minWidth: 140 }}
+                >
+                  <option value="">Состояние…</option>
+                  <option value="needs_repair">Требует ремонта</option>
+                  <option value="standard">Стандартный</option>
+                  <option value="good">Хороший</option>
+                  <option value="excellent">Евроремонт</option>
+                </select>
+              )}
+            </div>
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={isResubmitting || (!enrichHouseType && !enrichRepairState)}
+              style={{ opacity: isResubmitting || (!enrichHouseType && !enrichRepairState) ? 0.55 : 1 }}
+            >
+              {isResubmitting ? "Пересчитываем…" : "Пересчитать"}
+            </button>
+          </form>
         </div>
       )}
     </article>