refactor(frontend): hoist .header-row, .icons-only, .summary-card to page-shell.css

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.
This commit is contained in:
MHSanaei 2026-05-25 14:14:53 +02:00
parent f6ffbcb878
commit 035c3b5be9
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
8 changed files with 61 additions and 118 deletions

View file

@ -3,16 +3,6 @@
min-width: 100px; min-width: 100px;
} }
.clients-page .summary-card {
padding: 16px;
}
@media (max-width: 768px) {
.clients-page .summary-card {
padding: 8px;
}
}
.client-email-list { .client-email-list {
max-height: 280px; max-height: 280px;
min-width: 160px; min-width: 160px;

View file

@ -1,9 +0,0 @@
.summary-card {
padding: 16px;
}
@media (max-width: 768px) {
.summary-card {
padding: 8px;
}
}

View file

@ -36,7 +36,6 @@ import LazyMount from '@/components/LazyMount';
const InboundFormModal = lazy(() => import('./InboundFormModal')); const InboundFormModal = lazy(() => import('./InboundFormModal'));
const InboundInfoModal = lazy(() => import('./InboundInfoModal')); const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
const QrCodeModal = lazy(() => import('./QrCodeModal')); const QrCodeModal = lazy(() => import('./QrCodeModal'));
import './InboundsPage.css';
type RowAction = type RowAction =
| 'edit' | 'edit'

View file

@ -1,9 +0,0 @@
.nodes-page .summary-card {
padding: 16px;
}
@media (max-width: 768px) {
.nodes-page .summary-card {
padding: 8px;
}
}

View file

@ -17,7 +17,6 @@ import AppSidebar from '@/components/AppSidebar';
import NodeList from './NodeList'; import NodeList from './NodeList';
import NodeFormModal from './NodeFormModal'; import NodeFormModal from './NodeFormModal';
import { setMessageInstance } from '@/utils/messageBus'; import { setMessageInstance } from '@/utils/messageBus';
import './NodesPage.css';
export default function NodesPage() { export default function NodesPage() {
const { t } = useTranslation(); const { t } = useTranslation();

View file

@ -2,50 +2,6 @@
margin-bottom: 10px; 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 { .ldap-no-inbounds {
margin-top: 6px; margin-top: 6px;
color: var(--ant-color-text-tertiary); color: var(--ant-color-text-tertiary);

View file

@ -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 { .xray-page .restart-icon {
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
@ -34,32 +19,3 @@
margin: 0; margin: 0;
opacity: 0.7; 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;
}

View file

@ -80,3 +80,64 @@
.loading-spacer { .loading-spacer {
min-height: calc(100vh - 120px); 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;
}
}