Restyle bars slightly and add date

modules/ags/config/style.scss

@@ -8,19 +8,15 @@ window.Bar {
     color: $ctp-text;
 
     >centerbox {
-        background: $ctp-base;
-        border-radius: 5px;
-        margin: 8px;
-        padding: 8px;
+        margin: 8px 8px 0 8px;
     }
 }
 
-.Time {
+.pill {
   background: $ctp-surface-0;
   border-radius: 5px;
 
   >.icon {
-    background: $ctp-red;
     color: $ctp-surface-0;
     padding: 6px 8px;
     font-size: 18px;
@@ -32,28 +28,24 @@ window.Bar {
   &.icon-right>.icon {
     border-radius: 0 5px 5px 0;
   }
+
   >.label {
     padding: 0 8px;
     font-size: 16px;
   }
 }
 
-.Workspaces {
-  background: $ctp-surface-0;
-  border-radius: 5px;
+.Time >.icon {
+  background: $ctp-red;
+}
 
+.Date >.icon {
+  background: $ctp-lavender;
+}
+
+.Workspaces {
   >.icon {
     background: $ctp-blue;
-    color: $ctp-surface-0;
-    padding: 6px 8px;
-    font-size: 18px;
-  }
-
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
-  }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
   }
 
   >.labels {
@@ -72,22 +64,10 @@ window.Bar {
 }
 
 .Systray {
-  background: $ctp-surface-0;
-  border-radius: 5px;
-
   >.icon {
     background: $ctp-green;
-    color: $ctp-surface-0;
     padding: 4px 8px 0 8px;
     font-size: 20px;
-    border-radius: 5px 0 0 5px;
-  }
-
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
-  }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
   }
 
   >.item {

modules/ags/config/widget/Clock.tsx

@@ -6,7 +6,7 @@ export default function Clock(props: { iconSide: "left" | "right" }) {
     const time = Variable<string>("").poll(1000, () =>
         GLib.DateTime.new_now_local().format(TIME_FORMAT)!)
 
-    return <box className={`Time icon-${props.iconSide}`}>
+    return <box className={`pill Time icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="" />}
         <label
             className="label"

modules/ags/config/widget/Date.tsx

@@ -0,0 +1,18 @@
+import { GLib, Variable } from "astal"
+
+const DATE_FORMAT = "%Y-%m-%d"
+
+export default function Date(props: { iconSide: "left" | "right" }) {
+    const date = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(DATE_FORMAT)!)
+
+    return <box className={`pill Date icon-${props.iconSide}`}>
+        {props.iconSide == "left" && <label className="icon" label="" />}
+        <label
+            className="label"
+            onDestroy={() => date.drop()}
+            label={date()}
+        />
+        {props.iconSide == "right" && <label className="icon" label="" />}
+    </box>
+}

modules/ags/config/widget/RightBar.tsx

@@ -1,5 +1,6 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk3";
 import Clock from "./Clock";
+import Date from "./Date";
 import Workspaces from "./Workspaces";
 import Systray from "./Systray";
 
@@ -13,13 +14,14 @@ export default function RightBar(gdkmonitor: Gdk.Monitor) {
         anchor={TOP | LEFT | RIGHT}
         application={App}>
         <centerbox>
-            <box halign={Gtk.Align.START}>
+            <box halign={Gtk.Align.START} spacing={8}>
                 <Clock iconSide="left" />
+                <Date iconSide="left" />
             </box>
-            <box halign={Gtk.Align.CENTER}>
+            <box halign={Gtk.Align.CENTER} spacing={8}>
                 <Workspaces monitor="HDMI-A-1" iconSide="left" />
             </box>
-            <box halign={Gtk.Align.END}>
+            <box halign={Gtk.Align.END} spacing={8}>
                 <Systray iconSide="left" />
             </box>
         </centerbox>

modules/ags/config/widget/Systray.tsx

@@ -4,7 +4,7 @@ import Tray from "gi://AstalTray"
 const tray = Tray.get_default()
 
 export default function Systray(props: { iconSide: "left" | "right" }) {
-    return <box className={`Systray icon-${props.iconSide}`}>
+    return <box className={`pill Systray icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="󱊔" />}
         {bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
         {props.iconSide == "right" && <label className="icon" label="󱊔" />}

modules/ags/config/widget/Workspaces.tsx

@@ -4,7 +4,7 @@ import Hyprland from "gi://AstalHyprland"
 export default function Workspaces(props: { monitor: string, iconSide: "left" | "right" }) {
     const hyprland = Hyprland.get_default();
 
-    return <box className={`Workspaces icon-${props.iconSide}`}>
+    return <box className={`pill Workspaces icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="󱗼" />}
         <box className="labels">
             {bind(hyprland, "workspaces").as(wss => wss