feat: add bouncy animation to buttons

src/MainBar.qml

@@ -21,11 +21,7 @@ PanelWindow {
         bottom: true
     }
 
-    margins.left: 2
+    width: 40
-    margins.top: 2
-    margins.bottom: 2
-
-    width: 30
     color: "transparent"
 
     NotificationToasts {
@@ -34,13 +30,16 @@ PanelWindow {
 
     Rectangle {
         color: "transparent"
-        anchors.margins: 5
+        anchors.alignWhenCentered: true
+        anchors.centerIn: parent
 
         height: parent.height
         width: parent.width
 
         ColumnLayout {
             width: 30
+            anchors.horizontalCenter: parent.horizontalCenter
+
             Layout.maximumWidth: 30
 
             // TODO: on click open a calendar view

src/base/BButton.qml

@@ -8,37 +8,46 @@ MouseArea {
 
     cursorShape: Qt.PointingHandCursor
 
-    onClicked: {
-        click.color = "red";
-        b.start();
-    }
-
     hoverEnabled: true
 
     BRectangle {
-        id: click
+        id: self
-        anchors.fill: parent
+        anchors.centerIn: parent
-        color: Qt.darker(Config.colourMain, 1.1)
-
-        ColorAnimation on color {
-            id: b
-
-            to: Qt.darker(Config.colourMain, 1.1)
-            duration: 300
-        }
-
-        Rectangle {
-            id: hover
-            visible: mouse.containsMouse
-            anchors.fill: parent
-            radius: parent.radius
-            color: "#9F9F9FC8"
-        }
 
         Text {
             visible: mouse.text?.length > 0
             text: mouse.text
             anchors.centerIn: parent
         }
+
+        states: [
+            State {
+                name: "moved"
+                when: mouse.containsMouse && !mouse.pressed
+                PropertyChanges {
+                    target: self
+                    width: mouse.width * 1.1
+                    height: mouse.width * 1.1
+                }
+            },
+            State {
+                name: "clicked"
+                when: mouse.pressed
+                PropertyChanges {
+                    target: self
+                    width: mouse.width * 0.9
+                    height: mouse.width * 0.9
+                }
+            }
+        ]
+
+        transitions: Transition {
+            NumberAnimation {
+                properties: "width,height"
+                easing.type: Easing.OutBack
+                easing.overshoot: 5
+                duration: 200
+            }
+        }
     }
 }

src/widgets/caffeine/Caffeine.qml

@@ -1,16 +1,17 @@
 import "../../base"
 import "../../provider"
 
+import QtQuick
 import Quickshell.Widgets
 
 BButton {
     id: caffeine
 
+    onClicked: () => Inhibitor.toggle()
+
     IconImage {
         anchors.fill: parent
         anchors.margins: 4
         source: Inhibitor.active ? "root:assets/eye-open.svg" : "root:assets/eye-closed.svg"
     }
-
-    onClicked: () => Inhibitor.toggle()
 }