refactor(DisplaySettings): update button styles for zoom controls and color picker to enhance UI consistency

This commit is contained in:
Teo 2025-06-11 13:46:30 +08:00 committed by kangfenmao
parent b41c89972b
commit 76387643f7

View File

@ -172,7 +172,7 @@ const DisplaySettings: FC = () => {
value={userTheme.colorPrimary} value={userTheme.colorPrimary}
onChange={(color) => handleColorPrimaryChange(color.toHexString())} onChange={(color) => handleColorPrimaryChange(color.toHexString())}
showText showText
style={{ width: '110px' }} size="small"
presets={[ presets={[
{ {
label: 'Presets', label: 'Presets',
@ -198,13 +198,15 @@ const DisplaySettings: FC = () => {
<SettingRow> <SettingRow>
<SettingRowTitle>{t('settings.zoom.title')}</SettingRowTitle> <SettingRowTitle>{t('settings.zoom.title')}</SettingRowTitle>
<ZoomButtonGroup> <ZoomButtonGroup>
<Button onClick={() => handleZoomFactor(-0.1)} icon={<Minus size="14" />} /> <Button onClick={() => handleZoomFactor(-0.1)} icon={<Minus size="14" />} color="default" variant="text" />
<ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue> <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
<Button onClick={() => handleZoomFactor(0.1)} icon={<Plus size="14" />} /> <Button onClick={() => handleZoomFactor(0.1)} icon={<Plus size="14" />} color="default" variant="text" />
<Button <Button
onClick={() => handleZoomFactor(0, true)} onClick={() => handleZoomFactor(0, true)}
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}
icon={<RotateCcw size="14" />} icon={<RotateCcw size="14" />}
color="default"
variant="text"
/> />
</ZoomButtonGroup> </ZoomButtonGroup>
</SettingRow> </SettingRow>