fix(wim ags): fix notif button

devices/wim/config/ags/js/bar/buttons/notif-button.js

@@ -1,9 +1,12 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
 
-import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Box, CenterBox, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import EventBox from '../../misc/cursorbox.js';
+import Separator from '../../misc/separator.js';
+
+const SPACING = 4;
 
 
 export default () => EventBox({
@@ -17,13 +20,12 @@ export default () => EventBox({
         }
     }]],
 
-    child: Box({
+    child: CenterBox({
         className: 'notif-panel',
-        vertical: false,
 
+        center_widget: Box({
             children: [
                 Icon({
-                hpack: 'center',
                     connections: [[Notifications, (self) => {
                         if (Notifications.dnd) {
                             self.icon = 'notification-disabled-symbolic';
@@ -36,11 +38,14 @@ export default () => EventBox({
                         }
                     }]],
                 }),
+
+                Separator(SPACING),
+
                 Label({
                     binds: [['label', Notifications, 'notifications',
                         (n) => String(n.length)]],
                 }),
-
             ],
         }),
+    }),
 });

devices/wim/config/ags/scss/widgets/traybuttons.scss

@@ -12,15 +12,8 @@
 
 .notif-panel {
   font-size: 20px;
-  border-radius: 80px;
   min-height: 37px;
   min-width: 105px;
-  padding: 1px 0 1px 5px;
-
-  .toggle-on {
-    border-radius: 22px 22px 0 0;
-    border-bottom: 0 solid $bg;
-  }
 }
 
 .quick-settings-toggle {