From e0f0524eb90f2d1d76ee3e13d083ba3b0afd34a7 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 24 Jun 2025 20:31:33 -0700
Subject: [PATCH] adjust button styles on playerbar

---
 .../player/components/center-controls.tsx     | 38 +++------
 .../components/player-button.module.css       |  8 +-
 .../player/components/player-button.tsx       | 85 ++++++++++---------
 .../player/components/right-controls.tsx      |  8 +-
 4 files changed, 63 insertions(+), 76 deletions(-)

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index fbfa257d..7d75791d 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './center-controls.module.css';
 
-import { PlayerButton } from '/@/renderer/features/player/components/player-button';
+import { PlayButton, PlayerButton } from '/@/renderer/features/player/components/player-button';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
 import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
@@ -119,12 +119,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                             <Icon
                                 fill="default"
                                 icon="mediaStop"
-                                size={buttonSize}
+                                size={buttonSize - 2}
                             />
                         }
                         onClick={handleStop}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
+                            openDelay: 0,
                         }}
                         variant="tertiary"
                     />
@@ -146,6 +147,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                           postProcess: 'sentenceCase',
                                       })
                                     : t('player.shuffle', { postProcess: 'sentenceCase' }),
+                            openDelay: 0,
                         }}
                         variant="tertiary"
                     />
@@ -160,6 +162,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         onClick={handlePrevTrack}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
+                            openDelay: 0,
                         }}
                         variant="secondary"
                     />
@@ -178,33 +181,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                     context: 'back',
                                     postProcess: 'sentenceCase',
                                 }),
+
+                                openDelay: 0,
                             }}
                             variant="secondary"
                         />
                     )}
-                    <PlayerButton
+                    <PlayButton
                         disabled={currentSong?.id === undefined}
-                        icon={
-                            status === PlayerStatus.PAUSED ? (
-                                <Icon
-                                    icon="mediaPlay"
-                                    size={buttonSize}
-                                />
-                            ) : (
-                                <Icon
-                                    icon="mediaPause"
-                                    size={buttonSize}
-                                />
-                            )
-                        }
+                        isPaused={status === PlayerStatus.PAUSED}
                         onClick={handlePlayPause}
-                        tooltip={{
-                            label:
-                                status === PlayerStatus.PAUSED
-                                    ? t('player.play', { postProcess: 'sentenceCase' })
-                                    : t('player.pause', { postProcess: 'sentenceCase' }),
-                        }}
-                        variant="main"
                     />
                     {skip?.enabled && (
                         <PlayerButton
@@ -221,6 +207,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                     context: 'forward',
                                     postProcess: 'sentenceCase',
                                 }),
+
+                                openDelay: 0,
                             }}
                             variant="secondary"
                         />
@@ -236,6 +224,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         onClick={handleNextTrack}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
+                            openDelay: 0,
                         }}
                         variant="secondary"
                     />
