Update styling for notifications menu

modules/menus/notifications/index.js

@@ -79,7 +79,7 @@ export default () => {
             Widget.Box({
               class_name: "menu-content-container notifications",
               hpack: "center",
-              vexpand: false,
+              vexpand: true,
               spacing: 0,
               vertical: true,
               setup: (self) => {
@@ -202,13 +202,27 @@ export default () => {
                   if (notifs.notifications.length <= 0) {
                     return (self.children = [
                       Widget.Box({
-                        vpack: "start",
+                        class_name: "notification-label-container",
+                        vpack: "fill",
                         hpack: "center",
                         expand: true,
-                        child: Widget.Label({
-                          class_name: "placehold-label dim",
+                        child: Widget.Box({
+                          vpack: "center",
+                          vertical: true,
+                          expand: true,
+                          children: [
+                            Widget.Label({
+                              vpack: "center",
+                              class_name: "placeholder-label dim bell",
+                              label: "󰂚",
+                            }),
+                            Widget.Label({
+                              vpack: "start",
+                              class_name: "placehold-label dim message",
                               label: "You're all caught up :)",
                             }),
+                          ],
+                        }),
                       }),
                     ]);
                   }
@@ -219,8 +233,9 @@ export default () => {
                       children: [
                         Widget.Box({
                           class_name: "notification-card menu",
-                          vpack: "center",
+                          vpack: "start",
                           hexpand: true,
+                          vexpand: false,
                           children: [
                             ...imageContainer(notif),
                             Widget.Box({

scss/menus/media.scss

@@ -74,7 +74,7 @@
       }
 
       &.active {
-        background: $pink;
+        background: $green;
       }
     }
 

scss/menus/notifications.scss

@@ -3,7 +3,7 @@
 .notification-card-container.menu {
   margin: 0em;
   min-width: 28.6em;
-  min-height: 6em;
+  min-height: 49.5em;
   background: $crust;
   border: 0.13em solid $surface0;
   border-radius: 0.7em;
@@ -75,3 +75,17 @@
   }
 }
 
+.notification-label-container {
+  margin-bottom: 8em;
+
+  label {
+    color: $surface0;
+  }
+
+  .bell {
+    font-size: 10em;
+  }
+  .message {
+    font-size: 1.5em;
+  }
+}

style.css

@@ -1056,7 +1056,7 @@ window#powermenu .powermenu.box {
   background: #f5c2e7;
 }
 .menu-items-container.media .media-indicator-control-button.enabled.active {
-  background: #f5c2e7;
+  background: #a6e3a1;
 }
 .menu-items-container.media image {
   font-size: 1.1em;
@@ -1082,7 +1082,7 @@ window#powermenu .powermenu.box {
 .notification-card-container.menu {
   margin: 0em;
   min-width: 28.6em;
-  min-height: 6em;
+  min-height: 49.5em;
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7em;
@@ -1141,6 +1141,19 @@ window#powermenu .powermenu.box {
   font-size: 1.5em;
 }
 
+.notification-label-container {
+  margin-bottom: 8em;
+}
+.notification-label-container label {
+  color: #313244;
+}
+.notification-label-container .bell {
+  font-size: 10em;
+}
+.notification-label-container .message {
+  font-size: 1.5em;
+}
+
 .calendar-content-container {
   margin-top: 0em;
   min-width: 27em;