modules/bar/components/Storage.qml

@@ -1,16 +1,20 @@
-import qs.config
-import qs.constants
-import qs.services
-import qs.utils
-import qs.widgets
 import QtQuick
-import QtQuick.Layouts
+import Quickshell
+import "../../../config/"
+import "../../../constants/"
+import "../../../services/"
+import "../../../styled/"
+import "../../../utils/"
 
 StyledLabel {
-    RowLayout {
+    implicitWidth: childrenRect.width
+    implicitHeight: Dimensions.storage.height
+
     Ref {
         service: SystemInfo
     }
+
+    Row {
         StyledText {
             id: icon
 
@@ -18,11 +22,22 @@ StyledLabel {
             font.pixelSize: Dimensions.storage.iconSize
             font.bold: true
             text: Icons.hardDrive
+
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.storage.verticalPadding
+            bottomPadding: Dimensions.storage.verticalPadding
+            leftPadding: Dimensions.storage.horizontalPadding
         }
 
         StyledText {
             id: text
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.storage.verticalPadding
+            bottomPadding: Dimensions.storage.verticalPadding
+            rightPadding: Dimensions.storage.horizontalPadding
+
             font.pixelSize: Dimensions.storage.fontSize
+
             text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
         }
     }

modules/bar/components/mpris/Mpris.qml

@@ -1,3 +1,4 @@
+import Quickshell
 import Quickshell.Services.Mpris
 import QtQuick
 

modules/bar/components/mpris/Player.qml

@@ -1,10 +1,9 @@
-import qs.config
-import qs.widgets
 import Quickshell.Services.Mpris
 import QtQuick
+import "../../../../styled/"
+import "../../../../config/"
 
 Loader {
-    id: root
     required property MprisPlayer modelData
     required property int index
 
@@ -12,37 +11,46 @@ Loader {
     signal previousPlayer
 
     sourceComponent: player
-    property Component player: StyledButton {
+    property Component player: Clickable {
-        id: button
+        id: clickable
+
+        implicitWidth: text.width
+        implicitHeight: Dimensions.mpris.height
 
         onClicked: {
-            if (!root.modelData.canTogglePlaying) {
+            if (!modelData.canTogglePlaying) {
                 return;
             }
-            if (root.modelData.isPlaying) {
+            if (modelData.isPlaying) {
-                root.modelData.pause();
+                modelData.pause();
             } else {
-                root.modelData.play();
+                modelData.play();
             }
         }
 
         onWheel: event => {
             if (event.angleDelta.y > 0) {
-                root.nextPlayer();
+                parent.nextPlayer();
             } else if (event.angleDelta.y < 0) {
-                root.previousPlayer();
+                parent.previousPlayer();
             }
         }
 
-        content: StyledText {
+        StyledText {
             id: text
-            text: `${root.modelData.isPlaying ? "" : ""} ${root.modelData.trackTitle} - ${root.modelData.trackArtist}`
+            text: `${modelData.isPlaying ? "" : ""} ${modelData.trackTitle} - ${modelData.trackArtist}`
+
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.mpris.verticalPadding
+            bottomPadding: Dimensions.mpris.verticalPadding
+            leftPadding: Dimensions.mpris.horizontalPadding
+            rightPadding: Dimensions.mpris.horizontalPadding
 
             font.pixelSize: Dimensions.mpris.fontSize
 
             states: State {
                 name: "hovered"
-                when: button.containsMouse
+                when: clickable.containsMouse
                 PropertyChanges {
                     text {
                         color: Theme.palette.base300