@@ -274,10 +263,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                             postProcess: 'sentenceCase',
                                         })
                             }`,
+                            openDelay: 0,
                         }}
                         variant="tertiary"
                     />
-
                     <PlayerButton
                         icon={
                             <Icon
@@ -294,6 +283,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         }
                         tooltip={{
                             label: t('player.playRandom', { postProcess: 'sentenceCase' }),
+                            openDelay: 0,
                         }}
                         variant="tertiary"
                     />
diff --git a/src/renderer/features/player/components/player-button.module.css b/src/renderer/features/player/components/player-button.module.css
index da4d8daa..57147235 100644
--- a/src/renderer/features/player/components/player-button.module.css
+++ b/src/renderer/features/player/components/player-button.module.css
@@ -2,11 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-.motion-wrapper.main {
-    display: flex;
-    margin: 0 0.5rem;
+    cursor: pointer;
 }
 
 .player-button {
@@ -16,7 +12,6 @@
     width: 100%;
     padding: 0.5rem;
     overflow: visible;
-    cursor: default;
 
     button {
         display: flex;
@@ -42,7 +37,6 @@
 }
 
 .main {
-    background: var(--theme-colors-foreground);
     border-radius: 50%;
 
     svg {
diff --git a/src/renderer/features/player/components/player-button.tsx b/src/renderer/features/player/components/player-button.tsx
index ee5b2109..42f0f927 100644
--- a/src/renderer/features/player/components/player-button.tsx
+++ b/src/renderer/features/player/components/player-button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { motion } from 'motion/react';
+import { t } from 'i18next';
 import { forwardRef, ReactNode } from 'react';
 
 import styles from './player-button.module.css';
@@ -14,59 +14,62 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
     variant: 'main' | 'secondary' | 'tertiary';
 }
 
-export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
-    ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
+export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
+    ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
         if (tooltip) {
             return (
                 <Tooltip {...tooltip}>
-                    <motion.div
+                    <ActionIcon
                         className={clsx({
-                            [styles.main]: variant === 'main',
-                            [styles.motionWrapper]: true,
+                            [styles.active]: isActive,
                         })}
-                        ref={ref}
+                        {...rest}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            rest.onClick?.(e);
+                        }}
+                        variant="subtle"
                     >
-                        <ActionIcon
-                            className={clsx(styles.playerButton, styles[variant], {
-                                [styles.active]: isActive,
-                            })}
-                            {...rest}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                rest.onClick?.(e);
-                            }}
-                            variant="transparent"
-                        >
-                            {icon}
-                        </ActionIcon>
-                    </motion.div>
+                        {icon}
+                    </ActionIcon>
                 </Tooltip>
             );
         }
 
         return (
-            <motion.div
-                className={clsx({
-                    [styles.main]: variant === 'main',
-                    [styles.motionWrapper]: true,
+            <ActionIcon
+                className={clsx(styles.playerButton, styles[variant], {
+                    [styles.active]: isActive,
                 })}
-                ref={ref}
+                {...rest}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    rest.onClick?.(e);
+                }}
+                variant="subtle"
             >
-                <ActionIcon
-                    className={clsx(styles.playerButton, styles[variant], {
-                        [styles.active]: isActive,
-                    })}
-                    {...rest}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        rest.onClick?.(e);
-                    }}
-                    size="compact-md"
-                    variant="transparent"
-                >
-                    {icon}
-                </ActionIcon>
-            </motion.div>
+                {icon}
+            </ActionIcon>
         );
     },
 );
+
+interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
+    isPaused?: boolean;
+}
+
+export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => {
+    return (
+        <ActionIcon
+            className={styles.main}
+            icon={isPaused ? 'mediaPlay' : 'mediaPause'}
+            tooltip={
+                isPaused
+                    ? t('player.play', { postProcess: 'sentenceCase' })
+                    : t('player.pause', { postProcess: 'sentenceCase' })
+            }
+            variant="white"
+            {...props}
+        />
+    );
+};
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 7ac5d0b5..9b34f820 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -232,7 +232,7 @@ export const RightControls = () => {
                                 label: t('player.playbackSpeed', { postProcess: 'sentenceCase' }),
                                 openDelay: 0,
                             }}
-                            variant="transparent"
+                            variant="subtle"
                         />
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
@@ -276,7 +276,7 @@ export const RightControls = () => {
                             : t('player.favorite', { postProcess: 'titleCase' }),
                         openDelay: 0,
                     }}
-                    variant="transparent"
+                    variant="subtle"
                 />
                 <ActionIcon
                     icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
@@ -289,7 +289,7 @@ export const RightControls = () => {
                         label: t('player.viewQueue', { postProcess: 'titleCase' }),
                         openDelay: 0,
                     }}
-                    variant="transparent"
+                    variant="subtle"
                 />
                 <ActionIcon
                     icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
@@ -304,7 +304,7 @@ export const RightControls = () => {
                         label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
                         openDelay: 0,
                     }}
-                    variant="transparent"
+                    variant="subtle"
                 />
                 {!isMinWidth ? (
                     <PlayerbarSlider