sidebar: volume mixer: adjust style

.config/quickshell/ii/modules/sidebarRight/CenterWidgetGroup.qml

@@ -15,7 +15,7 @@ Rectangle {
     color: Appearance.colors.colLayer1
 
     property int selectedTab: 0
-    property var tabButtonList: [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Volume mixer")}]
+    property var tabButtonList: [{"icon": "notifications", "name": Translation.tr("Notifications")}, {"icon": "volume_up", "name": Translation.tr("Audio")}]
 
     Keys.onPressed: (event) => {
         if (event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) {

.config/quickshell/ii/modules/sidebarRight/volumeMixer/AudioDeviceSelectorButton.qml

@@ -6,15 +6,17 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.Pipewire
 
-GroupButton {
+RippleButton {
     id: button
     required property bool input
 
     buttonRadius: Appearance.rounding.small
     colBackground: Appearance.colors.colLayer2
     colBackgroundHover: Appearance.colors.colLayer2Hover
-    colBackgroundActive: Appearance.colors.colLayer2Active
+    colRipple: Appearance.colors.colLayer2Active
-    clickedWidth: baseWidth + 30
+
+    implicitHeight: contentItem.implicitHeight + 6 * 2
+    implicitWidth: contentItem.implicitWidth + 6 * 2
 
     contentItem: RowLayout {
         anchors.fill: parent

.config/quickshell/ii/modules/sidebarRight/volumeMixer/VolumeMixer.qml

@@ -99,19 +99,13 @@ Item {
             }
         }
 
-        // Separator
-        Rectangle {
-            color: Appearance.m3colors.m3outlineVariant
-            implicitHeight: 1
-            Layout.fillWidth: true
-        }
-
-
         // Device selector
-        ButtonGroup {
+        RowLayout {
             id: deviceSelectorRowLayout
             Layout.fillWidth: true
             Layout.fillHeight: false
+            uniformCellSizes: true
+
             AudioDeviceSelectorButton {
                 Layout.fillWidth: true
                 input: false