fix(ags): new ags config

modules/user/ags/ags/.gitignore

@@ -0,0 +1,2 @@
+accent.css
+colors.scss

modules/user/ags/ags/style.scss

@@ -3,17 +3,23 @@
 
 $radius: 10px;
 
-%item {
+* {
     all: unset;
+}
+
+%item {
     background: $bg;
     border-radius: $radius;
-    padding: 4px;
+    padding: 6px 8px;
 
-    & + &, .item + & { margin-left: 4px; }
+    & + &, .item + &, & + .item  { margin-left: 4px; }
 
-    label { margin: 0 8px; }
+    icon + label { margin-left: 4px; }
 }
 
+.item + .item { margin-left: 4px; }
+
+
 window.Bar {
     border: none;
     box-shadow: none;
@@ -27,9 +33,10 @@ window.Bar {
     }
 
     .Workspaces  {
-        button {
-            all: unset;
+        padding: 0;
 
+        button {
+            margin: 0;
             &:hover label {
                 background: $surface0;
                 color: $accent;
@@ -44,7 +51,7 @@ window.Bar {
         label {
             transition: 200ms;
             padding: 0 6px;
-            margin: 2px;
+            margin: 0px;
             border-radius: $radius;
             border: 1pt solid transparent;
         }
@@ -59,12 +66,12 @@ window.Bar {
     .Layout.en { color: $accent; }
 
     .SysTray button {
-        all: unset;
-        padding: 8px;
+        padding: 4px;
         border-radius: inherit;
 
         &:hover {
             background: $surface0;
+            border-radius: 4px;
         }
     }
 
@@ -82,16 +89,17 @@ window.Bar {
         }
     }
 
-    .Battery label {
-        padding-left: 0;
-        margin-left: 0;
-    }
-
-    .Time { padding: 0 8px; }
-
-    .AudioSlider icon { margin-left: 8px; }
-
     .Workspaces, .Wifi, .Layout, .Media, .SysTray, .AudioSlider, .Battery, .Time {
         @extend %item;
     }
+
+    .Wifi, .AudioSlider {
+        &, button {
+            &:hover { background-color: $surface0; }
+            &:active {
+                background-color: $accent;
+                color: $bg;
+            }
+        }
+    }
 }

modules/user/ags/ags/widget/Bar.tsx

@@ -28,11 +28,11 @@ export default function Bar(monitor: Gdk.Monitor) {
                 <Media />
             </box>
             <box hexpand halign={Gtk.Align.END} >
+                <SysTray />
                 <Wifi />
                 <Audio />
                 <BatteryLevel />
                 <Time />
-                <SysTray />
             </box>
         </centerbox>
     </window>

modules/user/ags/ags/widget/elements/Wifi.tsx

@@ -6,7 +6,9 @@ export default function Wifi() {
     const network = Network.get_default()
     const wifi = bind(network, "wifi")
 
-    return <box visible={wifi.as(Boolean)}>
+    return <box
+            visible={wifi.as(Boolean)}
+            className="item">
         {wifi.as(wifi => wifi && (
             <button
                 className="Wifi"