Improve bar

modules/ags/config/style.scss

@@ -13,23 +13,31 @@ window.Bar {
 }
 
 .pill {
-  background: $ctp-surface-0;
-  border-radius: 5px;
-
   >.icon {
     color: $ctp-surface-0;
     padding: 6px 8px;
     font-size: 18px;
   }
 
-  &.icon-left>.icon {
-    border-radius: 5px 0 0 5px;
+  &.icon-left {
+    &>.icon {
+      border-radius: 5px 0 0 5px;
+    }
+    &>.label {
+      border-radius: 0 5px 5px 0;
+    }
   }
-  &.icon-right>.icon {
-    border-radius: 0 5px 5px 0;
+  &.icon-right {
+    &>.icon {
+      border-radius: 0 5px 5px 0;
+    }
+    &>.label {
+      border-radius: 5px 0 0 5px;
+    }
   }
 
   >.label {
+    background: $ctp-surface-0;
     padding: 0 8px;
     font-size: 16px;
   }
@@ -48,17 +56,12 @@ window.Bar {
     background: $ctp-blue;
   }
 
-  >.labels {
-    padding: 0 8px;
-    font-size: 16px;
+  >.label button {
+    all: unset;
 
-    button {
-      all: unset;
-
-      &.add {
-        font-size: 12px;
-        margin-left: 4px;
-      }
+    &.add {
+      font-size: 12px;
+      margin-left: 4px;
     }
   }
 }
@@ -70,7 +73,23 @@ window.Bar {
     font-size: 20px;
   }
 
-  >.item {
+  .items {
+    background: $ctp-surface-0;
+    font-size: 16px;
+  }
+
+  &.icon-left {
+    .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/Systray.tsx

@@ -6,9 +6,11 @@ const tray = Tray.get_default()
 export default function Systray(props: { iconSide: "left" | "right" }) {
     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} />))}
+        <box className="items">
+            {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

@@ -6,7 +6,7 @@ export default function Workspaces(props: { monitor: string, iconSide: "left" |
 
     return <box className={`pill Workspaces icon-${props.iconSide}`}>
         {props.iconSide == "left" && <label className="icon" label="󱗼" />}
-        <box className="labels">
+        <box className="label">
             {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())