notifications to icon button

components/StyledSlider.qml

@@ -7,6 +7,10 @@ Slider {
 
     height: 24
 
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+
     background: Rectangle {
         x: control.leftPadding
         y: control.topPadding + control.availableHeight / 2 - height / 2
@@ -18,12 +22,12 @@ Slider {
         color: Theme.palette.base100
 
         Rectangle {
-          width: control.visualPosition * parent.width
-          Behavior on width {
-            NumberAnimation {
-              duration: 75
+            width: control.visualPosition * parent.width
+            Behavior on width {
+                NumberAnimation {
+                    duration: 75
+                }
             }
-          }
             height: parent.height
             color: Theme.palette.primary
             radius: 8

components/StyledSwitch.qml

@@ -4,6 +4,11 @@ import QtQuick.Controls
 
 Switch {
     id: control
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+
     indicator: Item {
         implicitWidth: 48
         implicitHeight: 22

modules/bar/components/Cpu.qml

@@ -1,3 +1,4 @@
+import qs.components
 import qs.config
 import qs.constants
 import qs.services

modules/bar/components/Gpu.qml

@@ -1,3 +1,4 @@
+import qs.components
 import qs.config
 import qs.constants
 import qs.services

modules/bar/components/Pipewire.qml

@@ -1,3 +1,4 @@
+import qs.components
 import qs.config
 import qs.services
 import qs.widgets

modules/bar/components/notifications/Notifications.qml

@@ -1,33 +1,22 @@
-import qs.config
+import qs.components
 import qs.constants
 import qs.services
-import qs.widgets
 import QtQuick
 
-StyledButton {
+StyledIconButton {
     id: root
 
     onClicked: {
         menu.toggle();
     }
 
-    content: StyledText {
-        id: text
+    text: Notifications.hasNotifications ? Icons.bell : Icons.bellRing
 
-        font.family: Theme.lucide.font.family
-        font.pixelSize: Dimensions.notifications.fontSize
-        font.bold: true
-        text: Icons.bell
-
-        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-
-        states: State {
-            when: Notifications.hasNotifications
-            PropertyChanges {
-                text {
-                    text: Icons.bellRing
-                    color: root.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
-                }
+    states: State {
+        when: Notifications.hasNotifications
+        PropertyChanges {
+            root {
+                text: Icons.bellRing
             }
         }
     }

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

@@ -1,3 +1,4 @@
+import qs.components
 import qs.widgets
 import Quickshell