better vinyl styling

bar/modules/vinyl.py

@@ -1,12 +1,10 @@
-from fabric.widgets.box import Box
-from fabric.widgets.label import Label
-from fabric.widgets.eventbox import EventBox
-from fabric.widgets.overlay import Overlay
+from fabric.widgets.button import Button
+from fabric.widgets.image import Image
 from fabric.core.service import Property
 import subprocess
 
 
-class VinylButton(Box):
+class VinylButton(Button):
     @Property(bool, "read-write", default_value=False)
     def active(self) -> bool:
         return self._active
@@ -35,35 +33,26 @@ class VinylButton(Box):
         ],
         **kwargs,
     ):
-        super().__init__(**kwargs)
-
         # Initialize properties
         self._active = False
         self._active_command = active_command
         self._inactive_command = inactive_command
 
-        # Set up the icon
-        self.icon = Label(
-            label="",  # CD icon
+        # Set up the icon using GTK icon
+        self.icon = Image(
+            icon_name="folder-music-symbolic",
+            icon_size=16,
             name="vinyl-icon",
-            style="",
         )
 
-        # Set up event box to handle clicks
-        self.event_box = EventBox(
-            events="button-press",
-            child=Overlay(
-                child=self.icon,
-            ),
+        # Initialize the Button with the icon as child
+        super().__init__(
             name="vinyl-button",
+            child=self.icon,
+            on_clicked=self._on_clicked,
+            **kwargs,
         )
 
-        # Connect click event
-        self.event_box.connect("button-press-event", self._on_clicked)
-
-        # Add to parent box
-        self.add(self.event_box)
-
         # Initialize appearance
         self._update_appearance()
 
@@ -74,12 +63,10 @@ class VinylButton(Box):
         else:
             self.remove_style_class("active")
 
-    def _on_clicked(self, _, event):
+    def _on_clicked(self, button=None):
         """Handle button click event"""
-        if event.button == 1:  # Left click
-            # Toggle active state
-            self.active = not self.active
-        return True
+        # Toggle active state
+        self.active = not self.active
 
     def _execute_active_command(self):
         """Execute shell command when button is activated"""

bar/styles/vinyl.css

@@ -1,41 +1,29 @@
 /* Vinyl button styling */
 #vinyl-button {
-    padding: 0px 8px;
-    transition: padding 0.05s steps(8);
-    background-color: rgba(180, 180, 180, 0.2);
-    border-radius: 4px;
-    transition: all 0.2s ease;
+    background-color: var(--module-bg);
+    padding: 4px 8px;
+    border-radius: 12px;
+    transition: background-color 0.2s ease;
+}
+
+#vinyl-button:hover {
+    background-color: var(--light-bg);
 }
 
 /* Active state styling */
-.active #vinyl-button {
-    background-color: rgba(108, 158, 175, 0.7);
-    padding: 0px 32px;
+#vinyl-button.active {
+    background-color: var(--pink);
+}
+
+#vinyl-button.active:hover {
+    background-color: var(--turquoise);
 }
 
 /* Icon styling */
 #vinyl-icon {
-    color: #555555;
-    min-width: 36px;
+    color: var(--foreground);
 }
 
-/* Label styling */
-#vinyl-label {
-    color: #333333;
-}
-
-/* Active state changes for icon and label */
-.active #vinyl-icon,
-.active #vinyl-label {
-    color: var(--pink);
-    padding: 0px 32px;
-}
-
-/* Hover effect */
-#vinyl-button:hover {
-    background-color: rgba(180, 180, 180, 0.4);
-}
-
-.active #vinyl-button:hover {
-    background-color: rgba(108, 158, 175, 0.9);
+#vinyl-button.active #vinyl-icon {
+    color: var(--background);
 }