From 6f9fdb154d24375e9f251acc6f7e05810a2eb99d Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Mon, 25 May 2026 03:26:15 +0200
Subject: [PATCH] refactor(frontend): align sub page chrome with login + AntD
 defaults
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Theme + language buttons now both use AntD `<Button shape="circle"
  size="large" className="toolbar-btn">` with TranslationOutlined and
  the SVG theme icon — identical hover/border behaviour.
- Language popover content switched from hand-rolled `<ul.lang-list>`
  to AntD `<Menu mode="vertical" selectable />`; gains native
  hover/keyboard nav + active highlight.
- Drop `.info-table` `!important` border overrides (8 selectors) so
  Descriptions inherits the AntD theme border colour.
- Drop `.qr-code` padding/background/border-radius overrides; only
  `cursor: pointer` remains (QRCode handles padding/bg itself).
- Remove now-unused `.theme-cycle`, `.lang-list`, `.lang-item*`,
  `.lang-select`, `.settings-popover` rules.
---
 frontend/src/pages/sub/SubPage.css | 84 ++++--------------------------
 frontend/src/pages/sub/SubPage.tsx | 55 ++++++++++---------
 2 files changed, 40 insertions(+), 99 deletions(-)

diff --git a/frontend/src/pages/sub/SubPage.css b/frontend/src/pages/sub/SubPage.css
index 62292db4..d265ba98 100644
--- a/frontend/src/pages/sub/SubPage.css
+++ b/frontend/src/pages/sub/SubPage.css
@@ -53,49 +53,12 @@
 
 .qr-code {
   cursor: pointer;
-  padding: 0 !important;
-  background: #fff;
-  border-radius: 4px;
 }
 
 .info-table {
   margin-top: 12px;
 }
 
-.info-table .ant-descriptions-view,
-.info-table .ant-descriptions-view table,
-.info-table .ant-descriptions-view th,
-.info-table .ant-descriptions-view td {
-  border-color: rgba(0, 0, 0, 0.18) !important;
-}
-
-.info-table tbody > tr > th,
-.info-table tbody > tr > td {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
-}
-
-.info-table tbody > tr:last-child > th,
-.info-table tbody > tr:last-child > td {
-  border-bottom: none !important;
-}
-
-.is-dark .info-table .ant-descriptions-view,
-.is-dark .info-table .ant-descriptions-view table,
-.is-dark .info-table .ant-descriptions-view th,
-.is-dark .info-table .ant-descriptions-view td {
-  border-color: rgba(255, 255, 255, 0.18) !important;
-}
-
-.is-dark .info-table tbody > tr > th,
-.is-dark .info-table tbody > tr > td {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
-}
-
-.is-dark .info-table tbody > tr:last-child > th,
-.is-dark .info-table tbody > tr:last-child > td {
-  border-bottom: none !important;
-}
-
 .links-section {
   margin-top: 16px;
 }
@@ -158,49 +121,20 @@
   text-align: center;
 }
 
-.settings-popover {
-  min-width: 220px;
-}
-
-.theme-cycle {
-  width: 32px;
-  height: 32px;
+.toolbar-btn {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
   border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: var(--bg-card);
-  color: rgba(0, 0, 0, 0.65);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
   padding: 0;
-  transition: background-color 0.2s, transform 0.15s, color 0.2s;
 }
 
-.theme-cycle:hover,
-.theme-cycle:focus-visible {
-  background-color: rgba(64, 150, 255, 0.1);
-  color: #4096ff;
-  transform: scale(1.05);
-  outline: none;
+.toolbar-btn .anticon {
+  font-size: 18px;
 }
 
-.theme-cycle svg {
-  width: 16px;
-  height: 16px;
+.toolbar-btn svg {
+  width: 18px;
+  height: 18px;
 }
 
-.is-dark .theme-cycle {
-  border-color: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.is-dark .theme-cycle:hover,
-.is-dark .theme-cycle:focus-visible {
-  background-color: rgba(64, 150, 255, 0.1);
-  color: #4096ff;
-}
-
-.lang-select {
-  width: 100%;
-}
diff --git a/frontend/src/pages/sub/SubPage.tsx b/frontend/src/pages/sub/SubPage.tsx
index b0eeabc6..82162aed 100644
--- a/frontend/src/pages/sub/SubPage.tsx
+++ b/frontend/src/pages/sub/SubPage.tsx
@@ -8,11 +8,11 @@ import {
   Descriptions,
   Dropdown,
   Layout,
+  Menu,
   message,
   Popover,
   QRCode,
   Row,
-  Select,
   Space,
   Tag,
 } from 'antd';
@@ -21,7 +21,7 @@ import {
   AppleOutlined,
   CopyOutlined,
   DownOutlined,
-  SettingOutlined,
+  TranslationOutlined,
 } from '@ant-design/icons';
 
 import { ClipboardManager, IntlUtil, LanguageManager } from '@/utils';
@@ -206,14 +206,14 @@ export default function SubPage() {
     { key: 'ios-happ', label: 'Happ', onClick: () => open(happUrl) },
   ], [copy, open, shadowrocketUrl, v2boxUrl, streisandUrl, happUrl]);
 
-  const langOptions = useMemo(
-    () => LanguageManager.supportedLanguages.map((l: { value: string; name: string; icon: string }) => ({
-      value: l.value,
+  const langMenuItems = useMemo(
+    () => (LanguageManager.supportedLanguages as { value: string; name: string; icon: string }[]).map((l) => ({
+      key: l.value,
       label: (
-        <>
-          <span aria-label={l.name}>{l.icon}</span>
-          &nbsp;&nbsp;<span>{l.name}</span>
-        </>
+        <Space size={8}>
+          <span aria-hidden="true">{l.icon}</span>
+          <span>{l.name}</span>
+        </Space>
       ),
     })),
     [],
@@ -244,32 +244,39 @@ export default function SubPage() {
 
   const cardExtra = (
     <Space size={8} align="center">
-      <button
-        type="button"
-        id="sub-theme-cycle"
-        className="theme-cycle"
+      <Button
+        shape="circle"
+        size="large"
+        className="toolbar-btn"
         aria-label={t('menu.theme')}
         title={t('menu.theme')}
         onClick={cycleTheme}
       >
         {themeIcon}
-      </button>
+      </Button>
       <Popover
-        title={t('pages.settings.language')}
+        rootClassName={isDark ? 'dark' : 'light'}
         placement="bottomRight"
         trigger="click"
+        styles={{ content: { padding: 4 } }}
         content={
-          <Space orientation="vertical" size={10} className="settings-popover">
-            <Select
-              className="lang-select"
-              value={lang}
-              onChange={onLangChange}
-              options={langOptions}
-            />
-          </Space>
+          <Menu
+            mode="vertical"
+            selectable
+            selectedKeys={[lang]}
+            items={langMenuItems}
+            onClick={({ key }) => onLangChange(key)}
+            style={{ border: 'none', minWidth: 160 }}
+          />
         }
       >
-        <Button shape="circle" icon={<SettingOutlined />} />
+        <Button
+          shape="circle"
+          size="large"
+          className="toolbar-btn"
+          aria-label={t('pages.settings.language')}
+          icon={<TranslationOutlined />}
+        />
       </Popover>
     </Space>
   );