make buttons ripple

.config/quickshell/modules/session/Session.qml

@@ -82,8 +82,11 @@ Scope {
                     }
                 }
 
-                RowLayout { // First row of buttons
-                    spacing: 15
+                GridLayout {
+                    columns: 4
+                    columnSpacing: 15
+                    rowSpacing: 15
+
                     SessionActionButton {
                         id: sessionLock
                         focus: sessionRoot.visible
@@ -123,10 +126,7 @@ Scope {
                         KeyNavigation.left: sessionLogout
                         KeyNavigation.down: sessionFirmwareReboot
                     }
-                }
 
-                RowLayout { // Second row of buttons
-                    spacing: 15
                     SessionActionButton {
                         id: sessionHibernate
                         buttonIcon: "downloading"

.config/quickshell/modules/session/SessionActionButton.qml

@@ -1,22 +1,30 @@
 import "root:/modules/common"
 import "root:/modules/common/widgets/"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Io
 
-Button {
+RippleButton {
     id: button
 
     property string buttonIcon
     property string buttonText
     property bool keyboardDown: false
 
-    implicitHeight: 120
-    implicitWidth: 120
+    buttonRadius: button.focus ? Appearance.rounding.full : Appearance.rounding.verylarge
+    colBackground: button.keyboardDown ? Appearance.colors.colSecondaryContainerActive : 
+        button.focus ? Appearance.colors.colSecondaryContainerHover : 
+        Appearance.m3colors.m3secondaryContainer
+    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
+    colRipple: Appearance.colors.colSecondaryContainerActive
+
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    background.implicitHeight: 120
+    background.implicitWidth: 120
 
-    PointingHandInteraction {}
     Keys.onPressed: (event) => {
         if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
             keyboardDown = true
@@ -31,21 +39,10 @@ Button {
         }
     }
 
-    background: Rectangle {
-        anchors.fill: parent
-        radius: Appearance.rounding.full
-        color: (button.down || button.keyboardDown) ? Appearance.colors.colLayer2Active : ((button.hovered || button.focus) ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
-
-        Behavior on color {
-            animation: Appearance.animation.elementMove.colorAnimation.createObject(this)
-        }
-
-    }
-
     contentItem: MaterialSymbol {
         id: icon
         anchors.fill: parent
-        color: Appearance.colors.colOnLayer2
+        color: Appearance.colors.colOnLayer0
         horizontalAlignment: Text.AlignHCenter
         iconSize: 40
         text: buttonIcon