Add date and time parsing and add colors from matugen to all current elements of top bar

quickshell/ui/Clock.qml

@@ -5,7 +5,7 @@ import "../constants"
 
 Text {
     id: clock
-    color: Constants.colBlue
+    color: Colors.md3.on_primary_fixed
 
     font {
         family: Constants.fontFamily
@@ -14,7 +14,7 @@ Text {
     }
 
     function updateTime() {
-        text = Qt.formatDateTime(new Date(), "ddd, MMM dd - HH:mm");
+        text = Qt.formatDateTime(new Date(), "[dd-MM-yy] - [HH:mm]");
     }
 
     Component.onCompleted: updateTime()

quickshell/ui/LineSeparator.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import "../constants"
+
+// vertical line separator for top bar
+Rectangle {
+    width: 1
+    height: 16
+    color: Colors.md3.on_background
+}

quickshell/ui/TopBar.qml

@@ -72,33 +72,29 @@ Item {
         RowLayout {
             spacing: 10
 
+            LineSeparator {}
+            
             BarText {
                 prefix: "C"
                 value: cpuUsage
             }
 
-            Rectangle {
+            LineSeparator {}
-                width: 1
-                height: 16
-                color: Colors.md3.on_background
-            }
 
             BarText {
                 prefix: "M"
                 value: memUsage
             }
 
-            Rectangle {
+            LineSeparator {}
-                width: 1
-                height: 16
-                color: Colors.md3.on_background
-            }
 
             BarText {
                 prefix: "G"
                 value: gpuUsage
             }
 
+            LineSeparator {}
+
             Clock {}
         }
     }