Update notifications control area style and changed notifs icon position on bar.

modules/bar/bar.js

@@ -52,8 +52,8 @@ const Right = () => {
       BarItemBox(Bluetooth()),
       BarItemBox(BatteryLabel()),
       BarItemBox(SysTray()),
-      BarItemBox(Clock()),
       BarItemBox(Notifications()),
+      BarItemBox(Clock()),
       BarItemBox(Power()),
     ],
   });

modules/menus/notifications/index.js

@@ -50,24 +50,23 @@ export default () => {
                         notifs.dnd = !active;
                       },
                     }),
-                  ],
-                }),
-              ],
-            }),
-            Widget.Separator({
-              class_name: "menu-separator notifications",
-            }),
                     Widget.Box({
-              hpack: "end",
                       children: notifs.bind("notifications").as((n) => {
                         if (n.length > 0) {
                           return [
+                            Widget.Separator({
+                              hpack: "center",
+                              vexpand: true,
+                              vertical: true,
+                              class_name:
+                                "menu-separator notification-controls",
+                            }),
                             Widget.Button({
                               class_name: "clear-notifications-button",
                               on_primary_click: () => notifs.clear(),
                               child: Widget.Label({
                                 class_name: "clear-notifications-label",
-                        label: "clear",
+                                label: "",
                               }),
                             }),
                           ];
@@ -75,6 +74,13 @@ export default () => {
                         return [];
                       }),
                     }),
+                  ],
+                }),
+              ],
+            }),
+            Widget.Separator({
+              class_name: "menu-separator notifications",
+            }),
             Widget.Box({
               class_name: "menu-content-container notifications",
               hpack: "center",

modules/notifications/index.js

@@ -9,7 +9,6 @@ export default () => {
     class_name: "notifications-window",
     layer: "top",
     anchor: ["top", "right"],
-    monitor: 2,
     exclusivity: "ignore",
     child: Widget.Box({
       class_name: "notification-card-container",

scss/menus/notifications.scss

@@ -19,6 +19,8 @@
 
 .notification-menu-controls {
   margin: 0em 1em;
+  margin-top: 0.6em;
+  margin-bottom: 0.4em;
 }
 
 .notification-card.menu {
@@ -33,14 +35,20 @@
 
 .menu-label.notifications {
   color: $lavender;
-  margin: 0.9em 0.5em;
-  margin-bottom: 0.7em;
+  margin: 0em;
 }
 
 .menu-separator.notifications {
   background-color: $surface0;
   margin: 0em 1em;
 }
+
+.menu-separator.notification-controls {
+  min-width: 0.1em;
+  background-color: $surface0;
+  margin: 0em 1em;
+}
+
 .menu-switch.notifications:checked {
   &:checked {
     background: $lavender;
@@ -48,8 +56,7 @@
 }
 
 .clear-notifications-button {
-  margin-right: 1em;
-  margin-top: 0.4em;
+  margin-right: 0.3em;
 
   &:hover label {
     color: $maroon;
@@ -57,8 +64,8 @@
 }
 
 .clear-notifications-label {
-  color: $lavender;
-  font-size: 0.9em;
+  color: $red;
+  font-size: 1.5em;
 }
 
 .top-right-event-box_top *{

style.css

@@ -1057,6 +1057,8 @@ image {
 
 .notification-menu-controls {
   margin: 0em 1em;
+  margin-top: 0.6em;
+  margin-bottom: 0.4em;
 }
 
 .notification-card.menu {
@@ -1071,8 +1073,7 @@ image {
 
 .menu-label.notifications {
   color: #b4befe;
-  margin: 0.9em 0.5em;
-  margin-bottom: 0.7em;
+  margin: 0em;
 }
 
 .menu-separator.notifications {
@@ -1080,21 +1081,26 @@ image {
   margin: 0em 1em;
 }
 
+.menu-separator.notification-controls {
+  min-width: 0.1em;
+  background-color: #313244;
+  margin: 0em 1em;
+}
+
 .menu-switch.notifications:checked:checked {
   background: #b4befe;
 }
 
 .clear-notifications-button {
-  margin-right: 1em;
-  margin-top: 0.4em;
+  margin-right: 0.3em;
 }
 .clear-notifications-button:hover label {
   color: #eba0ac;
 }
 
 .clear-notifications-label {
-  color: #b4befe;
-  font-size: 0.9em;
+  color: #f38ba8;
+  font-size: 1.5em;
 }
 
 .top-right-event-box_top * {