antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

adjust styles to better support light theme

Browse source
This commit is contained in:
jeffvli 2025-06-25 19:44:28 -07:00
parent ac0c396712
commit 8f585a5be9
8 changed files with 66 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/player/components/player-button.module.css
View file

@ -37,8 +37,8 @@
}
.main {
border-radius: 50%;
background: var(--theme-colors-foreground) !important;
border-radius: 50%;
svg {
display: flex;

41
src/renderer/features/player/components/player-button.tsx
View file

@ -15,7 +15,7 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
}
export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
if (tooltip) {
return (
<Tooltip {...tooltip}>
@ -23,6 +23,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
className={clsx({
[styles.active]: isActive,
})}
ref={ref}
{...rest}
onClick={(e) => {
e.stopPropagation();
@ -41,6 +42,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
className={clsx(styles.playerButton, styles[variant], {
[styles.active]: isActive,
})}
ref={ref}
{...rest}
onClick={(e) => {
e.stopPropagation();
@ -58,20 +60,23 @@ interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
isPaused?: boolean;
}
export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => {
return (
<ActionIcon
className={styles.main}
icon={isPaused ? 'mediaPlay' : 'mediaPause'}
iconProps={{
size: 'lg',
}}
tooltip={{
label: isPaused
? (t('player.play', { postProcess: 'sentenceCase' }) as string)
: (t('player.pause', { postProcess: 'sentenceCase' }) as string),
}}
{...props}
/>
);
};
export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
({ isPaused, ...props }: PlayButtonProps, ref) => {
return (
<ActionIcon
className={styles.main}
icon={isPaused ? 'mediaPlay' : 'mediaPause'}
iconProps={{
size: 'lg',
}}
ref={ref}
tooltip={{
label: isPaused
? (t('player.play', { postProcess: 'sentenceCase' }) as string)
: (t('player.pause', { postProcess: 'sentenceCase' }) as string),
}}
{...props}
/>
);
},
);