pass color and rotation

components/StyledIconButton.qml

@@ -11,25 +11,35 @@ RoundButton {
     }
 
     property alias border: rect.border
+    property color color: hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+    property int rotation: 0
 
     font.family: loader.font.family
-    font.pixelSize: 16
+    font.pixelSize: 18
     radius: 8
-    padding: 8
+    padding: 6
 
     HoverHandler {
         cursorShape: Qt.PointingHandCursor
     }
 
     contentItem: Text {
+        id: icon
         font: control.font
         text: control.text
-        color: control.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+        color: control.color
         Behavior on color {
             ColorAnimation {
                 duration: 100
             }
         }
+        rotation: control.rotation
+        Behavior on rotation {
+            RotationAnimation {
+                duration: 200
+                easing.type: Easing.InOutCubic
+            }
+        }
     }
 
     background: Rectangle {

modules/bar/components/Pywal.qml

@@ -1,27 +1,17 @@
-import qs.config
+import qs.components
 import qs.constants
-import qs.widgets
 import QtQuick
 import Quickshell.Io
 
-StyledButton {
+StyledIconButton {
     id: clickable
 
+    text: Icons.brickWall
+
     onClicked: {
         process.running = true;
     }
 
-    content: StyledText {
-        id: text
-
-        font.family: Theme.lucide.font.family
-        font.pixelSize: Dimensions.caffeine.fontSize
-        font.bold: true
-        text: Icons.brickWall
-
-        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-    }
-
     Process {
         id: process
         command: ["sh", "-c", "~/dotfiles/.scripts/pywal-swww.sh"]

modules/bar/components/bluetooth/Bluetooth.qml

@@ -1,22 +1,12 @@
-import qs.config
+import qs.components
 import qs.constants
-import qs.widgets
 
-StyledButton {
+StyledIconButton {
     id: root
 
-    onClicked: popup.toggle()
-
-    content: StyledText {
-        id: text
-
-        font.family: Theme.lucide.font.family
-        font.pixelSize: Dimensions.bluetooth.fontSize
-        font.bold: true
     text: Icons.bluetooth
 
-        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+    onClicked: popup.toggle()
-    }
 
     BluetoothMenu {
         id: popup

modules/bar/components/hyprland/Workspace.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.config
 import qs.constants
 import qs.widgets
@@ -5,6 +7,7 @@ import QtQuick
 import Quickshell.Hyprland
 
 Loader {
+    id: root
     required property HyprlandWorkspace modelData
 
     active: modelData.id > 0
@@ -13,7 +16,7 @@ Loader {
     property Component workspace: StyledButton {
         id: clickable
 
-        onClicked: modelData.activate()
+        onClicked: root.modelData.activate()
 
         content: Text {
             id: icon
@@ -28,7 +31,7 @@ Loader {
             states: [
                 State {
                     name: "focused"
-                    when: modelData.focused
+                    when: root.modelData.focused
                     PropertyChanges {
                         icon {
                             rotation: 180
@@ -38,7 +41,7 @@ Loader {
                 },
                 State {
                     name: "active"
-                    when: modelData.active
+                    when: root.modelData.active
                     PropertyChanges {
                         icon {
                             text: Icons.triangleDashed