components/StyledButton.qml

@@ -1,37 +1,32 @@
 import qs.config
 import QtQuick
-import QtQuick.Controls
+import Quickshell.Widgets
 
-Button {
+WrapperMouseArea {
     id: root
+    required property Component content
+    property alias padding: rectangle.margin
+    property alias color: rectangle.color
     property alias border: rectangle.border
     property alias radius: rectangle.radius
 
-    font.pixelSize: 14
+    hoverEnabled: true
-    padding: 6
+    cursorShape: Qt.PointingHandCursor
 
-    palette.button: hovered ? Theme.palette.primary : Theme.palette.base100
+    WrapperRectangle {
-    Behavior on palette.button {
-        ColorAnimation {
-            duration: 100
-        }
-    }
-    palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-    Behavior on palette.buttonText {
-        ColorAnimation {
-            duration: 100
-        }
-    }
-
-    wheelEnabled: true
-
-    HoverHandler {
-        cursorShape: Qt.PointingHandCursor
-    }
-
-    background: Rectangle {
         id: rectangle
-        color: root.palette.button
+        margin: 8
         radius: 8
+        color: root.containsMouse && root.hoverEnabled ? Theme.palette.primary : Theme.palette.base100
+        Behavior on color {
+            ColorAnimation {
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        }
+        Loader {
+            active: true
+            sourceComponent: root.content
+        }
     }
 }

modules/bar/components/Cpu.qml

@@ -16,11 +16,8 @@ StyledButton {
         showTemp = !showTemp;
     }
 
-    contentItem: RowLayout {
+    content: RowLayout {
         id: row
-
-        spacing: 0
-
         Ref {
             service: SystemInfo
         }
@@ -31,15 +28,17 @@ StyledButton {
             font.pixelSize: Dimensions.cpu.iconSize
             font.bold: true
             text: Icons.cpu
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
             font.pixelSize: Dimensions.cpu.fontSize
-            text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
+            text: ` ${(SystemInfo.cpuPerc * 100).toFixed()}%`
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
 
             states: [
                 State {
@@ -47,7 +46,7 @@ StyledButton {
                     when: root.showTemp
                     PropertyChanges {
                         text {
-                            text: ` ${SystemInfo.cpuTemp.toFixed().toString().padStart(2, "_")}℃`
+                            text: ` ${(SystemInfo.cpuTemp)}℃`
                         }
                     }
                 }

modules/bar/components/Gpu.qml

@@ -16,11 +16,8 @@ StyledButton {
         root.showTemp = !root.showTemp;
     }
 
-    contentItem: RowLayout {
+    content: RowLayout {
         id: row
-
-        spacing: 0
-
         Ref {
             service: SystemInfo
         }
@@ -31,15 +28,14 @@ StyledButton {
             font.pixelSize: Dimensions.gpu.iconSize
             font.bold: true
             text: Icons.gpu
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
             font.pixelSize: Dimensions.gpu.fontSize
-            text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
+
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+            text: ` ${(SystemInfo.gpuPerc * 100).toFixed()}%`
 
             states: [
                 State {
@@ -47,7 +43,7 @@ StyledButton {
                     when: root.showTemp
                     PropertyChanges {
                         text {
-                            text: ` ${SystemInfo.gpuTemp.toFixed().toString().padStart(2, "_")}℃`
+                            text: ` ${(SystemInfo.gpuTemp)}℃`
                         }
                     }
                 }

modules/bar/components/Mpris.qml

@@ -1,15 +1,51 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import qs.services
+import qs.widgets
 import QtQuick
+import QtQuick.Layouts
 
 StyledButton {
     id: root
 
-    text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
-
     onClicked: {
         Visibility.dashboard = !Visibility.dashboard;
     }
+
+    content: ColumnLayout {
+        id: content
+
+        spacing: 0
+
+        implicitWidth: text.width
+        implicitHeight: text.height
+        StyledText {
+            id: text
+            text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}`
+
+            font.pixelSize: Dimensions.mpris.fontSize
+
+            states: State {
+                name: "hovered"
+                when: root.containsMouse
+                PropertyChanges {
+                    text {
+                        color: Theme.palette.primarycontent
+                    }
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "hovered"
+                reversible: true
+                ColorAnimation {
+                    properties: "color"
+                    duration: 100
+                    easing.type: Easing.InOutCubic
+                }
+            }
+        }
+    }
 }

modules/bar/components/Pipewire.qml

@@ -1,24 +1,25 @@
 import qs.components
 import qs.config
 import qs.services
+import qs.widgets
 import QtQuick
 
 StyledButton {
     id: root
 
-    text: `${Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "}   ${(Pipewire.volume * 100).toFixed()}%`
+    onClicked: mouse => {
-
+        if (mouse.button == Qt.LeftButton) {
-    onClicked: {
+            Pipewire.toggleMute();
-        Pipewire.toggleMute();
+        } else if (mouse.button == Qt.RightButton) {
+            popup.opened = !popup.opened;
+        }
     }
 
-    WheelHandler {
+    onWheel: event => {
-        onWheel: event => {
+        if (event.angleDelta.y > 0) {
-            if (event.angleDelta.y > 0) {
+            Pipewire.incrementVolume();
-                Pipewire.incrementVolume();
+        } else if (event.angleDelta.y < 0) {
-            } else if (event.angleDelta.y < 0) {
+            Pipewire.decrementVolume();
-                Pipewire.decrementVolume();
-            }
         }
     }
 
@@ -28,9 +29,17 @@ StyledButton {
             when: Pipewire.muted
             PropertyChanges {
                 root {
-                    palette.button: Theme.palette.error
+                    color: Theme.palette.error
                 }
             }
         }
     ]
+
+    content: StyledText {
+        id: text
+        property string icon: Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "
+        text: `${icon} ${(Pipewire.volume * 100).toFixed()}%`
+        font.pixelSize: Dimensions.pipewire.fontSize
+        color: root.containsMouse || Pipewire.muted ? Theme.palette.base300 : Theme.palette.basecontent
+    }
 }

modules/bar/components/bluetooth/AvailableDevice.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import qs.widgets
 import QtQuick
 import QtQuick.Layouts
@@ -30,11 +31,13 @@ StyledLabel {
         }
 
         StyledButton {
-
             Layout.alignment: Qt.AlignRight
             hoverEnabled: !root.modelData.pairing
-            text: 'Pair'
+            color: containsMouse ? Theme.palette.primary : Theme.palette.base200
-
+            content: StyledText {
+                text: 'Pair'
+                font.pixelSize: 12
+            }
             onClicked: {
                 if (!hoverEnabled) {
                     return;

modules/bar/components/bluetooth/ConnectedDevice.qml

@@ -80,9 +80,11 @@ StyledLabel {
 
         StyledButton {
             Layout.alignment: Qt.AlignRight
-            text: 'Disconnect'
+            color: containsMouse ? Theme.palette.error : Theme.palette.base200
-            palette.button: hovered ? Theme.palette.error : Theme.palette.base200
+            content: StyledText {
-
+                text: 'Disconnect'
+                font.pixelSize: 12
+            }
             onClicked: {
                 if (root.modelData.state != BluetoothDeviceState.Connected) {
                     return;

modules/bar/components/bluetooth/PairedDevice.qml

@@ -34,8 +34,11 @@ StyledLabel {
             Layout.alignment: Qt.AlignRight
             StyledButton {
                 hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
-                text: 'Connect'
+                color: containsMouse ? Theme.palette.primary : Theme.palette.base200
-
+                content: StyledText {
+                    text: 'Connect'
+                    font.pixelSize: 12
+                }
                 onClicked: {
                     if (!hoverEnabled) {
                         return;
@@ -46,10 +49,11 @@ StyledLabel {
 
             StyledButton {
                 hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
-                text: 'Unpair'
+                color: containsMouse ? Theme.palette.error : Theme.palette.base200
-
+                content: StyledText {
-                palette.button: hovered ? Theme.palette.error : Theme.palette.base100
+                    text: 'Unpair'
-
+                    font.pixelSize: 12
+                }
                 onClicked: {
                     if (!hoverEnabled) {
                         return;

modules/bar/components/notifications/NotificationMenu.qml

@@ -7,6 +7,7 @@ import qs.widgets
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
 import Quickshell.Widgets
 
 StyledPopupWindow {
@@ -33,8 +34,11 @@ StyledPopupWindow {
             StyledButton {
                 id: clearButton
                 Layout.alignment: Qt.AlignRight
-                text: "Clear"
                 onClicked: Notifications.clear()
+                content: StyledText {
+                    text: "Clear"
+                    color: clearButton.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+                }
             }
         }
 

modules/bar/components/tray/menu/MenuItem.qml

@@ -1,12 +1,13 @@
 import qs.components
+import qs.widgets
 import Quickshell
 
 StyledButton {
     id: root
-
     property QsMenuEntry menuEntry
-
-    text: root.menuEntry.text
-
     onClicked: menuEntry.triggered()
+    content: StyledText {
+        font.pixelSize: 14
+        text: root.menuEntry.text
+    }
 }

modules/drawers/dashboard/Dashboard.qml

@@ -19,18 +19,19 @@ StyledDrawer {
         radius: 8
         margin: 32
         ColumnLayout {
+          spacing: 8
+          RowLayout {
             spacing: 8
-            RowLayout {
-                spacing: 8
 
                 Layout.alignment: Qt.AlignHCenter
 
-                StyledIconButton {
+                StyledButton {
                     id: previousPlayerButton
-
                     visible: Mpris.players.length > 1
-                    text: Icons.chevronLeft
+                    content: LucideIcon {
-
+                        color: previousPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
+                        text: Icons.chevronLeft
+                    }
                     onClicked: {
                         Mpris.previousPlayer();
                     }
@@ -51,9 +52,10 @@ StyledDrawer {
                 StyledButton {
                     id: nextPlayerButton
                     visible: Mpris.players.length > 1
-
+                    content: LucideIcon {
-                    text: Icons.chevronRight
+                        color: nextPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent
-
+                        text: Icons.chevronRight
+                    }
                     onClicked: {
                         Mpris.nextPlayer();
                     }
@@ -61,7 +63,7 @@ StyledDrawer {
             }
 
             MprisController {
-                player: Mpris.active
+              player: Mpris.active
             }
         }
     }

modules/pomodoro/Pomodoro.qml

@@ -108,7 +108,10 @@ StyledWindow {
 
                 Layout.alignment: Qt.AlignHCenter
 
-                text: "Reset"
+                content: StyledText {
+                    text: "Reset"
+                    font.pixelSize: 14
+                }
 
                 onClicked: {
                     Pomodoro.reset();