use Dimensions config

modules/bar/components/Clock.qml

@@ -1,48 +1,39 @@
-import Quickshell
 import Quickshell.Io
 import QtQuick
 import "root:styled"
+import "../../../config/"
 
 Item {
     id: clock
 
-    implicitWidth: 200
-    implicitHeight: 30
+    implicitWidth: Dimensions.clock.width
+    implicitHeight: Dimensions.clock.height
 
     StyledLabel {
-        anchors.fill: parent
+      anchors.fill: text
     }
 
     StyledText {
         id: text
         anchors.centerIn: parent
 
+        font.pixelSize: Dimensions.clock.fontSize
+
         Process {
-            // give the process object an id so we can talk
-            // about it from the timer
             id: dateProc
 
             command: ["date"]
             running: true
 
             stdout: StdioCollector {
-                onStreamFinished: text.text = this.text
+                onStreamFinished: text.text = ` ${this.text}`
             }
         }
 
-        // use a timer to rerun the process at an interval
         Timer {
-            // 1000 milliseconds is 1 second
             interval: 1000
-
-            // start the timer immediately
             running: true
-
-            // run the timer again when it ends
             repeat: true
-
-            // when the timer is triggered, set the running property of the
-            // process to true, which reruns it if stopped.
             onTriggered: dateProc.running = true
         }
     }

modules/bar/components/Workspace.qml

@@ -10,29 +10,50 @@ Item {
 
     visible: modelData.id > 0
 
-    width: 30
-    height: 30
+    width: Dimensions.workspace.width
+    height: Dimensions.workspace.height
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: button
+        color: Theme.palette.base100
+        radius: Dimensions.radius
+    }
 
     Button {
         id: button
         anchors.centerIn: parent
 
-        padding: 6
-        leftPadding: 7
-        rightPadding: 7
+        verticalPadding: Dimensions.workspace.verticalPadding
+        horizontalPadding: Dimensions.workspace.horizontalPadding
 
-        background: Rectangle {
-            id: rectangle
-            anchors.fill: parent
-            color: "#161212"
-            radius: 8
-        }
-
-        rotation: workspace.modelData.active ? 0 : 180
+        background: null
 
         icon.source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
-        icon.color: workspace.modelData.active ? Theme.palette.primary : Theme.palette.basecontent
+        icon.color: Theme.palette.basecontent
 
         onClicked: workspace.modelData.activate()
+
+        states: State {
+            name: "active"
+            when: workspace.modelData.active
+            PropertyChanges {
+                button {
+                    rotation: 180
+                    icon.color: Theme.palette.primary
+                }
+            }
+        }
+
+        transitions: Transition {
+            from: ""
+            to: "active"
+            reversible: true
+            NumberAnimation {
+                properties: "rotation"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        }
     }
 }

modules/bar/components/Workspaces.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Controls
 import Quickshell.Hyprland
+import "../../../config/"
 
 Row {
     id: root
 
-    spacing: 4
+    spacing: Dimensions.workspace.spacing
 
     Repeater {