Reworked audio menu styling

modules/menus/DropdownMenu.js

@@ -43,7 +43,7 @@ export default ({
   child,
   layout = "center",
   transition,
-  minWidth = 375,
+  minWidth = 400,
   minHeight = 200,
   exclusivity = "ignore",
   fixed = false,

modules/menus/audio/index.js

@@ -19,7 +19,6 @@ export default () => {
       }
       return Widget.Button({
         class_name: `menu-button audio playback ${device}`,
-        cursor: "pointer",
         on_primary_click: () => (audio.speaker = device),
         child: Widget.Box({
           children: [
@@ -70,6 +69,32 @@ export default () => {
     });
   };
 
+  const getIcon = (audioVol, isMuted) => {
+    const speakerIcons = {
+      101: "audio-volume-overamplified-symbolic",
+      66: "audio-volume-high-symbolic",
+      34: "audio-volume-medium-symbolic",
+      1: "audio-volume-low-symbolic",
+      0: "audio-volume-muted-symbolic",
+    };
+
+    const inputIcons = {
+      66: "microphone-sensitivity-high-symbolic",
+      34: "microphone-sensitivity-medium-symbolic",
+      1: "microphone-sensitivity-low-symbolic",
+      0: "microphone-disabled-symbolic",
+    };
+
+    const icon = isMuted
+      ? 0
+      : [101, 66, 34, 1, 0].find((threshold) => threshold <= audioVol * 100);
+
+    return {
+      spkr: speakerIcons[icon],
+      mic: inputIcons[icon],
+    };
+  };
+
   const renderInputDevices = (inputDevices) => {
     if (!inputDevices.length) {
       return [
@@ -88,7 +113,6 @@ export default () => {
     }
     return inputDevices.map((device) => {
       return Widget.Button({
-        cursor: "pointer",
         on_primary_click: () => (audio.microphone = device),
         class_name: `menu-button audio input ${device}`,
         child: Widget.Box({
@@ -142,32 +166,57 @@ export default () => {
 
   const renderActivePlayback = () => {
     return [
-      Widget.Label({
-        class_name: "menu-active playback",
-        truncate: "end",
-        expand: true,
-        wrap: true,
-        label: audio.bind("speaker").as((v) => v.description || ""),
-      }),
       Widget.Box({
         class_name: "menu-slider-container playback",
         children: [
-          Widget.Label({
+          Widget.Button({
-            class_name: "menu-active-icon playback",
+            vexpand: false,
-            label: audio.speaker
+            vpack: "end",
-              .bind("volume")
+            setup: (self) => {
-              .as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
+              self.hook(audio, () => {
+                const spkr = audio.speaker;
+                const className = `menu-active-button playback ${spkr.is_muted ? "muted" : ""}`;
+                return (self.class_name = className);
+              });
+            },
+            on_primary_click: () =>
+              (audio.speaker.is_muted = !audio.speaker.is_muted),
+            child: Widget.Icon({
+              class_name: "menu-active-icon playback",
+              setup: (self) => {
+                self.hook(audio, () => {
+                  self.icon = getIcon(
+                    audio.speaker.volume,
+                    audio.speaker.is_muted,
+                  )["spkr"];
+                });
+              },
+            }),
           }),
-          Widget.Slider({
+          Widget.Box({
-            value: audio["speaker"].bind("volume"),
+            vertical: true,
-            class_name: "menu-active-slider menu-slider playback",
+            children: [
-            draw_value: false,
+              Widget.Label({
-            hexpand: true,
+                class_name: "menu-active playback",
-            min: 0,
+                hpack: "start",
-            max: 1,
+                truncate: "end",
-            onChange: ({ value }) => (audio.speaker.volume = value),
+                expand: true,
+                wrap: true,
+                label: audio.bind("speaker").as((v) => v.description || ""),
+              }),
+              Widget.Slider({
+                value: audio["speaker"].bind("volume"),
+                class_name: "menu-active-slider menu-slider playback",
+                draw_value: false,
+                hexpand: true,
+                min: 0,
+                max: 1,
+                onChange: ({ value }) => (audio.speaker.volume = value),
+              }),
+            ],
           }),
           Widget.Label({
+            vpack: "end",
             class_name: "menu-active-percentage playback",
             label: audio.speaker
               .bind("volume")
@@ -180,32 +229,57 @@ export default () => {
 
   const renderActiveInput = () => {
     return [
-      Widget.Label({
-        class_name: "menu-active input",
-        truncate: "end",
-        wrap: true,
-        label: audio.bind("microphone").as((v) => v.description || ""),
-      }),
       Widget.Box({
         class_name: "menu-slider-container input",
         children: [
-          Widget.Label({
+          Widget.Button({
-            class_name: "menu-active-icon input",
+            vexpand: false,
-            label: audio.microphone
+            vpack: "end",
-              .bind("volume")
+            setup: (self) => {
-              .as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
+              self.hook(audio, () => {
+                const mic = audio.microphone;
+                const className = `menu-active-button input ${mic.is_muted ? "muted" : ""}`;
+                return (self.class_name = className);
+              });
+            },
+            on_primary_click: () =>
+              (audio.microphone.is_muted = !audio.microphone.is_muted),
+            child: Widget.Icon({
+              class_name: "menu-active-icon input",
+              setup: (self) => {
+                self.hook(audio, () => {
+                  self.icon = getIcon(
+                    audio.microphone.volume,
+                    audio.microphone.is_muted,
+                  )["mic"];
+                });
+              },
+            }),
           }),
-          Widget.Slider({
+          Widget.Box({
-            value: audio.microphone.bind("volume").as((v) => v),
+            vertical: true,
-            class_name: "menu-active-slider menu-slider inputs",
+            children: [
-            draw_value: false,
+              Widget.Label({
-            hexpand: true,
+                class_name: "menu-active input",
-            min: 0,
+                hpack: "start",
-            max: 1,
+                truncate: "end",
-            onChange: ({ value }) => (audio.microphone.volume = value),
+                wrap: true,
+                label: audio.bind("microphone").as((v) => v.description || ""),
+              }),
+              Widget.Slider({
+                value: audio.microphone.bind("volume").as((v) => v),
+                class_name: "menu-active-slider menu-slider inputs",
+                draw_value: false,
+                hexpand: true,
+                min: 0,
+                max: 1,
+                onChange: ({ value }) => (audio.microphone.volume = value),
+              }),
+            ],
           }),
           Widget.Label({
             class_name: "menu-active-percentage input",
+            vpack: "end",
             label: audio.microphone
               .bind("volume")
               .as((v) => `${Math.floor(v * 100)}%`),
@@ -220,74 +294,111 @@ export default () => {
     transition: "crossfade",
     child: Widget.Box({
       class_name: "menu-items",
+      hpack: "fill",
+      hexpand: true,
       child: Widget.Box({
         vertical: true,
+        hpack: "fill",
+        hexpand: true,
         class_name: "menu-items-container",
         children: [
           Widget.Box({
-            class_name: "menu-dropdown-label-container",
+            class_name: "menu-section-container volume",
-            hpack: "start",
-            children: [
-              Widget.Label({
-                class_name: "menu-dropdown-label audio",
-                label: "Audio",
-              }),
-            ],
-          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
-          Widget.Box({
-            class_name: "menu-active-container playback",
-            vertical: true,
-            children: renderActivePlayback(),
-          }),
-          Widget.Box({
-            class_name: "menu-active-container input",
-            vertical: true,
-            children: renderActiveInput(),
-          }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
-          Widget.Box({
-            class_name: "menu-container playback",
             vertical: true,
             children: [
               Widget.Box({
-                class_name: "menu-label-container",
+                class_name: "menu-label-container volume",
+                hpack: "fill",
                 child: Widget.Label({
-                  class_name: "menu-label audio playback",
+                  class_name: "menu-label audio volume",
-                  label: "Playback Devices",
+                  hexpand: true,
-                  hpack: "start",
+                  hpack: "center",
+                  label: "Volume",
                 }),
               }),
               Widget.Box({
+                class_name: "menu-items-section selected",
                 vertical: true,
-                children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
+                children: [
+                  Widget.Box({
+                    class_name: "menu-active-container playback",
+                    vertical: true,
+                    children: renderActivePlayback(),
+                  }),
+                  Widget.Box({
+                    class_name: "menu-active-container input",
+                    vertical: true,
+                    children: renderActiveInput(),
+                  }),
+                ],
               }),
             ],
           }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
           Widget.Box({
-            class_name: "menu-container input",
+            class_name: "menu-section-container playback",
             vertical: true,
             children: [
               Widget.Box({
-                class_name: "menu-label-container",
+                class_name: "menu-label-container playback",
+                hpack: "fill",
                 child: Widget.Label({
-                  class_name: "menu-label audio input",
+                  class_name: "menu-label audio playback",
-                  hpack: "start",
+                  hexpand: true,
+                  hpack: "center",
+                  label: "Playback Devices",
+                }),
+              }),
+              Widget.Box({
+                class_name: "menu-items-section playback",
+                vertical: true,
+                children: [
+                  Widget.Box({
+                    class_name: "menu-container playback",
+                    vertical: true,
+                    children: [
+                      Widget.Box({
+                        vertical: true,
+                        children: audio
+                          .bind("speakers")
+                          .as((v) => renderPlaybacks(v)),
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+          Widget.Box({
+            class_name: "menu-section-container input",
+            vertical: true,
+            children: [
+              Widget.Box({
+                class_name: "menu-label-container playback",
+                hpack: "fill",
+                child: Widget.Label({
+                  class_name: "menu-label audio playback",
+                  hexpand: true,
+                  hpack: "center",
                   label: "Input Devices",
                 }),
               }),
               Widget.Box({
+                class_name: "menu-items-section input",
                 vertical: true,
-                children: audio
+                children: [
-                  .bind("microphones")
+                  Widget.Box({
-                  .as((v) => renderInputDevices(v)),
+                    class_name: "menu-container input",
+                    vertical: true,
+                    children: [
+                      Widget.Box({
+                        vertical: true,
+                        children: audio
+                          .bind("microphones")
+                          .as((v) => renderInputDevices(v)),
+                      }),
+                    ],
+                  }),
+                ],
               }),
             ],
           }),

modules/menus/bluetooth/index.js

@@ -222,9 +222,6 @@ export default () => {
     return Widget.Box({
       vertical: true,
       children: [
-        Widget.Separator({
-          class_name: "menu-separator",
-        }),
         Widget.Box({
           class_name: "menu-container bluetooth",
           children: [
@@ -347,9 +344,6 @@ export default () => {
               }),
             ],
           }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
           Widget.Box({
             vertical: true,
             children: bluetooth.bind("enabled").as((isOn) =>

modules/menus/calendar/index.js

@@ -137,7 +137,9 @@ const WeatherWidget = () => {
             `curl "https://api.weatherapi.com/v1/forecast.json?key=${keyRing.weatherapi}&q=93722&days=1&aqi=no&alerts=no"`,
           )
             .then((res) => {
-              theWeather.value = JSON.parse(res);
+              if (typeof res === "string") {
+                theWeather.value = JSON.parse(res);
+              }
             })
             .catch((err) => {
               console.error(`Failed to fetch weather: ${err}`);
@@ -294,7 +296,7 @@ const WeatherWidget = () => {
                    * the hours left in the day are less than 4 (aka spilling into the next day),
                    * then rewind to contain the prediction within the current day.
                    */
-                  if (curHour > 20) {
+                  if (curHour > 19) {
                     const hoursToRewind = curHour - 19;
                     nextEpoch =
                       3600 * hoursFromNow +

modules/menus/network/index.js

@@ -24,9 +24,6 @@ export default () => {
               }),
             ],
           }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
           Widget.Box({
             class_name: "menu-label-container network",
             child: Widget.Label({
@@ -239,9 +236,6 @@ export default () => {
               });
             },
           }),
-          Widget.Separator({
-            class_name: "menu-separator",
-          }),
           Widget.Box({
             children: [
               Widget.Box({

modules/menus/notifications/index.js

@@ -52,29 +52,23 @@ export default () => {
                       },
                     }),
                     Widget.Box({
-                      children: notifs.bind("notifications").as((n) => {
+                      children: [
-                        if (n.length > 0) {
+                        Widget.Separator({
-                          return [
+                          hpack: "center",
-                            Widget.Separator({
+                          vexpand: true,
-                              hpack: "center",
+                          vertical: true,
-                              vexpand: true,
+                          class_name: "menu-separator notification-controls",
-                              vertical: true,
+                        }),
-                              class_name:
+                        Widget.Button({
-                                "menu-separator notification-controls",
+                          class_name: "clear-notifications-button",
-                            }),
+                          tooltip_text: "Clear Notifications",
-                            Widget.Button({
+                          on_primary_click: () => notifs.clear(),
-                              class_name: "clear-notifications-button",
+                          child: Widget.Label({
-                              tooltip_text: "Clear Notifications",
+                            class_name: "clear-notifications-label",
-                              on_primary_click: () => notifs.clear(),
+                            label: "",
-                              child: Widget.Label({
+                          }),
-                                class_name: "clear-notifications-label",
+                        }),
-                                label: "",
+                      ],
-                              }),
-                            }),
-                          ];
-                        }
-                        return [];
-                      }),
                     }),
                   ],
                 }),

scss/bar/audio.scss

@@ -2,9 +2,9 @@
 
 .bar-volume_icon {
   font-size: 1.3em;
-  color: $peach;
+  color: $maroon;
 }
 
 .bar-volume_percentage {
-  color: $peach;
+  color: $maroon;
 }

scss/bar/workspace.scss

@@ -3,8 +3,8 @@
 .workspaces {
   label {
     font-size: 0.2em;
-    min-width: 4.5em;
+    min-width: 4em;
-    min-height: 4.5em;
+    min-height: 4em;
     border-radius: 1.9rem * .6;
     margin: 0rem 0.5rem * .5;
     transition: 300ms * .5;
@@ -14,15 +14,15 @@
     &.occupied {
       background-color: $yellow;
       color: $yellow;
-      min-width: 4.5em;
+      min-width: 4em;
-      min-height: 4.5em;
+      min-height: 4em;
     }
 
     &.active {
       color: $pink;
       background-color: $pink;
-      min-width: 14em;
+      min-width: 12em;
-      min-height: 4.5em;
+      min-height: 4em;
     }
   }
 }

scss/menus/audiomenu.scss

@@ -1,32 +1,29 @@
 @import "../colors";
 
 .menu-dropdown-label.audio {
-    color: $peach;
+    color: $maroon;
 }
 
 .menu-label.audio {
-    color: $peach;
+    color: $maroon;
 }
 
 .menu-button-isactive.audio {
-    color: $peach;
+    color: $maroon;
 }
 
 .menu-active-slider {
     trough {
         highlight,
         progress {
-            background: $peach;
+            background: $maroon;
         }
     }
 }
 
 .menu-button.audio {
      &:hover {
-        color: $peach;
+        color: $maroon;
     }
 }
 
-.menu-items {
-    min-width: 25rem;
-}

scss/menus/menu.scss

@@ -1,7 +1,7 @@
 .menu-slider {
     trough {
-        background: $base;
         border-radius: 0.3rem;
+        background: $surface0;
 
         highlight,
         progress {
@@ -13,8 +13,8 @@
     slider {
         box-shadow: none;
         background-color: transparent;
-        min-height: 1.6rem;
+        min-height: 0.6rem;
-        min-width: 1.6rem;
+        min-width: 0.6rem;
         border: 0rem solid transparent;
         border-radius: 0.3rem;
     }
@@ -33,7 +33,7 @@
 
 .menu-switch {
     background-color: $surface0;
-        border-radius: 0.3rem;
+    border-radius: 0.3rem;
 
     &:checked {
         background: $sky;
@@ -90,41 +90,95 @@ tooltip label {
 }
 
 .menu-items {
-    background: $mantle;
+    background: $crust;
     border: .13em solid $surface0;
     border-radius: .5rem;
-    min-width: 375px;
+    min-width: 400px;
     color: $text;
 }
 
 .menu-items-container {
-    margin: 1rem 1.5rem;
+    border-radius: 0.4em;
+    min-width: 400px;
 }
 
-.menu-dropdown-label {
+.menu-section-container {
-    font-size: 1.3em;
+    .menu-label {
-    font-weight: bold;
+        color: $text;
-    color: $text;
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    .menu-label-container {
+        background: $base;
+        border-radius: 0.4em;
+        border-bottom-left-radius: 0em;
+        border-bottom-right-radius: 0em;
+        margin: 0em 1.35em ;
+        min-height: 2em;
+    }
+
+    margin: 1.35em 0em;
+
+    &.volume {
+        margin-bottom: 0em;
+    }
+
+    &.input {
+        margin-top: 0em;
+    }
+
+    .menu-items-section {
+        background: $base;
+        border-radius: 0.4em;
+        border-top-left-radius: 0em;
+        border-top-right-radius: 0em;
+        padding: 0.9em;
+        margin: 0em 1.35em;
+
+        &.selected {
+            margin-bottom: 0em;
+        }
+        &.input {
+            margin-top: 0em;
+        }
+    }
 }
 
 .menu-active {
-    font-size: 0.95em;
+    font-size: 0.9em;
     font-weight: bold;
-    margin: 0rem .5rem;
+    margin: 0rem 1em;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.9em;
-    margin-top: 0.5rem;
 }
 
-.menu-active-icon {
+.menu-active-container {
-    color: $overlay1;
+    &:first-child {
-    font-size: 1.5em;
+        margin-bottom: 0.5em;
-    font-weight: bold;
+    }
-    margin-right: 0.7rem;
+}
+
+.menu-active-button {
+    padding: 0.1em;
+    margin-bottom: -0.2em;
+    .menu-active-icon {
+        color: $overlay1;
+        font-size: 1.4em;
+        font-weight: bold;
+
+    }
+
+    &.muted image {
+        color: $maroon;
+    }
+    &:hover image {
+        color: $maroon;
+    }
 }
 
 .menu-active-percentage {
-    font-size: 1em;
+    font-size: 0.9em;
-    margin-left: 0.5rem;
+    min-width: 2.5em;
     font-weight: bold;
 }
 
@@ -134,19 +188,13 @@ tooltip label {
 }
 
 .menu-active-slider * {
-    min-height: 1.1em;
+    min-height: 0.85em;
     border-radius: .2em;
 }
 .menu-slider-container {
     margin-bottom: .7rem;
 }
 
-.menu-label {
-    color: $text;
-    font-size: 1.1em;
-    font-weight: bold;
-}
-
 .menu-label-dim {
     color: $overlay0;
     margin-right: 1rem;
@@ -163,8 +211,9 @@ tooltip label {
     }
 }
 
-.menu-label-container {
+.menu-dropdown-label-container {
-    margin-bottom: 1.3rem;
+    background: $base;
+    border-radius: 0.4em;
 }
 
 .menu-button {
@@ -194,6 +243,6 @@ tooltip label {
 }
 
 .top-right-event-box_top *{
-  min-height: 0em;
+    min-height: 0em;
-  margin-top: 2.5em;
+    margin-top: 2.5em;
 }

scss/menus/notifications.scss

@@ -22,7 +22,7 @@
   margin: 1em 1.3em;
   margin-bottom: 0em;
   border-radius: 0.4em;
-  padding: 0em 0.5em;
+  padding: 0.4em 0.75em;
 }
 
 .notification-card.menu {
@@ -33,10 +33,12 @@
 }
 
 .menu-label-container.notifications {
-  margin: 0em 0em;
+  margin: 0em;
+  padding: 0em;
 }
 
 .menu-label.notifications {
+  margin: 0em;
   color: $lavender;
 }
 

style.css

@@ -282,11 +282,11 @@ spinner:checked {
 
 .bar-volume_icon {
   font-size: 1.3em;
-  color: #fab387;
+  color: #eba0ac;
 }
 
 .bar-volume_percentage {
-  color: #fab387;
+  color: #eba0ac;
 }
 
 .media {
@@ -329,8 +329,8 @@ spinner:checked {
 
 .workspaces label {
   font-size: 0.2em;
-  min-width: 4.5em;
+  min-width: 4em;
-  min-height: 4.5em;
+  min-height: 4em;
   border-radius: 1.14rem;
   margin: 0rem 0.25rem;
   transition: 150ms;
@@ -340,14 +340,14 @@ spinner:checked {
 .workspaces label.occupied {
   background-color: #f9e2af;
   color: #f9e2af;
-  min-width: 4.5em;
+  min-width: 4em;
-  min-height: 4.5em;
+  min-height: 4em;
 }
 .workspaces label.active {
   color: #f5c2e7;
   background-color: #f5c2e7;
-  min-width: 14em;
+  min-width: 12em;
-  min-height: 4.5em;
+  min-height: 4em;
 }
 
 .workspaces label:not(:first-child) {
@@ -429,8 +429,8 @@ spinner:checked {
 }
 
 .menu-slider trough {
-  background: #1e1e2e;
   border-radius: 0.3rem;
+  background: #313244;
 }
 .menu-slider trough highlight,
 .menu-slider trough progress {
@@ -440,8 +440,8 @@ spinner:checked {
 .menu-slider slider {
   box-shadow: none;
   background-color: transparent;
-  min-height: 1.6rem;
+  min-height: 0.6rem;
-  min-width: 1.6rem;
+  min-width: 0.6rem;
   border: 0rem solid transparent;
   border-radius: 0.3rem;
 }
@@ -495,41 +495,85 @@ tooltip label {
 }
 
 .menu-items {
-  background: #181825;
+  background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.5rem;
-  min-width: 375px;
+  min-width: 400px;
   color: #cdd6f4;
 }
 
 .menu-items-container {
-  margin: 1rem 1.5rem;
+  border-radius: 0.4em;
+  min-width: 400px;
 }
 
-.menu-dropdown-label {
+.menu-section-container {
-  font-size: 1.3em;
+  margin: 1.35em 0em;
-  font-weight: bold;
+}
+.menu-section-container .menu-label {
   color: #cdd6f4;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.menu-section-container .menu-label-container {
+  background: #1e1e2e;
+  border-radius: 0.4em;
+  border-bottom-left-radius: 0em;
+  border-bottom-right-radius: 0em;
+  margin: 0em 1.35em;
+  min-height: 2em;
+}
+.menu-section-container.volume {
+  margin-bottom: 0em;
+}
+.menu-section-container.input {
+  margin-top: 0em;
+}
+.menu-section-container .menu-items-section {
+  background: #1e1e2e;
+  border-radius: 0.4em;
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
+  padding: 0.9em;
+  margin: 0em 1.35em;
+}
+.menu-section-container .menu-items-section.selected {
+  margin-bottom: 0em;
+}
+.menu-section-container .menu-items-section.input {
+  margin-top: 0em;
 }
 
 .menu-active {
-  font-size: 0.95em;
+  font-size: 0.9em;
   font-weight: bold;
-  margin: 0rem 0.5rem;
+  margin: 0rem 1em;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.9em;
-  margin-top: 0.5rem;
 }
 
-.menu-active-icon {
+.menu-active-container:first-child {
+  margin-bottom: 0.5em;
+}
+
+.menu-active-button {
+  padding: 0.1em;
+  margin-bottom: -0.2em;
+}
+.menu-active-button .menu-active-icon {
   color: #7f849c;
-  font-size: 1.5em;
+  font-size: 1.4em;
   font-weight: bold;
-  margin-right: 0.7rem;
+}
+.menu-active-button.muted image {
+  color: #eba0ac;
+}
+.menu-active-button:hover image {
+  color: #eba0ac;
 }
 
 .menu-active-percentage {
-  font-size: 1em;
+  font-size: 0.9em;
-  margin-left: 0.5rem;
+  min-width: 2.5em;
   font-weight: bold;
 }
 
@@ -539,7 +583,7 @@ tooltip label {
 }
 
 .menu-active-slider * {
-  min-height: 1.1em;
+  min-height: 0.85em;
   border-radius: 0.2em;
 }
 
@@ -547,12 +591,6 @@ tooltip label {
   margin-bottom: 0.7rem;
 }
 
-.menu-label {
-  color: #cdd6f4;
-  font-size: 1.1em;
-  font-weight: bold;
-}
-
 .menu-label-dim {
   color: #6c7086;
   margin-right: 1rem;
@@ -568,8 +606,9 @@ tooltip label {
   color: #585b70;
 }
 
-.menu-label-container {
+.menu-dropdown-label-container {
-  margin-bottom: 1.3rem;
+  background: #1e1e2e;
+  border-radius: 0.4em;
 }
 
 .menu-button {
@@ -767,28 +806,24 @@ window#powermenu .powermenu.box {
 }
 
 .menu-dropdown-label.audio {
-  color: #fab387;
+  color: #eba0ac;
 }
 
 .menu-label.audio {
-  color: #fab387;
+  color: #eba0ac;
 }
 
 .menu-button-isactive.audio {
-  color: #fab387;
+  color: #eba0ac;
 }
 
 .menu-active-slider trough highlight,
 .menu-active-slider trough progress {
-  background: #fab387;
+  background: #eba0ac;
 }
 
 .menu-button.audio:hover {
-  color: #fab387;
+  color: #eba0ac;
-}
-
-.menu-items {
-  min-width: 25rem;
 }
 
 .menu-dropdown-label.network {
@@ -1026,7 +1061,7 @@ image {
   box-shadow: none;
 }
 .notification-card-container.menu {
-  margin-top: 0em;
+  margin: 0em;
   min-width: 26em;
   min-height: 6em;
   background: #11111b;
@@ -1039,34 +1074,33 @@ image {
 }
 
 .menu-content-container.notifications {
-  margin: 1em;
+  margin: 1.35em;
   min-height: 4em;
 }
 
 .notification-menu-controls {
-  margin: 0em 1em;
+  background: #1e1e2e;
-  margin-top: 0.6em;
+  margin: 1em 1.3em;
-  margin-bottom: 0.4em;
+  margin-bottom: 0em;
+  border-radius: 0.4em;
+  padding: 0.4em 0.75em;
 }
 
 .notification-card.menu {
   background: #1e1e2e;
-  border: 0.1em solid #313244;
+  border: 0.15em solid #1e1e2e;
+  border-radius: 0.4em;
   margin: 0em;
 }
 
 .menu-label-container.notifications {
-  margin: 0em 0em;
+  margin: 0em;
+  padding: 0em;
 }
 
 .menu-label.notifications {
-  color: #b4befe;
   margin: 0em;
-}
+  color: #b4befe;
-
-.menu-separator.notifications {
-  background-color: #313244;
-  margin: 0em 1em;
 }
 
 .menu-separator.notification-controls {