From efa0d9ec35ac09f19eaf280f5b48c24de0bec410 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Thu, 1 Feb 2024 20:59:00 -0800
Subject: [PATCH] [enhancement]: larger player buttons, clearer random icon

---
 .../player/components/center-controls.tsx     | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 6c2b50fd..d84685c0 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -6,7 +6,6 @@ import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import { IoIosPause } from 'react-icons/io';
 import {
-    RiMenuAddFill,
     RiPlayFill,
     RiRepeat2Line,
     RiRepeatOneLine,
@@ -17,6 +16,7 @@ import {
     RiSpeedFill,
     RiStopFill,
 } from 'react-icons/ri';
+import { BsDice3 } from 'react-icons/bs';
 import styled from 'styled-components';
 import { Text } from '/@/renderer/components';
 import { useCenterControls } from '../hooks/use-center-controls';
@@ -171,17 +171,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             <ControlsContainer>
                 <ButtonsContainer>
                     <PlayerButton
-                        icon={<RiStopFill size={15} />}
+                        icon={<RiStopFill size={20} />}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="tertiary"
                         onClick={handleStop}
                     />
                     <PlayerButton
                         $isActive={shuffle !== PlayerShuffle.NONE}
-                        icon={<RiShuffleFill size={15} />}
+                        icon={<RiShuffleFill size={20} />}
                         tooltip={{
                             label:
                                 shuffle === PlayerShuffle.NONE
@@ -190,29 +189,26 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                           postProcess: 'sentenceCase',
                                       })
                                     : t('player.shuffle', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="tertiary"
                         onClick={handleToggleShuffle}
                     />
                     <PlayerButton
-                        icon={<RiSkipBackFill size={15} />}
+                        icon={<RiSkipBackFill size={20} />}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="secondary"
                         onClick={handlePrevTrack}
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={<RiRewindFill size={15} />}
+                            icon={<RiRewindFill size={20} />}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'back',
                                     postProcess: 'sentenceCase',
                                 }),
-                                openDelay: 500,
                             }}
                             variant="secondary"
                             onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
@@ -232,30 +228,27 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 status === PlayerStatus.PAUSED
                                     ? t('player.play', { postProcess: 'sentenceCase' })
                                     : t('player.pause', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="main"
                         onClick={handlePlayPause}
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={<RiSpeedFill size={15} />}
+                            icon={<RiSpeedFill size={20} />}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'forward',
                                     postProcess: 'sentenceCase',
                                 }),
-                                openDelay: 500,
                             }}
                             variant="secondary"
                             onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
                         />
                     )}
                     <PlayerButton
-                        icon={<RiSkipForwardFill size={15} />}
+                        icon={<RiSkipForwardFill size={20} />}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="secondary"
                         onClick={handleNextTrack}
@@ -264,9 +257,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         $isActive={repeat !== PlayerRepeat.NONE}
                         icon={
                             repeat === PlayerRepeat.ONE ? (
-                                <RiRepeatOneLine size={15} />
+                                <RiRepeatOneLine size={20} />
                             ) : (
-                                <RiRepeat2Line size={15} />
+                                <RiRepeat2Line size={20} />
                             )
                         }
                         tooltip={{
@@ -286,17 +279,15 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                           postProcess: 'sentenceCase',
                                       })
                             }`,
-                            openDelay: 500,
                         }}
                         variant="tertiary"
                         onClick={handleToggleRepeat}
                     />
 
                     <PlayerButton
-                        icon={<RiMenuAddFill size={15} />}
+                        icon={<BsDice3 size={20} />}
                         tooltip={{
                             label: t('player.playRandom', { postProcess: 'sentenceCase' }),
-                            openDelay: 500,
                         }}
                         variant="tertiary"
                         onClick={() =>