fix(firewall): Tab-Farben im globalen ConfigProvider — AntD 6 Tokens korrekt

Nested ConfigProvider überschreibt Root-Provider in AntD 6 nicht zuverlässig.
Tabs-Tokens (itemColor #334155, hover #0F172A, selected/inkBar #0EA5E9,
fontSize 13, padding 10px 18px) direkt in globalem antdTheme in App.tsx.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Debian
2026-05-31 23:16:41 +02:00
parent 836016648c
commit a84b9ae10a
3 changed files with 13 additions and 12 deletions

View File

@@ -1 +1 @@
1.2.52 1.2.53

View File

@@ -62,6 +62,16 @@ const antdTheme = {
colorTextSecondary: '#64748B', colorTextSecondary: '#64748B',
controlHeight: 34, controlHeight: 34,
}, },
components: {
Tabs: {
itemColor: '#334155',
itemHoverColor: '#0F172A',
itemSelectedColor: '#0EA5E9',
inkBarColor: '#0EA5E9',
titleFontSize: 13,
horizontalItemPadding: '10px 18px',
},
},
} }
function RequireAuth({ children }: { children: ReactNode }) { function RequireAuth({ children }: { children: ReactNode }) {

View File

@@ -1,4 +1,4 @@
import { ConfigProvider, Space, Tag, Tabs } from 'antd' import { Space, Tag, Tabs } from 'antd'
import { CheckCircleOutlined, CloseCircleOutlined, FireOutlined, SafetyOutlined } from '@ant-design/icons' import { CheckCircleOutlined, CloseCircleOutlined, FireOutlined, SafetyOutlined } from '@ant-design/icons'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
@@ -125,16 +125,7 @@ export default function FirewallPage() {
)} )}
/> />
<FirewallKPIStrip nftablesActive={nftables?.active} /> <FirewallKPIStrip nftablesActive={nftables?.active} />
<ConfigProvider theme={{ components: { Tabs: { <Tabs items={tabs} defaultActiveKey="rules" />
itemColor: '#475569',
itemHoverColor: '#1e293b',
itemSelectedColor: '#1677ff',
inkBarColor: '#1677ff',
titleFontSize: 13,
horizontalItemPadding: '10px 16px',
}}}}>
<Tabs items={tabs} defaultActiveKey="rules" />
</ConfigProvider>
</div> </div>
) )
} }