From 65140db40cdd09ac492dbd2ad6d584e372311b01 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 24 Dec 2024 03:32:51 -0800
Subject: [PATCH] Fixed styling of playback toggle button in volume menu.
 (#615)

---
 src/components/menus/audio/active/index.tsx |  2 +-
 src/lib/utils.ts                            |  2 +-
 src/scss/style/menus/audiomenu.scss         | 24 ++++++++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/menus/audio/active/index.tsx b/src/components/menus/audio/active/index.tsx
index fa640cc..470aba1 100644
--- a/src/components/menus/audio/active/index.tsx
+++ b/src/components/menus/audio/active/index.tsx
@@ -16,7 +16,7 @@ const Header = (): JSX.Element => (
     <box className={'menu-label-container volume selected'} halign={Gtk.Align.FILL}>
         <label className={'menu-label audio volume'} halign={Gtk.Align.START} hexpand label={'Volume'} />
         <button
-            className={'menu-label slider-toggle'}
+            className={'menu-icon-button menu-label slider-toggle volume'}
             onClick={(_, event) => {
                 if (!isPrimaryClick(event)) {
                     return;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7af5afc..898d918 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -238,7 +238,7 @@ export function isAnImage(imgFilePath: string): boolean {
         GdkPixbuf.Pixbuf.new_from_file(normalizePath(imgFilePath));
         return true;
     } catch (error) {
-        console.error(error);
+        console.info(error);
         return false;
     }
 }
diff --git a/src/scss/style/menus/audiomenu.scss b/src/scss/style/menus/audiomenu.scss
index f7d4bbc..462dda7 100644
--- a/src/scss/style/menus/audiomenu.scss
+++ b/src/scss/style/menus/audiomenu.scss
@@ -31,6 +31,18 @@
         color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
     }
 
+    .menu-icon-button.volume {
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
+        padding: 0em 1em;
+
+        label {
+            font-size: 1.25em;
+        }
+        &:hover {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
+        }
+    }
+
     .menu-slider.playback {
         trough {
             background: if(
@@ -213,18 +225,6 @@
         border-radius: 0em;
     }
 
-    .slider-toggle {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
-        padding: 0em 1em;
-        label {
-            font-size: 1.25em;
-        }
-
-        &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
-        }
-    }
-
     .active-playbacks-scrollable {
         min-height: 12.5em;