lock: better buttons

config/LockConfig.qml

@@ -22,7 +22,7 @@ JsonObject {
         property int mediaCoverBorder: 3
         property int largeScreenWidth: 2560
         property int smallScreenWidth: 1080
-        property int buttonsWidth: 500
+        property int buttonsWidth: 400
         property int buttonsWidthSmall: 300
     }
 }

modules/lock/Buttons.qml

@@ -4,29 +4,19 @@ import qs.widgets
 import qs.services
 import qs.config
 import Quickshell
-import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
-WrapperItem {
-    readonly property real nonAnimMargin: handler.hovered ? Appearance.padding.large * 2 : Appearance.padding.large * 1.2
+Item {
+    id: root
+
+    readonly property real nonAnimMargin: handler.hovered ? Appearance.padding.large * 1.5 : Appearance.padding.large
     readonly property real nonAnimWidth: handler.hovered ? Config.lock.sizes.buttonsWidth : Config.lock.sizes.buttonsWidthSmall
     readonly property real nonAnimHeight: (nonAnimWidth + nonAnimMargin * 2) / 4
 
-    margin: nonAnimMargin
-    rightMargin: 0
-    bottomMargin: 0
     implicitWidth: nonAnimWidth
     implicitHeight: nonAnimHeight
 
-    Behavior on margin {
-        NumberAnimation {
-            duration: Appearance.anim.durations.large
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
     Behavior on implicitWidth {
         NumberAnimation {
             duration: Appearance.anim.durations.large
@@ -52,6 +42,10 @@ WrapperItem {
     RowLayout {
         id: layout
 
+        anchors.fill: parent
+        anchors.margins: root.nonAnimMargin
+        anchors.rightMargin: 0
+        anchors.bottomMargin: 0
         spacing: Appearance.spacing.normal
 
         SessionButton {
@@ -73,6 +67,14 @@ WrapperItem {
             icon: "cached"
             command: ["systemctl", "reboot"]
         }
+
+        Behavior on anchors.margins {
+            NumberAnimation {
+                duration: Appearance.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.emphasized
+            }
+        }
     }
 
     component SessionButton: StyledRect {
@@ -82,7 +84,7 @@ WrapperItem {
         Layout.fillWidth: true
         Layout.preferredHeight: width
 
-        radius: stateLayer.containsMouse ? Appearance.rounding.large * 2 : Appearance.rounding.large * 1.2
+        radius: Appearance.rounding.large * 1.2
         color: Colours.palette.m3secondaryContainer
 
         StateLayer {
@@ -103,13 +105,5 @@ WrapperItem {
             font.pointSize: (parent.width * 0.4) || 1
             font.weight: handler.hovered ? 500 : 400
         }
-
-        Behavior on radius {
-            NumberAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 }