Revamped Notification and NotificationCenter

modules/notification/notification.py

@@ -139,10 +139,10 @@ class NotificationWidget(Box):
                     children=CustomImage(
                         pixbuf=(
                             notification.image_pixbuf.scale_simple(
-                                48, 48, GdkPixbuf.InterpType.BILINEAR
+                                35, 35, GdkPixbuf.InterpType.BILINEAR
                             )
                             if notification.image_pixbuf
-                            else self.get_pixbuf(notification.app_icon, 48, 48)
+                            else self.get_pixbuf(notification.app_icon, 35, 35)
                         )
                     ),
                 ),
@@ -161,12 +161,12 @@ class NotificationWidget(Box):
                                     h_align="start",
                                     ellipsization="end",
                                 ),
-                                Label(
-                                    name="notification-app-name",
-                                    markup=" | " + notification.app_name,
-                                    h_align="start",
-                                    ellipsization="end",
-                                ),
+                                # Label(
+                                #     name="notification-app-name",
+                                #     markup=" | " + notification.app_name,
+                                #     h_align="start",
+                                #     ellipsization="end",
+                                # ),
                             ],
                         ),
                         (
@@ -185,11 +185,19 @@ class NotificationWidget(Box):
                     ],
                 ),
                 Box(h_expand=True),
-                Button(
-                    name="notification-close-button",
-                    image=CustomImage(icon_name="close-symbolic", icon_size=18),
-                    visible=True,  # Initially hidden
-                    on_clicked=lambda *_: self.notification.close("dismissed-by-user"),
+                Box(
+                    orientation="v",
+                    children=[
+                        Button(
+                            name="notification-close-button",
+                            image=CustomImage(icon_name="close-symbolic", icon_size=18),
+                            visible=True,  # Initially hidden
+                            on_clicked=lambda *_: self.notification.close(
+                                "dismissed-by-user"
+                            ),
+                        ),
+                        Box(v_expand=True),
+                    ],
                 ),
             ],
         )

styles/notification-center.css

@@ -2,15 +2,15 @@
   background-color: alpha(#fff, 0.09);
 
   border: 1px solid alpha(#111, 0.3);
-  border-radius: 16px;
+  border-radius: 10px;
   padding: 20px;
-  margin: 6px;
+  /* margin: 6px; */
 }
 
 #noti-clear-button {
   min-width: 10px;
   min-height: 40px;
-  border-radius: 50px;
+  border-radius: 10px;
   margin-top: 10px;
 }
 
@@ -23,7 +23,7 @@
 
 /* Stacked notification group styles */
 .stacked-notification-group {
-  margin: 8px 0;
+  margin: 4px 0;
 }
 
 .stacked-notification-container {

styles/notification.css

@@ -1,23 +1,29 @@
 #notification {
-  padding: 16px;
+  padding: 10px;
   background-color: alpha(#fff, 0.03);
-  border-radius: 20px;
-  margin: 4px;
+  border-radius: 8px;
+  margin-top: 10px;
+  margin-right: 10px;
+  /* margin: 5px; */
 }
 
-#notification-action-buttons button.start-action {
-  border-radius: 20px;
+#notification-close-button {
+  background-color: alpha(#999, 0.3);
+  border-radius: 8px;
+}
+#notification-close-button:hover {
+  background-color: alpha(#2369ff, 0.9);
 }
 
 #notification-action-buttons button {
   background-color: alpha(#999, 0.3);
-  padding: 8px;
-  border-radius: 20px;
+  padding: 4px;
+  border-radius: 7px;
   transition: background-color 0.1s ease;
 }
 
 #notification-action-buttons button:hover {
-  background-color: alpha(#000, 0.3);
+  background-color: alpha(#2369ff, 0.9);
 }
 
 #notification-action-buttons button:active {
@@ -35,16 +41,17 @@
 
 #notification-summary,
 #button-label {
-  font-weight: bold;
 }
 
 #notification-summary {
   font-weight: bold;
-  color: var(--primary);
+  font-size: 16px;
+  /* color: var(--primary); */
 }
 
 #notification-app-name {
   color: var(--outline);
+  font-weight: bold;
 }
 
 #action-button {