mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 12:44:22 +00:00
refactor(frontend): switch sub page theme icons to AntD primitives
Replace the three hand-rolled SVG theme icons (sun, moon, moon+star) with AntD `<SunOutlined />`, `<MoonOutlined />`, `<MoonFilled />` for the light / dark / ultra-dark states. Switch the theme `<Button>` to use the `icon` prop instead of children so it renders the same way as the language button. Drop `.toolbar-btn svg` CSS — no longer needed once the icon comes from AntD.
This commit is contained in:
parent
0362590b10
commit
9292464418
2 changed files with 6 additions and 23 deletions
|
|
@ -133,8 +133,3 @@
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-btn svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,9 @@ import {
|
||||||
AppleOutlined,
|
AppleOutlined,
|
||||||
CopyOutlined,
|
CopyOutlined,
|
||||||
DownOutlined,
|
DownOutlined,
|
||||||
|
MoonFilled,
|
||||||
|
MoonOutlined,
|
||||||
|
SunOutlined,
|
||||||
TranslationOutlined,
|
TranslationOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
|
|
@ -219,21 +222,7 @@ export default function SubPage() {
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
const themeIcon = !isDark ? (
|
const themeIcon = !isDark ? <SunOutlined /> : !isUltra ? <MoonOutlined /> : <MoonFilled />;
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
||||||
<circle cx="12" cy="12" r="4" />
|
|
||||||
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
|
||||||
</svg>
|
|
||||||
) : !isUltra ? (
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
||||||
<path fill="none" d="M19 3l0.7 1.4 1.4 0.7-1.4 0.7L19 7.2l-0.7-1.4-1.4-0.7 1.4-0.7z" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const cardTitle = (
|
const cardTitle = (
|
||||||
<Space>
|
<Space>
|
||||||
|
|
@ -250,10 +239,9 @@ export default function SubPage() {
|
||||||
className="toolbar-btn"
|
className="toolbar-btn"
|
||||||
aria-label={t('menu.theme')}
|
aria-label={t('menu.theme')}
|
||||||
title={t('menu.theme')}
|
title={t('menu.theme')}
|
||||||
|
icon={themeIcon}
|
||||||
onClick={cycleTheme}
|
onClick={cycleTheme}
|
||||||
>
|
/>
|
||||||
{themeIcon}
|
|
||||||
</Button>
|
|
||||||
<Popover
|
<Popover
|
||||||
rootClassName={isDark ? 'dark' : 'light'}
|
rootClassName={isDark ? 'dark' : 'light'}
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue