feat: style clock widget similarly to audio widget, increase font weight and make reactive

src/ClockWidget.qml

@@ -1,11 +1,33 @@
 import QtQuick
 import QtQuick.Layouts
+import "provider"
 
-ColumnLayout {
+Rectangle {
-    Text {
+    width: parent.width
-        text: String(Time.date.getHours()).padStart(2, '0')
+    height: clock.height * 1.5
-    }
+    anchors.bottomMargin: 5
-    Text {
+    anchors.topMargin: 5
-        text: String(Time.date.getMinutes()).padStart(2, '0')
+    border.color: "black"
+    border.width: 2
+    radius: 5
+
+    Rectangle {
+        id: clock
+        height: hours.height + minutes.height
+        anchors.centerIn: parent
+        anchors.verticalCenter: parent.verticalCenter
+        Text {
+            id: hours
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.weight: Font.ExtraBold
+            text: String(Time.date.getHours()).padStart(2, '0')
+        }
+        Text {
+            id: minutes
+            anchors.top: hours.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.weight: Font.ExtraBold
+            text: String(Time.date.getMinutes()).padStart(2, '0')
+        }
     }
 }