From 23407ea36b6747d89e5841767f45f310e132923d Mon Sep 17 00:00:00 2001
From: voidarc <admin@voidarc.co.uk>
Date: Sun, 14 Jun 2026 16:21:49 +0100
Subject: [PATCH] made the pill again but better

---
 Bar.qml                     |  2 +-
 Bar/Center.qml              | 52 +++++++++++++++++++++++++++++++------
 Components/CenteredText.qml |  9 +------
 Components/Container.qml    | 33 ++++++++++-------------
 Components/StyledText.qml   | 12 +++++++++
 5 files changed, 71 insertions(+), 37 deletions(-)
 create mode 100644 Components/StyledText.qml

diff --git a/Bar.qml b/Bar.qml
index e413c09..35afe91 100644
--- a/Bar.qml
+++ b/Bar.qml
@@ -48,7 +48,7 @@ Scope {
 		Item {
 		  anchors {
 			fill: parent
-			topMargin: 2
+			topMargin: 3
 		  }
 
 		  Row {
diff --git a/Bar/Center.qml b/Bar/Center.qml
index ad012c4..42664c6 100644
--- a/Bar/Center.qml
+++ b/Bar/Center.qml
@@ -22,6 +22,12 @@ Container {
 	State {
 	  name: ""
 
+	  PropertyChanges {
+		centerPill.boxHeight: 28
+		centerPill.boxRadius: 9
+		centerPill.boxWidth: 100
+	  }
+
 	  StateChangeScript {
 		script: {
 		  if (centerPill.previousState != "hovered") {
@@ -36,6 +42,7 @@ Container {
 
 	  PropertyChanges {
 		centerPill.boxHeight: 35
+		centerPill.boxRadius: 15
 		centerPill.boxWidth: 110
 	  }
 
@@ -86,19 +93,48 @@ Container {
   Component {
 	id: fullTime
 
-	Column {
-	  Layout.alignment: Qt.AlignCenter
-	  spacing: 5
+	Item {
+	  Rectangle {
+		anchors.fill: parent
+		radius: 30
 
-	  Item {
-		CenteredText {
-		  text: Time.time
+		gradient: Gradient {
+		  GradientStop {
+			color: "transparent"
+			position: 0.0
+		  }
+
+		  GradientStop {
+			color: "transparent"
+			position: 0.6
+		  }
+
+		  GradientStop {
+			color: Colors.red
+			position: 1.0
+		  }
 		}
 	  }
 
-	  Item {
-		CenteredText {
+	  Column {
+		anchors.centerIn: parent
+		spacing: 5
+
+		StyledText {
+		  anchors.horizontalCenter: parent.horizontalCenter
+		  font.pointSize: 30
+		  text: Time.time
+		}
+
+		StyledText {
+		  anchors.horizontalCenter: parent.horizontalCenter
+		  color: Colors.surface0
 		  text: Time.date
+
+		  font {
+			pointSize: 9
+			weight: 400
+		  }
 		}
 	  }
 	}
diff --git a/Components/CenteredText.qml b/Components/CenteredText.qml
index 963ea8a..1599b64 100644
--- a/Components/CenteredText.qml
+++ b/Components/CenteredText.qml
@@ -1,14 +1,7 @@
 import QtQuick
 import "../Color.js" as Colors
 
-Text {
+StyledText {
   anchors.horizontalCenter: parent.horizontalCenter
   anchors.verticalCenter: parent.verticalCenter
-  color: Colors.base
-
-  font {
-	family: "FiraMono Nerd Font"
-	pointSize: 12
-	weight: 600
-  }
 }
diff --git a/Components/Container.qml b/Components/Container.qml
index 34b8f1e..3d0fd78 100644
--- a/Components/Container.qml
+++ b/Components/Container.qml
@@ -22,7 +22,7 @@ Item {
   function getVisible() {
 	if (containerRoot.exclusiveToScreen) {
 	  if (Hyprland.focusedMonitor != containerRoot.exclusiveMonitor) {
-		return -2 - containerRoot.boxHeight - 5;
+		return -4 - containerRoot.boxHeight - 5;
 	  } else {
 		return 0;
 	  }
@@ -31,6 +31,7 @@ Item {
 	}
   }
 
+  clip: true
   implicitHeight: boxHeight
   implicitWidth: boxWidth
 
@@ -44,8 +45,9 @@ Item {
 	}
   }
   Behavior on boxRadius {
-	NumberAnimation {
-	  duration: 100
+	SpringAnimation {
+	  damping: 0.3
+	  spring: 4
 	}
   }
   Behavior on boxWidth {
@@ -87,33 +89,24 @@ Item {
 
 	  anchors.fill: parent
 
-	  popEnter: Transition {
+	  replaceEnter: Transition {
 		PropertyAnimation {
-		  duration: 200
+		  duration: 100
 		  from: 0
 		  property: "opacity"
 		  to: 1
 		}
-	  }
-	  popExit: Transition {
+
 		PropertyAnimation {
-		  duration: 200
-		  from: 1
-		  property: "opacity"
+		  duration: 100
+		  from: -5
+		  property: "anchors.topMargin"
 		  to: 0
 		}
 	  }
-	  pushEnter: Transition {
+	  replaceExit: Transition {
 		PropertyAnimation {
-		  duration: 200
-		  from: 0
-		  property: "opacity"
-		  to: 1
-		}
-	  }
-	  pushExit: Transition {
-		PropertyAnimation {
-		  duration: 200
+		  duration: 100
 		  from: 1
 		  property: "opacity"
 		  to: 0
diff --git a/Components/StyledText.qml b/Components/StyledText.qml
new file mode 100644
index 0000000..80bbd52
--- /dev/null
+++ b/Components/StyledText.qml
@@ -0,0 +1,12 @@
+import QtQuick
+import "../Color.js" as Colors
+
+Text {
+  color: Colors.base
+
+  font {
+	family: "FiraMono Nerd Font"
+	pointSize: 12
+	weight: 600
+  }
+}