From b72212bbb71ab2edcd40d69d0121fdbabe69a024 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 22 May 2026 14:38:29 +0200
Subject: [PATCH] style(frontend): improve readability and mobile polish

- bump statistic title/value contrast in dark and ultra-dark so totals
  on the inbounds summary card stay legible
- give index card actions explicit colors per theme so links like Stop,
  Logs, System History no longer fade into the card background
- show the panel version as a tag next to "3X-UI" on mobile, mirroring
  the Xray version tag pattern, and turn it orange when an update is
  available
- make the login settings button a proper circle by adding size="large"
  + an explicit border-radius fallback on .toolbar-btn
---
 frontend/src/components/CustomStatistic.css | 14 +++++++++---
 frontend/src/pages/index/IndexPage.css      | 24 ++++++++++++++++++++-
 frontend/src/pages/index/IndexPage.tsx      | 14 +++++++++++-
 frontend/src/pages/login/LoginPage.css      |  7 ++++++
 frontend/src/pages/login/LoginPage.tsx      |  1 +
 5 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CustomStatistic.css b/frontend/src/components/CustomStatistic.css
index 71bbcb23..9cb3e065 100644
--- a/frontend/src/components/CustomStatistic.css
+++ b/frontend/src/components/CustomStatistic.css
@@ -31,14 +31,22 @@
   margin-bottom: 6px !important;
   letter-spacing: 0.6px;
   text-transform: uppercase;
-  opacity: 0.55;
+  color: rgba(0, 0, 0, 0.55);
   font-weight: 500;
 }
 
 body.dark .ant-statistic-content {
-  color: var(--dark-color-text-primary);
+  color: rgba(255, 255, 255, 0.92);
 }
 
 body.dark .ant-statistic-title {
-  color: rgba(255, 255, 255, 0.55);
+  color: rgba(255, 255, 255, 0.72);
+}
+
+html[data-theme='ultra-dark'] .ant-statistic-content {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+html[data-theme='ultra-dark'] .ant-statistic-title {
+  color: rgba(255, 255, 255, 0.70);
 }
diff --git a/frontend/src/pages/index/IndexPage.css b/frontend/src/pages/index/IndexPage.css
index f8bf60eb..889ed959 100644
--- a/frontend/src/pages/index/IndexPage.css
+++ b/frontend/src/pages/index/IndexPage.css
@@ -163,7 +163,29 @@ html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions > li {
   max-width: 100%;
   padding: 0 8px;
   flex-wrap: nowrap;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  color: rgba(0, 0, 0, 0.78);
+  font-weight: 500;
+  transition: opacity 0.15s ease, transform 0.15s ease, color 0.2s ease;
+}
+
+.index-page .action .anticon {
+  color: rgba(0, 0, 0, 0.72);
+}
+
+body.dark .index-page .action {
+  color: rgba(255, 255, 255, 0.82);
+}
+
+body.dark .index-page .action .anticon {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html[data-theme='ultra-dark'] .index-page .action {
+  color: rgba(255, 255, 255, 0.86);
+}
+
+html[data-theme='ultra-dark'] .index-page .action .anticon {
+  color: rgba(255, 255, 255, 0.78);
 }
 
 .index-page .action > span:not(.anticon):not(.tg-icon) {
diff --git a/frontend/src/pages/index/IndexPage.tsx b/frontend/src/pages/index/IndexPage.tsx
index 0fafb9f7..9d1ef77e 100644
--- a/frontend/src/pages/index/IndexPage.tsx
+++ b/frontend/src/pages/index/IndexPage.tsx
@@ -11,6 +11,7 @@ import {
   Row,
   Space,
   Spin,
+  Tag,
   Tooltip,
 } from 'antd';
 import {
@@ -210,7 +211,18 @@ export default function IndexPage() {
 
                   <Col xs={24} lg={12}>
                     <Card
-                      title="3X-UI"
+                      title={
+                        <Space>
+                          <span>3X-UI</span>
+                          {isMobile && displayVersion && (
+                            <Tag color={panelUpdateInfo.updateAvailable ? 'orange' : 'green'}>
+                              {panelUpdateInfo.updateAvailable
+                                ? `v${panelUpdateInfo.latestVersion}`
+                                : `v${displayVersion}`}
+                            </Tag>
+                          )}
+                        </Space>
+                      }
                       hoverable
                       actions={[
                         <Space className="action" key="tg" onClick={openTelegram}>
diff --git a/frontend/src/pages/login/LoginPage.css b/frontend/src/pages/login/LoginPage.css
index c39b950a..6f493208 100644
--- a/frontend/src/pages/login/LoginPage.css
+++ b/frontend/src/pages/login/LoginPage.css
@@ -219,6 +219,13 @@
 .toolbar-btn {
   width: 40px;
   height: 40px;
+  min-width: 40px;
+  border-radius: 50%;
+  padding: 0;
+}
+
+.toolbar-btn .anticon {
+  font-size: 18px;
 }
 
 .theme-cycle {
diff --git a/frontend/src/pages/login/LoginPage.tsx b/frontend/src/pages/login/LoginPage.tsx
index e4aafac7..ccce2240 100644
--- a/frontend/src/pages/login/LoginPage.tsx
+++ b/frontend/src/pages/login/LoginPage.tsx
@@ -170,6 +170,7 @@ export default function LoginPage() {
             >
               <Button
                 shape="circle"
+                size="large"
                 className="toolbar-btn"
                 aria-label={t('menu.settings')}
                 icon={<SettingOutlined />}