sidebar toggle buttons

Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml

@@ -2,9 +2,9 @@ import Quickshell.Bluetooth
 import Quickshell.Networking as QSNetwork
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Components
 import qs.Components
 import qs.Config
-import qs.Modules
 import qs.Helpers
 import qs.Daemons
 
@@ -19,16 +19,12 @@ CustomRect {
 	implicitHeight: layout.implicitHeight + 18 * 2
 	radius: Appearance.rounding.smallest
 
-	ColumnLayout {
+	ButtonRow {
 		id: layout
 
 		anchors.fill: parent
 		anchors.margins: 18
-		spacing: 10
-
-		RowLayout {
-			Layout.alignment: Qt.AlignHCenter
-			spacing: 7
+		spacing: Appearance.spacing.extraSmall
 
 		Toggle {
 			checked: Network.wifiEnabled
@@ -88,7 +84,6 @@ CustomRect {
 			onClicked: GameMode.enabled = !GameMode.enabled
 		}
 	}
-	}
 
 	CustomShortcut {
 		name: "toggle-dnd"
@@ -99,19 +94,9 @@ CustomRect {
 	}
 
 	component Toggle: IconButton {
-		Layout.fillWidth: true
-		Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? 18 : internalChecked ? 7 : 0)
-		inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+		fillWidth: true
+		isRound: true
 		isToggle: true
-		radius: stateLayer.pressed ? 6 / 2 : internalChecked ? 6 : 8
-		radiusAnim.duration: MaterialEasing.expressiveEffectsTime
-		radiusAnim.easing.bezierCurve: MaterialEasing.expressiveEffects
-
-		Behavior on Layout.preferredWidth {
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-			}
-		}
+		shapeMorph: true
 	}
 }