From 3f27d6618a12324e39616cd4e84d23725991bfab Mon Sep 17 00:00:00 2001
From: Sem <sem@intersting-corner.nl>
Date: Fri, 3 Apr 2026 21:29:47 +0200
Subject: [PATCH] Add date and time parsing and add colors from matugen to all
 current elements of top bar

---
 quickshell/ui/Clock.qml         |  4 ++--
 quickshell/ui/LineSeparator.qml |  9 +++++++++
 quickshell/ui/TopBar.qml        | 16 ++++++----------
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 quickshell/ui/LineSeparator.qml

diff --git a/quickshell/ui/Clock.qml b/quickshell/ui/Clock.qml
index 5cbc42e..f046b1f 100644
--- a/quickshell/ui/Clock.qml
+++ b/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()
diff --git a/quickshell/ui/LineSeparator.qml b/quickshell/ui/LineSeparator.qml
new file mode 100644
index 0000000..20a20a2
--- /dev/null
+++ b/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
+}
diff --git a/quickshell/ui/TopBar.qml b/quickshell/ui/TopBar.qml
index b3d0c10..f1c5ca5 100644
--- a/quickshell/ui/TopBar.qml
+++ b/quickshell/ui/TopBar.qml
@@ -72,33 +72,29 @@ Item {
         RowLayout {
             spacing: 10
 
+            LineSeparator {}
+            
             BarText {
                 prefix: "C"
                 value: cpuUsage
             }
 
-            Rectangle {
-                width: 1
-                height: 16
-                color: Colors.md3.on_background
-            }
+            LineSeparator {}
 
             BarText {
                 prefix: "M"
                 value: memUsage
             }
 
-            Rectangle {
-                width: 1
-                height: 16
-                color: Colors.md3.on_background
-            }
+            LineSeparator {}
 
             BarText {
                 prefix: "G"
                 value: gpuUsage
             }
 
+            LineSeparator {}
+
             Clock {}
         }
     }