modules/ags/config/style.scss

@@ -8,88 +8,89 @@ window.Bar {
     color: $ctp-text;
 
     >centerbox {
-        margin: 8px 8px 0 8px;
+        background: $ctp-base;
+        border-radius: 5px;
+        margin: 8px;
+        padding: 8px;
     }
 }
 
-.pill {
+.Time {
+  background: $ctp-surface-0;
+  border-radius: 5px;
+
   >.icon {
+    background: $ctp-red;
     color: $ctp-surface-0;
     padding: 6px 8px;
     font-size: 18px;
   }
 
-  &.icon-left {
+  &.icon-left>.icon {
-    &>.icon {
+    border-radius: 5px 0 0 5px;
-      border-radius: 5px 0 0 5px;
-    }
-    &>.label {
-      border-radius: 0 5px 5px 0;
-    }
   }
-  &.icon-right {
+  &.icon-right>.icon {
-    &>.icon {
+    border-radius: 0 5px 5px 0;
-      border-radius: 0 5px 5px 0;
-    }
-    &>.label {
-      border-radius: 5px 0 0 5px;
-    }
   }
-
   >.label {
-    background: $ctp-surface-0;
     padding: 0 8px;
     font-size: 16px;
   }
 }
 
-.Time >.icon {
-  background: $ctp-red;
-}
-
-.Date >.icon {
-  background: $ctp-lavender;
-}
-
 .Workspaces {
+  background: $ctp-surface-0;
+  border-radius: 5px;
+
   >.icon {
     background: $ctp-blue;
+    color: $ctp-surface-0;
+    padding: 6px 8px;
+    font-size: 18px;
   }
 
-  >.label button {
+  &.icon-left>.icon {
-    all: unset;
+    border-radius: 5px 0 0 5px;
+  }
+  &.icon-right>.icon {
+    border-radius: 0 5px 5px 0;
+  }
 
-    &.add {
+  >.labels {
-      font-size: 12px;
+    padding: 0 8px;
-      margin-left: 4px;
+    font-size: 16px;
+
+    button {
+      all: unset;
+
+      &.add {
+        font-size: 12px;
+        margin-left: 4px;
+      }
     }
   }
 }
 
 .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;
   }
 
-  .items {
+  &.icon-left>.icon {
-    background: $ctp-surface-0;
+    border-radius: 5px 0 0 5px;
-    font-size: 16px;
+  }
+  &.icon-right>.icon {
+    border-radius: 0 5px 5px 0;
   }
 
-  &.icon-left {
+  >.item {
-    .items {
-      border-radius: 0 5px 5px 0;
-    }
-  }
-  &.icon-right {
-    .items {
-      border-radius: 5px 0 0 5px;
-    }
-  }
-
-  .item {
     all: unset;
     padding: 8px 8px;
   }

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={`pill Time icon-${props.iconSide}`}>
+    return <box className={`Time icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="" />}
         <label
             className="label"

modules/ags/config/widget/Date.tsx

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

modules/ags/config/widget/Systray.tsx

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

modules/ags/config/widget/Workspaces.tsx

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