Reworked audio menu styling

2024-06-28 21:44:56 -07:00
parent 52731236e9
commit 78496ae98a
13 changed files with 407 additions and 230 deletions
--- a/modules/menus/DropdownMenu.js
+++ b/modules/menus/DropdownMenu.js
@@ -43,7 +43,7 @@ export default ({
  child,
  layout = "center",
  transition,
-  minWidth = 375,
+  minWidth = 400,
  minHeight = 200,
  exclusivity = "ignore",
  fixed = false,
--- a/modules/menus/audio/index.js
+++ b/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,22 +166,44 @@ export default () => {

  const renderActivePlayback = () => {
    return [
+      Widget.Box({
+        class_name: "menu-slider-container playback",
+        children: [
+          Widget.Button({
+            vexpand: false,
+            vpack: "end",
+            setup: (self) => {
+              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.Box({
+            vertical: true,
+            children: [
              Widget.Label({
                class_name: "menu-active playback",
+                hpack: "start",
                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({
-            class_name: "menu-active-icon playback",
-            label: audio.speaker
-              .bind("volume")
-              .as((v) => `${v === 0 ? "󰖁" : "󰕾"}`),
-          }),
              Widget.Slider({
                value: audio["speaker"].bind("volume"),
                class_name: "menu-active-slider menu-slider playback",
@@ -167,7 +213,10 @@ export default () => {
                max: 1,
                onChange: ({ value }) => (audio.speaker.volume = value),
              }),
+            ],
+          }),
          Widget.Label({
+            vpack: "end",
            class_name: "menu-active-percentage playback",
            label: audio.speaker
              .bind("volume")
@@ -180,20 +229,42 @@ 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({
+            vexpand: false,
+            vpack: "end",
+            setup: (self) => {
+              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",
-            label: audio.microphone
-              .bind("volume")
-              .as((v) => `${v === 0 ? "󰍭" : "󰍬"}`),
+              setup: (self) => {
+                self.hook(audio, () => {
+                  self.icon = getIcon(
+                    audio.microphone.volume,
+                    audio.microphone.is_muted,
+                  )["mic"];
+                });
+              },
+            }),
+          }),
+          Widget.Box({
+            vertical: true,
+            children: [
+              Widget.Label({
+                class_name: "menu-active input",
+                hpack: "start",
+                truncate: "end",
+                wrap: true,
+                label: audio.bind("microphone").as((v) => v.description || ""),
              }),
              Widget.Slider({
                value: audio.microphone.bind("volume").as((v) => v),
@@ -204,8 +275,11 @@ export default () => {
                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,23 +294,32 @@ 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",
-            hpack: "start",
+            class_name: "menu-section-container volume",
+            vertical: true,
            children: [
-              Widget.Label({
-                class_name: "menu-dropdown-label audio",
-                label: "Audio",
+              Widget.Box({
+                class_name: "menu-label-container volume",
+                hpack: "fill",
+                child: Widget.Label({
+                  class_name: "menu-label audio volume",
+                  hexpand: true,
+                  hpack: "center",
+                  label: "Volume",
                }),
-            ],
-          }),
-          Widget.Separator({
-            class_name: "menu-separator",
              }),
+              Widget.Box({
+                class_name: "menu-items-section selected",
+                vertical: true,
+                children: [
                  Widget.Box({
                    class_name: "menu-active-container playback",
                    vertical: true,
@@ -247,42 +330,66 @@ export default () => {
                    vertical: true,
                    children: renderActiveInput(),
                  }),
-          Widget.Separator({
-            class_name: "menu-separator",
+                ],
              }),
+            ],
+          }),
+          Widget.Box({
+            class_name: "menu-section-container playback",
+            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: "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({
-                class_name: "menu-label-container",
-                child: Widget.Label({
-                  class_name: "menu-label audio playback",
-                  label: "Playback Devices",
-                  hpack: "start",
-                }),
-              }),
                      Widget.Box({
                        vertical: true,
-                children: audio.bind("speakers").as((v) => renderPlaybacks(v)),
+                        children: audio
+                          .bind("speakers")
+                          .as((v) => renderPlaybacks(v)),
                      }),
                    ],
                  }),
-          Widget.Separator({
-            class_name: "menu-separator",
+                ],
              }),
+            ],
+          }),
+          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: [
                  Widget.Box({
                    class_name: "menu-container input",
                    vertical: true,
                    children: [
-              Widget.Box({
-                class_name: "menu-label-container",
-                child: Widget.Label({
-                  class_name: "menu-label audio input",
-                  hpack: "start",
-                  label: "Input Devices",
-                }),
-              }),
                      Widget.Box({
                        vertical: true,
                        children: audio
@@ -293,6 +400,10 @@ export default () => {
                  }),
                ],
              }),
+            ],
+          }),
+        ],
+      }),
    }),
  });
 };
--- a/modules/menus/bluetooth/index.js
+++ b/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) =>
--- a/modules/menus/calendar/index.js
+++ b/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) => {
+              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 +
--- a/modules/menus/network/index.js
+++ b/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({
--- a/modules/menus/notifications/index.js
+++ b/modules/menus/notifications/index.js
@@ -52,15 +52,12 @@ export default () => {
                      },
                    }),
                    Widget.Box({
-                      children: notifs.bind("notifications").as((n) => {
-                        if (n.length > 0) {
-                          return [
+                      children: [
                        Widget.Separator({
                          hpack: "center",
                          vexpand: true,
                          vertical: true,
-                              class_name:
-                                "menu-separator notification-controls",
+                          class_name: "menu-separator notification-controls",
                        }),
                        Widget.Button({
                          class_name: "clear-notifications-button",
@@ -71,10 +68,7 @@ export default () => {
                            label: "",
                          }),
                        }),
-                          ];
-                        }
-                        return [];
-                      }),
+                      ],
                    }),
                  ],
                }),
--- a/scss/bar/audio.scss
+++ b/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;
 }
--- a/scss/bar/workspace.scss
+++ b/scss/bar/workspace.scss
@@ -3,8 +3,8 @@
 .workspaces {
  label {
    font-size: 0.2em;
-    min-width: 4.5em;
-    min-height: 4.5em;
+    min-width: 4em;
+    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-height: 4.5em;
+      min-width: 4em;
+      min-height: 4em;
    }

    &.active {
      color: $pink;
      background-color: $pink;
-      min-width: 14em;
-      min-height: 4.5em;
+      min-width: 12em;
+      min-height: 4em;
    }
  }
 }
