Updated notification styling

modules/menus/calendar/index.js

@@ -10,30 +10,33 @@ const period = Variable("", {
   poll: [1000, 'date "+%p"'],
 });
 const defaultWeather = {
+  location: {
+    localtime_epoch: 1719471600,
+  },
   current: {
     temp_f: 0,
     wind_mph: 0,
     condition: {
       text: "Clear",
     },
-    forecast: {
+  },
-      forecastday: [
+  forecast: {
-        {
+    forecastday: [
-          day: {
+      {
-            daily_chance_of_rain: 0,
+        day: {
-          },
+          daily_chance_of_rain: 0,
-          hour: [
-            {
-              time_epoch: 1719471600,
-              temp_f: 0,
-              condition: {
-                text: "Clear",
-              },
-            },
-          ],
         },
-      ],
+        hour: [
-    },
+          {
+            time_epoch: 1719471600,
+            temp_f: 0,
+            condition: {
+              text: "Clear",
+            },
+          },
+        ],
+      },
+    ],
   },
 };
 
@@ -336,7 +339,7 @@ const WeatherWidget = () => {
                           );
 
                         return icons.weather[
-                          weatherAtEpoch.condition.text
+                          weatherAtEpoch?.condition.text
                             .trim()
                             .toLowerCase()
                             .replaceAll(" ", "_")
@@ -356,7 +359,7 @@ const WeatherWidget = () => {
                             (h) => h.time_epoch === nextEpoch,
                           );
 
-                        return `${Math.ceil(weatherAtEpoch.temp_f)}° F`;
+                        return `${weatherAtEpoch ? Math.ceil(weatherAtEpoch.temp_f) : "-"}° F`;
                       }),
                     }),
                   ],

modules/menus/notifications/index.js

@@ -13,17 +13,18 @@ export default () => {
     child: Widget.Box({
       class_name: "notification-menu-content",
       css: "padding: 1px; margin: -1px;",
+      hexpand: true,
       vexpand: false,
       children: [
         Widget.Box({
           class_name: "notification-card-container menu",
-          spacing: 0,
           vertical: true,
           hexpand: false,
           vexpand: false,
           children: [
             Widget.Box({
               class_name: "notification-menu-controls",
+              expand: false,
               vertical: false,
               children: [
                 Widget.Box({
@@ -79,13 +80,10 @@ export default () => {
                 }),
               ],
             }),
-            Widget.Separator({
-              class_name: "menu-separator notifications",
-            }),
             Widget.Box({
               class_name: "menu-content-container notifications",
               hpack: "center",
-              expand: false,
+              vexpand: false,
               spacing: 0,
               vertical: true,
               setup: (self) => {
@@ -206,7 +204,7 @@ export default () => {
                     return Widget.Box({
                       class_name: "notification-card menu",
                       vpack: "center",
-                      hexpand: false,
+                      hexpand: true,
                       children: [
                         ...imageContainer(notif),
                         Widget.Box({

scss/menus/notifications.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 
 .notification-card-container.menu {
-  margin-top: 0em;
+  margin: 0em;
   min-width: 26em;
   min-height: 6em;
   background: $crust;
@@ -13,19 +13,22 @@
 }
 
 .menu-content-container.notifications {
-  margin: 1em;
+  margin: 1.35em;
   min-height: 4em;
 }
 
 .notification-menu-controls {
-  margin: 0em 1em;
+  background: $base;
-  margin-top: 0.6em;
+  margin: 1em 1.3em;
-  margin-bottom: 0.4em;
+  margin-bottom: 0em;
+  border-radius: 0.4em;
+  padding: 0em 0.5em;
 }
 
 .notification-card.menu {
   background: $base;
-  border: 0.1em solid $surface0;
+  border: 0.15em solid $base;
+  border-radius: 0.4em;
   margin: 0em;
 }
 
@@ -35,12 +38,6 @@
 
 .menu-label.notifications {
   color: $lavender;
-  margin: 0em;
-}
-
-.menu-separator.notifications {
-  background-color: $surface0;
-  margin: 0em 1em;
 }
 
 .menu-separator.notification-controls {