From 035c3b5be938952c3a523ee118f407aa3a8a0b5e Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Mon, 25 May 2026 14:14:53 +0200 Subject: [PATCH] refactor(frontend): hoist .header-row, .icons-only, .summary-card to page-shell.css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Settings and Xray pages both carried identical .header-row / .header-actions / .header-info rules and an identical six-rule .icons-only block that styles tabbed page navigation. Clients, Inbounds, and Nodes all carried identical .summary-card padding rules with the same mobile reduction. None of these are page-specific. Consolidate: - .header-row family → page-shell scoped to .settings-page, .xray-page - .icons-only family → page-shell global (the class is a deliberate opt-in marker, no scope needed) - .summary-card → page-shell scoped to .clients-page, .inbounds-page, .nodes-page (also fixes InboundsPage's missing scope — its rule was global and would have matched stray .summary-card uses elsewhere) InboundsPage.css and NodesPage.css became empty after the move so the files and their per-page imports are deleted. --- frontend/src/pages/clients/ClientsPage.css | 10 ---- frontend/src/pages/inbounds/InboundsPage.css | 9 --- frontend/src/pages/inbounds/InboundsPage.tsx | 1 - frontend/src/pages/nodes/NodesPage.css | 9 --- frontend/src/pages/nodes/NodesPage.tsx | 1 - frontend/src/pages/settings/SettingsPage.css | 44 -------------- frontend/src/pages/xray/XrayPage.css | 44 -------------- frontend/src/styles/page-shell.css | 61 ++++++++++++++++++++ 8 files changed, 61 insertions(+), 118 deletions(-) delete mode 100644 frontend/src/pages/inbounds/InboundsPage.css delete mode 100644 frontend/src/pages/nodes/NodesPage.css diff --git a/frontend/src/pages/clients/ClientsPage.css b/frontend/src/pages/clients/ClientsPage.css index 7f7b3510..8153b279 100644 --- a/frontend/src/pages/clients/ClientsPage.css +++ b/frontend/src/pages/clients/ClientsPage.css @@ -3,16 +3,6 @@ min-width: 100px; } -.clients-page .summary-card { - padding: 16px; -} - -@media (max-width: 768px) { - .clients-page .summary-card { - padding: 8px; - } -} - .client-email-list { max-height: 280px; min-width: 160px; diff --git a/frontend/src/pages/inbounds/InboundsPage.css b/frontend/src/pages/inbounds/InboundsPage.css deleted file mode 100644 index ed6dde7a..00000000 --- a/frontend/src/pages/inbounds/InboundsPage.css +++ /dev/null @@ -1,9 +0,0 @@ -.summary-card { - padding: 16px; -} - -@media (max-width: 768px) { - .summary-card { - padding: 8px; - } -} diff --git a/frontend/src/pages/inbounds/InboundsPage.tsx b/frontend/src/pages/inbounds/InboundsPage.tsx index 111e9601..c72b078b 100644 --- a/frontend/src/pages/inbounds/InboundsPage.tsx +++ b/frontend/src/pages/inbounds/InboundsPage.tsx @@ -36,7 +36,6 @@ import LazyMount from '@/components/LazyMount'; const InboundFormModal = lazy(() => import('./InboundFormModal')); const InboundInfoModal = lazy(() => import('./InboundInfoModal')); const QrCodeModal = lazy(() => import('./QrCodeModal')); -import './InboundsPage.css'; type RowAction = | 'edit' diff --git a/frontend/src/pages/nodes/NodesPage.css b/frontend/src/pages/nodes/NodesPage.css deleted file mode 100644 index 0e157a3c..00000000 --- a/frontend/src/pages/nodes/NodesPage.css +++ /dev/null @@ -1,9 +0,0 @@ -.nodes-page .summary-card { - padding: 16px; -} - -@media (max-width: 768px) { - .nodes-page .summary-card { - padding: 8px; - } -} diff --git a/frontend/src/pages/nodes/NodesPage.tsx b/frontend/src/pages/nodes/NodesPage.tsx index b1a411f6..966b9649 100644 --- a/frontend/src/pages/nodes/NodesPage.tsx +++ b/frontend/src/pages/nodes/NodesPage.tsx @@ -17,7 +17,6 @@ import AppSidebar from '@/components/AppSidebar'; import NodeList from './NodeList'; import NodeFormModal from './NodeFormModal'; import { setMessageInstance } from '@/utils/messageBus'; -import './NodesPage.css'; export default function NodesPage() { const { t } = useTranslation(); diff --git a/frontend/src/pages/settings/SettingsPage.css b/frontend/src/pages/settings/SettingsPage.css index caa7d346..7bacdcbe 100644 --- a/frontend/src/pages/settings/SettingsPage.css +++ b/frontend/src/pages/settings/SettingsPage.css @@ -2,50 +2,6 @@ margin-bottom: 10px; } -.settings-page .header-row { - display: flex; - flex-wrap: wrap; - align-items: center; -} - -.settings-page .header-actions { - padding: 4px; -} - -.settings-page .header-info { - display: flex; - justify-content: flex-end; -} - -.icons-only .ant-tabs-nav { - margin-bottom: 8px; -} - -.icons-only .ant-tabs-nav-wrap { - width: 100%; -} - -.icons-only .ant-tabs-nav-list { - display: flex; - width: 100%; -} - -.icons-only .ant-tabs-tab { - flex: 1 1 0; - justify-content: center; - margin: 0; - padding: 10px 0; -} - -.icons-only .ant-tabs-tab .anticon { - margin: 0; - font-size: 18px; -} - -.icons-only .ant-tabs-nav-operations { - display: none; -} - .ldap-no-inbounds { margin-top: 6px; color: var(--ant-color-text-tertiary); diff --git a/frontend/src/pages/xray/XrayPage.css b/frontend/src/pages/xray/XrayPage.css index 48832166..f9af6960 100644 --- a/frontend/src/pages/xray/XrayPage.css +++ b/frontend/src/pages/xray/XrayPage.css @@ -1,18 +1,3 @@ -.xray-page .header-row { - display: flex; - flex-wrap: wrap; - align-items: center; -} - -.xray-page .header-actions { - padding: 4px; -} - -.xray-page .header-info { - display: flex; - justify-content: flex-end; -} - .xray-page .restart-icon { font-size: 16px; cursor: pointer; @@ -34,32 +19,3 @@ margin: 0; opacity: 0.7; } - -.xray-page .icons-only .ant-tabs-nav { - margin-bottom: 8px; -} - -.xray-page .icons-only .ant-tabs-nav-wrap { - width: 100%; -} - -.xray-page .icons-only .ant-tabs-nav-list { - display: flex; - width: 100%; -} - -.xray-page .icons-only .ant-tabs-tab { - flex: 1 1 0; - justify-content: center; - margin: 0; - padding: 10px 0; -} - -.xray-page .icons-only .ant-tabs-tab .anticon { - margin: 0; - font-size: 18px; -} - -.xray-page .icons-only .ant-tabs-nav-operations { - display: none; -} diff --git a/frontend/src/styles/page-shell.css b/frontend/src/styles/page-shell.css index 50f6229a..5713322e 100644 --- a/frontend/src/styles/page-shell.css +++ b/frontend/src/styles/page-shell.css @@ -80,3 +80,64 @@ .loading-spacer { min-height: calc(100vh - 120px); } + +.settings-page .header-row, +.xray-page .header-row { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.settings-page .header-actions, +.xray-page .header-actions { + padding: 4px; +} + +.settings-page .header-info, +.xray-page .header-info { + display: flex; + justify-content: flex-end; +} + +.icons-only .ant-tabs-nav { + margin-bottom: 8px; +} + +.icons-only .ant-tabs-nav-wrap { + width: 100%; +} + +.icons-only .ant-tabs-nav-list { + display: flex; + width: 100%; +} + +.icons-only .ant-tabs-tab { + flex: 1 1 0; + justify-content: center; + margin: 0; + padding: 10px 0; +} + +.icons-only .ant-tabs-tab .anticon { + margin: 0; + font-size: 18px; +} + +.icons-only .ant-tabs-nav-operations { + display: none; +} + +.clients-page .summary-card, +.inbounds-page .summary-card, +.nodes-page .summary-card { + padding: 16px; +} + +@media (max-width: 768px) { + .clients-page .summary-card, + .inbounds-page .summary-card, + .nodes-page .summary-card { + padding: 8px; + } +}