refactor(binto ags bar): add main css class

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

@@ -19,10 +19,12 @@ export default () => Window({
         vertical: true,
         children: [
             CenterBox({
+                className: 'bar',
                 start_widget: Box({
                     hpack: 'start',
                     children: [
                         Separator(PADDING),
+
                         SysTray(),
                     ],
                 }),
@@ -35,7 +37,9 @@ export default () => Window({
                     hpack: 'end',
                     children: [
                         NotifButton(),
+                        Separator(PADDING/2),
                         Clock(),
+
                         Separator(PADDING),
                     ],
                 }),

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

@@ -19,7 +19,7 @@ export const NotifPopups = () => PopupWindow({
 export const NotifCenter = () => PopupWindow({
     name: 'notification-center',
     anchor: ['bottom', 'right'],
-    margins: [0, 169, 0, 0],
+    margins: [0, 187, 0, 0],
     transition: 'slide_up',
     monitor: 1,
 

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

@@ -1,21 +1,23 @@
-.clock, .notif-panel {
-  padding: 2.5px 5px;
-  background-color: $bgfull;
-}
-
-.sys-tray {
-
-  menubar {
+.bar {
+  .clock, .notif-panel {
+    padding: 4.5px 7px;
     background-color: $bgfull;
-    padding: 2.5px;
   }
 
-  menuitem {
-    image { color: #CBA6F7; }
-    padding: 0 2px;
+  .sys-tray {
 
-    * {
-      font-size: 25px;
+    menubar {
+      background-color: $bgfull;
+      padding: 2.5px;
+    }
+
+    menuitem {
+      image { color: #CBA6F7; }
+      padding: 0 2px;
+
+      * {
+        font-size: 25px;
+      }
     }
   }
 }