update playerbar styling

- icon colors
- icon sizes

src/components/player/PlayerBar.tsx

@@ -88,7 +88,7 @@ const PlayerBar = () => {
         settings.setSync('volume', localVolume);
       }
       setIsDraggingVolume(false);
-    }, 10);
+    }, 200);
 
     return () => clearTimeout(debounce);
   }, [
@@ -146,7 +146,9 @@ const PlayerBar = () => {
   };
 
   const handleVolumeSlider = (e: number) => {
-    setIsDraggingVolume(true);
+    if (!isDraggingVolume) {
+      setIsDraggingVolume(true);
+    }
     const vol = Number((e / 100).toFixed(2));
     setLocalVolume(vol);
   };

src/components/player/styled.tsx

@@ -27,6 +27,7 @@ export const PlayerColumn = styled.div<{
 `;
 
 export const PlayerControlIcon = styled(Icon)`
+  font-size: medium;
   color: ${(props) =>
     props.active === 'true'
       ? props.theme.primary.main

src/components/shared/styled.ts

@@ -187,6 +187,7 @@ export const ContextMenuWindow = styled.div<{
 export const StyledContextMenuButton = styled(Button)`
   text-align: left;
   margin: 0px !important;
+  border-radius: 0px !important;
 `;
 
 export const ContextMenuDivider = styled.hr`

src/styles/styledTheme.ts

@@ -16,7 +16,7 @@ export const defaultDark = {
     text: '#D8D8D8',
     rowSelected: '#4D5156',
     playerBarText: '#e9ebf0',
-    playerBarButtons: '#b3b3b3',
+    playerBarButtons: 'rgba(240, 240, 240, 0.8)',
     playerBarButtonsHover: '#ffffff',
     inputBackground: '#1A1D24',
     spinner: '#FFFFFF',
@@ -45,7 +45,7 @@ export const defaultLight = {
     text: '#000000',
     rowSelected: '#BABCC2',
     playerBarText: '#EBEEF5',
-    playerBarButtons: '#EBEEF5',
+    playerBarButtons: 'rgba(240, 240, 240, 0.8)',
     playerBarButtonsHover: '#FFFFFF',
     inputBackground: '#F4F7FF',
     spinner: '#000000',