modules/bar/components/Gpu.qml

@@ -1,25 +1,29 @@
-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/"
 
-StyledButton {
+Clickable {
     id: root
 
     property bool showTemp: false
 
+    implicitWidth: row.width
+    implicitHeight: Dimensions.gpu.height
+
+    Ref {
+        service: SystemInfo
+    }
+
     onClicked: {
         root.showTemp = !root.showTemp;
     }
 
-    content: RowLayout {
+    Row {
         id: row
-        Ref {
-            service: SystemInfo
-        }
         StyledText {
             id: icon
 
@@ -27,10 +31,19 @@ StyledButton {
             font.pixelSize: Dimensions.gpu.iconSize
             font.bold: true
             text: Icons.gpu
+
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.gpu.verticalPadding
+            bottomPadding: Dimensions.gpu.verticalPadding
+            leftPadding: Dimensions.gpu.horizontalPadding
         }
 
         StyledText {
             id: text
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.gpu.verticalPadding
+            bottomPadding: Dimensions.gpu.verticalPadding
+            rightPadding: Dimensions.gpu.horizontalPadding
 
             font.pixelSize: Dimensions.gpu.fontSize
 

modules/bar/components/Memory.qml

@@ -1,26 +1,43 @@
-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
-        Ref {
+    implicitHeight: Dimensions.memory.height
-            service: SystemInfo
+
-        }
+    Ref {
+        service: SystemInfo
+    }
+
+    Row {
         StyledText {
+            id: icon
+
             font.family: Theme.lucide.font.family
             font.pixelSize: Dimensions.memory.iconSize
             font.bold: true
             text: Icons.memoryStick
+
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.memory.verticalPadding
+            bottomPadding: Dimensions.memory.verticalPadding
+            leftPadding: Dimensions.memory.horizontalPadding
         }
 
         StyledText {
             id: text
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.memory.verticalPadding
+            bottomPadding: Dimensions.memory.verticalPadding
+            rightPadding: Dimensions.memory.horizontalPadding
+
             font.pixelSize: Dimensions.memory.fontSize
+
             text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
         }
     }

modules/bar/components/Network.qml

@@ -1,16 +1,24 @@
-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 {
+    id: root
-        Ref {
+
-            service: NetworkService
+    implicitWidth: row.width
-        }
+    implicitHeight: Dimensions.network.height
+
+    Ref {
+        id: ref
+        service: NetworkService
+    }
+
+    Row {
+        id: row
         StyledText {
             id: icon
 
@@ -19,6 +27,11 @@ StyledLabel {
             font.bold: true
             text: Icons.wifiOff
 
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.network.verticalPadding
+            bottomPadding: Dimensions.network.verticalPadding
+            leftPadding: Dimensions.network.horizontalPadding
+
             states: [
                 State {
                     name: "high"
@@ -52,7 +65,13 @@ StyledLabel {
 
         StyledText {
             id: text
+            anchors.verticalCenter: parent.verticalCenter
+            topPadding: Dimensions.network.verticalPadding
+            bottomPadding: Dimensions.network.verticalPadding
+            rightPadding: Dimensions.network.horizontalPadding
+
             font.pixelSize: Dimensions.network.fontSize
+
             text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
         }
     }

modules/bar/components/Notifications.qml

@@ -1,17 +1,21 @@
-import qs.config
-import qs.constants
-import qs.services
-import qs.widgets
 import QtQuick
+import Quickshell.Io
+import "../../../config/"
+import "../../../constants/"
+import "../../../services/"
+import "../../../styled/"
 
-StyledButton {
+Clickable {
     id: clickable
 
+    implicitWidth: text.width
+    implicitHeight: Dimensions.notifications.height
+
     onClicked: {
         Notifications.clear();
     }
 
-    content: StyledText {
+    StyledText {
         id: text
 
         font.family: Theme.lucide.font.family
@@ -21,12 +25,18 @@ StyledButton {
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
 
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.notifications.verticalPadding
+        bottomPadding: Dimensions.notifications.verticalPadding
+        leftPadding: Dimensions.notifications.horizontalPadding
+        rightPadding: Dimensions.notifications.horizontalPadding
+
         states: State {
             when: Notifications.hasNotifications
             PropertyChanges {
                 text {
-                    text: Icons.bellRing
+                  text: Icons.bellRing
-                    color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
+                  color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
                 }
             }
         }

modules/bar/components/Pipewire.qml

@@ -1,13 +1,16 @@
-import qs.config
-import qs.widgets
 import QtQuick
 import Quickshell.Services.Pipewire
+import "../../../config/"
+import "../../../styled/"
 
-StyledButton {
+Clickable {
     id: clickable
 
     property var sink: Pipewire.defaultAudioSink
 
+    implicitWidth: text.width
+    implicitHeight: Dimensions.pipewire.height
+
     PwObjectTracker {
         id: bound
         objects: [clickable.sink]
@@ -15,7 +18,7 @@ StyledButton {
 
     onClicked: mouse => {
         if (!sink) {
-            return;
+          return
         }
         if (mouse.button == Qt.LeftButton) {
             sink.audio.muted = !sink?.audio.muted;
@@ -53,11 +56,20 @@ StyledButton {
         }
     ]
 
-    content: StyledText {
+    StyledText {
         id: text
+
         property string icon: " "
+
         text: `${icon} ${(clickable.sink?.audio.volume * 100).toFixed()}%`
         font.pixelSize: Dimensions.pipewire.fontSize
+
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.pipewire.verticalPadding
+        bottomPadding: Dimensions.pipewire.verticalPadding
+        leftPadding: Dimensions.pipewire.horizontalPadding
+        rightPadding: Dimensions.pipewire.horizontalPadding
     }
 }

modules/bar/components/Pywal.qml

@@ -1,17 +1,20 @@
-import qs.config
-import qs.constants
-import qs.widgets
 import QtQuick
 import Quickshell.Io
+import "../../../config/"
+import "../../../constants/"
+import "../../../styled/"
 
-StyledButton {
+Clickable {
     id: clickable
 
+    implicitWidth: text.width
+    implicitHeight: Dimensions.caffeine.height
+
     onClicked: {
         process.running = true;
     }
 
-    content: StyledText {
+    StyledText {
         id: text
 
         font.family: Theme.lucide.font.family
@@ -20,6 +23,12 @@ StyledButton {
         text: Icons.brickWall
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.caffeine.verticalPadding
+        bottomPadding: Dimensions.caffeine.verticalPadding
+        leftPadding: Dimensions.caffeine.horizontalPadding
+        rightPadding: Dimensions.caffeine.horizontalPadding
     }
 
     Process {

services/NetworkService.qml

@@ -9,7 +9,6 @@ Singleton {
 
     readonly property list<AccessPoint> networks: []
     readonly property AccessPoint active: networks.find(n => n.active) ?? null
-    property int refCount
 
     reloadableId: "network"