From 0fbdf0f9bf6fe593c6c672863167f0ec89f27a6d Mon Sep 17 00:00:00 2001
From: Sanaei <ho3ein.sanaei@gmail.com>
Date: Thu, 10 Sep 2026 21:08:05 +0200
Subject: [PATCH] fix(ui): keep the empty-group placeholder legible in dark
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "no group" em dash in the clients table and in two client-picker
modals was drawn with an inline color: rgba(0,0,0,0.45). The panel renders
every page under antd's darkAlgorithm as well, so on a dark container that
near-black placeholder is effectively invisible.

All three now use Typography.Text type="secondary", the idiom the rest of
the panel already uses for muted text — GroupAddClientsModal itself uses it
58 lines further down.

Mid-greys such as #888 elsewhere in the panel stay legible in both themes
and are deliberately left alone.
---
 frontend/src/pages/clients/ClientsPage.tsx                     | 3 ++-
 frontend/src/pages/groups/GroupAddClientsModal.tsx             | 2 +-
 .../src/pages/inbounds/clients/AttachExistingClientsModal.tsx  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx
index 96a9e6952..e39b8a85c 100644
--- a/frontend/src/pages/clients/ClientsPage.tsx
+++ b/frontend/src/pages/clients/ClientsPage.tsx
@@ -23,6 +23,7 @@ import {
   Table,
   Tag,
   Tooltip,
+  Typography,
   message,
 } from 'antd';
 import type { ColumnsType, TableProps } from 'antd/es/table';
@@ -1091,7 +1092,7 @@ export default function ClientsPage() {
         width: 130,
         hidden: allGroups.length === 0,
         render: (_v, record) => {
-          if (!record.group) return <span style={{ color: 'rgba(0,0,0,0.45)' }}>—</span>;
+          if (!record.group) return <Typography.Text type="secondary">—</Typography.Text>;
           const isActive = filters.groups.includes(record.group);
           return (
             <Tag
diff --git a/frontend/src/pages/groups/GroupAddClientsModal.tsx b/frontend/src/pages/groups/GroupAddClientsModal.tsx
index 2bfecfa22..a64c95e03 100644
--- a/frontend/src/pages/groups/GroupAddClientsModal.tsx
+++ b/frontend/src/pages/groups/GroupAddClientsModal.tsx
@@ -82,7 +82,7 @@ export default function GroupAddClientsModal({
           g ? (
             <Tag color="geekblue">{g}</Tag>
           ) : (
-            <span style={{ color: 'rgba(0,0,0,0.45)' }}>—</span>
+            <Typography.Text type="secondary">—</Typography.Text>
           ),
       },
       {
diff --git a/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx b/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
index cda9c9cc9..2d3b98f59 100644
--- a/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
+++ b/frontend/src/pages/inbounds/clients/AttachExistingClientsModal.tsx
@@ -125,7 +125,7 @@ export default function AttachExistingClientsModal({
           group ? (
             <Tag color="geekblue">{group}</Tag>
           ) : (
-            <span style={{ color: 'rgba(0,0,0,0.45)' }}>—</span>
+            <Typography.Text type="secondary">—</Typography.Text>
           ),
       },
       {