From 8e7ab9158ce05aae2d6d1ec81f5b02587f8d991d Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 17:57:58 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20readable=20status=20row=20tints=20?=
 =?UTF-8?q?=E2=80=94=20subtle=20washes,=20not=20solid=20.light=20fills?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The per-status row backgrounds used MUI's solid `.light` palette shades
(error.light/success.light/warning.light). Those are LIGHT colors in both
schemes, so in dark mode the row's white text sat on a light fill and was
effectively invisible; in light mode they read as garish saturated blocks.

Replaced with low-alpha washes via the palette channel vars
(rgba(var(--mui-palette-X-mainChannel) / 0.12), 0.18 on hover), which keep
the row's normal theme text colour fully readable in BOTH schemes:

- Offers: completed = subtle green wash; invalidated = faded/muted
  (opacity + secondary text, the original "voided" look) instead of a
  solid red block; expired = subtle amber wash.
- DataTable rowDanger (kit-wide — Warehouse, WarehouseReports): subtle
  error wash for both the desktop row and the mobile card (card keeps its
  error.main border as the danger cue).
- Invoices overdue rows: subtle amber wash.
- Dashboard 2FA banner Card: subtle error wash (keeps the error.main
  border) so the banner copy stays readable in dark mode.

Verified live in Chrome on Offers (completed + invalidated, light + dark):
faint tint + normal readable text, channel switches per scheme. tsc -b
--noEmit, npm run build, vitest 152/152 all clean. (Left untouched: small
icon tiles / callout boxes that pair a .light bg with an explicit dark or
coloured text/glyph — those are readable in both schemes by construction.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/pages/Dashboard.tsx |  3 ++-
 src/admin/pages/Invoices.tsx  |  7 +++----
 src/admin/pages/Offers.tsx    | 28 +++++++++++++---------------
 src/admin/ui/DataTable.tsx    | 14 +++++++++-----
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/admin/pages/Dashboard.tsx b/src/admin/pages/Dashboard.tsx
index eed3c92..2cea3f5 100644
--- a/src/admin/pages/Dashboard.tsx
+++ b/src/admin/pages/Dashboard.tsx
@@ -238,7 +238,8 @@ export default function Dashboard() {
             mb: 3,
             border: 2,
             borderColor: "error.main",
-            bgcolor: "error.light",
+            backgroundColor:
+              "rgba(var(--mui-palette-error-mainChannel) / 0.12)",
           }}
         >
           <Box
diff --git a/src/admin/pages/Invoices.tsx b/src/admin/pages/Invoices.tsx
index 9ed4137..735f935 100644
--- a/src/admin/pages/Invoices.tsx
+++ b/src/admin/pages/Invoices.tsx
@@ -507,11 +507,10 @@ export default function Invoices() {
         new Date(inv.due_date) < new Date(new Date().toDateString()));
     if (isOverdue) {
       return {
-        bgcolor: "warning.light",
-        opacity: 0.85,
+        backgroundColor: "rgba(var(--mui-palette-warning-mainChannel) / 0.12)",
         "&:hover": {
-          bgcolor: "warning.light",
-          filter: "brightness(0.97)",
+          backgroundColor:
+            "rgba(var(--mui-palette-warning-mainChannel) / 0.18)",
         },
       };
     }
diff --git a/src/admin/pages/Offers.tsx b/src/admin/pages/Offers.tsx
index f11235b..dd9cba1 100644
--- a/src/admin/pages/Offers.tsx
+++ b/src/admin/pages/Offers.tsx
@@ -642,7 +642,11 @@ export default function Offers() {
   ];
 
   // Per-status row tints (replaces offers-invalidated-row / offers-completed-row
-  // / offers-expired-row). Subtle, theme-token based so they stay dark/light-safe.
+  // / offers-expired-row). These are LOW-ALPHA washes via the palette channel
+  // vars (not solid `.light` fills — those turn the white dark-mode row text
+  // invisible and read garish in light mode). Invalidated = faded/muted, matching
+  // the original "voided" look. Readable in BOTH schemes because the underlying
+  // row text keeps its normal theme color.
   const rowSx = (q: Quotation) => {
     const isInvalidated = q.status === "invalidated";
     const isCompleted = !isInvalidated && q.order_status === "dokoncena";
@@ -654,31 +658,25 @@ export default function Offers() {
       new Date(q.valid_until) < new Date(new Date().toDateString());
     if (isInvalidated) {
       return {
-        bgcolor: "error.light",
-        opacity: 0.9,
-        "&:hover": {
-          bgcolor: "error.light",
-          filter: "brightness(0.97)",
-        },
+        opacity: 0.6,
+        "& td": { color: "var(--mui-palette-text-secondary)" },
       };
     }
     if (isCompleted) {
       return {
-        bgcolor: "success.light",
-        opacity: 0.85,
+        backgroundColor: "rgba(var(--mui-palette-success-mainChannel) / 0.12)",
         "&:hover": {
-          bgcolor: "success.light",
-          filter: "brightness(0.97)",
+          backgroundColor:
+            "rgba(var(--mui-palette-success-mainChannel) / 0.18)",
         },
       };
     }
     if (isExpired) {
       return {
-        bgcolor: "warning.light",
-        opacity: 0.85,
+        backgroundColor: "rgba(var(--mui-palette-warning-mainChannel) / 0.12)",
         "&:hover": {
-          bgcolor: "warning.light",
-          filter: "brightness(0.97)",
+          backgroundColor:
+            "rgba(var(--mui-palette-warning-mainChannel) / 0.18)",
         },
       };
     }
diff --git a/src/admin/ui/DataTable.tsx b/src/admin/ui/DataTable.tsx
index ec39fd3..6034599 100644
--- a/src/admin/ui/DataTable.tsx
+++ b/src/admin/ui/DataTable.tsx
@@ -99,7 +99,11 @@ export default function DataTable<T>({
                 },
                 onRowClick ? { cursor: "pointer" } : {},
                 rowDanger?.(row)
-                  ? { borderColor: "error.main", bgcolor: "error.light" }
+                  ? {
+                      borderColor: "error.main",
+                      backgroundColor:
+                        "rgba(var(--mui-palette-error-mainChannel) / 0.12)",
+                    }
                   : {},
                 rowInactive?.(row) ? { opacity: 0.55 } : {},
                 ...(Array.isArray(extra) ? extra : extra ? [extra] : []),
@@ -235,11 +239,11 @@ export default function DataTable<T>({
                   onRowClick ? { cursor: "pointer" } : {},
                   rowDanger?.(row)
                     ? {
-                        bgcolor: "error.light",
-                        opacity: 0.88,
+                        backgroundColor:
+                          "rgba(var(--mui-palette-error-mainChannel) / 0.12)",
                         "&:hover": {
-                          bgcolor: "error.light",
-                          filter: "brightness(0.97)",
+                          backgroundColor:
+                            "rgba(var(--mui-palette-error-mainChannel) / 0.18)",
                         },
                       }
                     : {},