feat(binto ags bar): make spacing consistent with hyprland

devices/binto/config/ags/js/bar/main.js

@@ -1,9 +1,13 @@
 import { Box, CenterBox, Window } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import SysTray from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/buttons/systray.js';
+import Separator from 'file:///home/matt/.nix/devices/wim/config/ags/js/misc/separator.js';
 import NotifButton from 'file:///home/matt/.nix/devices/wim/config/ags/js/bar/buttons/notif-button.js';
 import Clock from './buttons/clock.js';
 
+const PADDING = 20;
+
+
 export default () => Window({
     name: 'bar',
     layer: 'overlay',
@@ -11,16 +15,20 @@ export default () => Window({
     anchor: ['bottom', 'left', 'right'],
     monitor: 1,
 
-    child: CenterBox({
+    child: Box({
+        vertical: true,
+        children: [
+            CenterBox({
                 start_widget: Box({
                     hpack: 'start',
                     children: [
+                        Separator(PADDING),
                         SysTray(),
                     ],
                 }),
 
                 center_widget: Box({
-            hpack: 'center',
+                    children: [],
                 }),
 
                 end_widget: Box({
@@ -28,7 +36,11 @@ export default () => Window({
                     children: [
                         NotifButton(),
                         Clock(),
+                        Separator(PADDING),
                     ],
                 }),
             }),
+            Separator(PADDING, {vertical: true}),
+        ],
+    }),
 });

devices/binto/config/ags/scss/widgets/bar.scss

@@ -1,11 +1,9 @@
 .clock, .notif-panel {
-  margin: 0 5px 5px 0;
   padding: 2.5px 5px;
   background-color: $bgfull;
 }
 
 .sys-tray {
-  margin: 0 0 5px 5px;
 
   menubar {
     background-color: $bgfull;

devices/binto/config/hypr/main.conf

@@ -35,5 +35,7 @@ windowrule = tile,^(firefox)$
 
 # Cosmetic
 general {
+    gaps_in = 10
+    gaps_out = 20
     border_size = 0
 }