💄 floating-notifications: better appearance, use gtk's spacing instead of margin

ags/style/_float-notifications.scss

@@ -2,13 +2,17 @@
 @use "./mixins";
 
 .floating-notifications-container {
-  padding: {
-    right: 6px;
-    top: 6px;
-  };
+  padding: 16px;
 
-  & .notification {
-    margin: 6px;
-    box-shadow: 0 0 4px .5px colors.$bg-primary;
+  & .float-notification {
+    $radius: 18px;
+
+    box-shadow: 0 0 8px 1px colors.$bg-translucent;
+    border-radius: $radius;
+
+    & .notification {
+      padding: 4px;
+      border-radius: $radius;
+    }
   }
 }

ags/window/FloatingNotifications.ts

@@ -16,11 +16,15 @@ export const FloatingNotifications = (mon: number) => new Widget.Window({
         className: "floating-notifications-container",
         orientation: Gtk.Orientation.VERTICAL,
         homogeneous: false,
+        spacing: 12,
         visible: bind(Notifications.getDefault(), "notifications").as(notifs => notifs.length > 0),
         children: bind(Notifications.getDefault(), "notifications").as((notifs) => 
-            notifs.map((item) => NotificationWidget(item, 
-                () => Notifications.getDefault().removeNotification(item),
-                false, true))
+            notifs.map((item) => new Widget.Box({
+                className: "float-notification",
+                child: NotificationWidget(item, 
+                    () => Notifications.getDefault().removeNotification(item),
+                    false, true)
+            } as Widget.BoxProps))
         ),
     } as Widget.BoxProps)
 } as Widget.WindowProps);