components/StyledIconButton.qml

@@ -10,8 +10,6 @@ RoundButton {
         source: "../assets/lucide.woff"
     }
 
-    property alias border: rect.border
-
     font.family: loader.font.family
     font.pixelSize: 16
     radius: 8
@@ -33,14 +31,6 @@ RoundButton {
     }
 
     background: Rectangle {
-        id: rect
-        border.color: control.hovered ? Theme.palette.primary : Theme.palette.base100
-        Behavior on border.color {
-            ColorAnimation {
-                duration: 100
-            }
-        }
-        border.width: 2
         color: control.hovered ? Theme.palette.primary : Theme.palette.base100
         Behavior on color {
             ColorAnimation {

modules/bar/components/Caffeine.qml

@@ -1,15 +1,26 @@
-import qs.components
 import qs.config
 import qs.constants
 import qs.services
+import qs.widgets
 
-StyledIconButton {
+StyledButton {
     id: root
 
-    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base100
+    border.color: Caffeine.enabled ? Theme.palette.secondary : 'transparent'
-    text: Icons.coffee
+    border.width: 2
 
     onClicked: {
         Caffeine.toggle();
     }
+
+    content: StyledText {
+        id: text
+
+        font.family: Theme.lucide.font.family
+        font.pixelSize: Dimensions.caffeine.fontSize
+        font.bold: true
+        text: Icons.coffee
+
+        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+    }
 }