From 74267a7dc49d85f30c48af92f14affb1c8ed0cc1 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 26 Jul 2025 23:52:40 -0400
Subject: [PATCH] convert to widgets

---
 modules/bar/components/Cpu.qml | 42 +++++++++++++---------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml
index d54638f..2156c6b 100644
--- a/modules/bar/components/Cpu.qml
+++ b/modules/bar/components/Cpu.qml
@@ -1,29 +1,25 @@
+import qs.config
+import qs.constants
+import qs.services
+import qs.utils
+import qs.widgets
 import QtQuick
-import Quickshell
-import "../../../config/"
-import "../../../constants/"
-import "../../../services/"
-import "../../../styled/"
-import "../../../utils/"
+import QtQuick.Layouts
 
-Clickable {
+StyledButton {
     id: root
 
     property bool showTemp: false
 
-    implicitWidth: row.width
-    implicitHeight: Dimensions.cpu.height
-
-    Ref {
-        service: SystemInfo
-    }
-
     onClicked: {
-        root.showTemp = !root.showTemp;
+        showTemp = !showTemp;
     }
 
-    Row {
+    content: RowLayout {
         id: row
+        Ref {
+            service: SystemInfo
+        }
         StyledText {
             id: icon
 
@@ -32,26 +28,20 @@ Clickable {
             font.bold: true
             text: Icons.cpu
 
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.cpu.verticalPadding
-            bottomPadding: Dimensions.cpu.verticalPadding
-            leftPadding: Dimensions.cpu.horizontalPadding
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
-            anchors.verticalCenter: parent.verticalCenter
-            topPadding: Dimensions.cpu.verticalPadding
-            bottomPadding: Dimensions.cpu.verticalPadding
-            rightPadding: Dimensions.cpu.horizontalPadding
 
             font.pixelSize: Dimensions.cpu.fontSize
-
             text: ` ${(SystemInfo.cpuPerc * 100).toFixed()}%`
 
+            color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
             states: [
                 State {
-                    name: "temp"
+                    name: "showTemp"
                     when: root.showTemp
                     PropertyChanges {
                         text {