made the pill again but better

Bar.qml

@@ -48,7 +48,7 @@ Scope {
 		Item {
 		  anchors {
 			fill: parent
-			topMargin: 2
+			topMargin: 3
 		  }
 
 		  Row {

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
+		  }
 		}
 	  }
 	}

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
-  }
 }

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

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
+  }
+}