--- a/scss/menus/audiomenu.scss
+++ b/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;
-}
--- a/scss/menus/menu.scss
+++ b/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-width: 1.6rem;
+        min-height: 0.6rem;
+        min-width: 0.6rem;
        border: 0rem solid transparent;
        border-radius: 0.3rem;
    }
@@ -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 {
-    font-size: 1.3em;
-    font-weight: bold;
+.menu-section-container {
+    .menu-label {
        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-bottom: 0.5rem;
-    margin-top: 0.5rem;
+    margin: 0rem 1em;
+    margin-bottom: 0.9em;
 }

-.menu-active-icon {
+.menu-active-container {
+    &:first-child {
+        margin-bottom: 0.5em;
+    }
+}
+
+.menu-active-button {
+    padding: 0.1em;
+    margin-bottom: -0.2em;
+    .menu-active-icon {
        color: $overlay1;
-    font-size: 1.5em;
+        font-size: 1.4em;
        font-weight: bold;
-    margin-right: 0.7rem;
+
+    }
+
+    &.muted image {
+        color: $maroon;
+    }
+    &:hover image {
+        color: $maroon;
+    }
 }

 .menu-active-percentage {
-    font-size: 1em;
-    margin-left: 0.5rem;
+    font-size: 0.9em;
+    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 {
-    margin-bottom: 1.3rem;
+.menu-dropdown-label-container {
+    background: $base;
+    border-radius: 0.4em;
 }

 .menu-button {
--- a/scss/menus/notifications.scss
+++ b/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;
 }

--- a/style.css
+++ b/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-height: 4.5em;
+  min-width: 4em;
+  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-height: 4.5em;
+  min-width: 4em;
+  min-height: 4em;
 }
 .workspaces label.active {
  color: #f5c2e7;
  background-color: #f5c2e7;
-  min-width: 14em;
-  min-height: 4.5em;
+  min-width: 12em;
+  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-width: 1.6rem;
+  min-height: 0.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 {
-  font-size: 1.3em;
-  font-weight: bold;
+.menu-section-container {
+  margin: 1.35em 0em;
+}
+.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-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  margin: 0rem 1em;
+  margin-bottom: 0.9em;
 }

-.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;
-  margin-left: 0.5rem;
+  font-size: 0.9em;
+  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 {
-  margin-bottom: 1.3rem;
+.menu-dropdown-label-container {
+  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;
-}
-
-.menu-items {
-  min-width: 25rem;
+  color: #eba0ac;
 }

 .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;
-  margin-top: 0.6em;
-  margin-bottom: 0.4em;
+  background: #1e1e2e;
+  margin: 1em 1.3em;
+  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;
-}
-
-.menu-separator.notifications {
-  background-color: #313244;
-  margin: 0em 1em;
+  color: #b4befe;
 }

 .menu-separator.notification-controls {
--- a/style.css.map
+++ b/style.css.map