1 files changed, 59 insertions, 19 deletions
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index 801e93d..662e837 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -5,34 +5,74 @@ import qs.services
 import qs.config
 import QtQuick
 
-Column {
+StyledRect {
     id: root
 
-    property color colour: Colours.palette.m3tertiary
+    readonly property color colour: Colours.palette.m3tertiary
+    readonly property int padding: Appearance.padding.normal
 
-    spacing: Appearance.spacing.small
+    implicitWidth: Config.bar.sizes.innerWidth
+    implicitHeight: layout.implicitHeight + root.padding * 2
 
-    Loader {
-        anchors.horizontalCenter: parent.horizontalCenter
+    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Colours.tPalette.m3surfaceContainer.a)
+    radius: Appearance.rounding.full
 
-        active: Config.bar.clock.showIcon
-        visible: active
+    Column {
+        id: layout
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.small
 
-        sourceComponent: MaterialIcon {
-            text: "calendar_month"
-            color: root.colour
+        Loader {
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            active: Config.bar.clock.showIcon
+            visible: active
+
+            sourceComponent: MaterialIcon {
+                text: "calendar_month"
+                color: root.colour
+            }
         }
-    }
 
-    StyledText {
-        id: text
+        Column {
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                horizontalAlignment: StyledText.AlignHCenter
+                text: Time.format("ddd")
+                font.pointSize: Appearance.font.size.small
+                font.family: Appearance.font.family.sans
+                color: root.colour
+            }
+
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                horizontalAlignment: StyledText.AlignHCenter
+                text: Time.format("dd")
+                font.pointSize: Appearance.font.size.smaller
+                font.family: Appearance.font.family.sans
+                color: root.colour
+            }
+        }
+
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: visible ? 1 : 0
 
-        anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width * 0.8
+            color: root.colour
+            opacity: 0.2
+        }
 
-        horizontalAlignment: StyledText.AlignHCenter
-        text: Time.format(Config.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm")
-        font.pointSize: Appearance.font.size.smaller
-        font.family: Appearance.font.family.mono
-        color: root.colour
+        StyledText {
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            horizontalAlignment: StyledText.AlignHCenter
+            text: Time.format(Config.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm")
+            font.pointSize: Appearance.font.size.smaller
+            font.family: Appearance.font.family.mono
+            color: root.colour
+        }
     }
 }