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:
MHSanaei 2026-05-25 03:58:31 +02:00
parent 0362590b10
commit 9292464418
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
2 changed files with 6 additions and 23 deletions

View file

@ -133,8 +133,3 @@
font-size: 18px; font-size: 18px;
} }
.toolbar-btn svg {
width: 18px;
height: 18px;
}

View file

@ -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"