From a24b4485600dfb41130cdddc41234513848f425f Mon Sep 17 00:00:00 2001
From: tux <t@tux.rs>
Date: Fri, 26 Sep 2025 13:28:22 +0530
Subject: [PATCH] refactor(notifications): improve notification UX

---
 style/_notification.scss               | 10 ++++++++++
 widgets/notifications/notification.tsx |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/style/_notification.scss b/style/_notification.scss
index 90991ff..9c2f8d0 100644
--- a/style/_notification.scss
+++ b/style/_notification.scss
@@ -12,6 +12,16 @@ window.notifications {
     min-width: 20rem;
 
     .header {
+      .close {
+        padding: 10px;
+        background: $inactive-color;
+        border-radius: $rounded;
+
+        &:hover {
+          background: $bg-color;
+        }
+      }
+
       .app-icon {
         -gtk-icon-size: 2rem;
       }
diff --git a/widgets/notifications/notification.tsx b/widgets/notifications/notification.tsx
index a980691..d11d60c 100644
--- a/widgets/notifications/notification.tsx
+++ b/widgets/notifications/notification.tsx
@@ -57,7 +57,11 @@ export const Notification = ({ n }: { n: AstalNotifd.Notification }) => {
             label={n.appName || "Unknown"}
           />
           <label class="time" hexpand halign={END} label={time(n.time)} />
-          <button onClicked={() => n.dismiss()}>
+          <button
+            class="close"
+            onClicked={() => n.dismiss()}
+            cursor={Gdk.Cursor.new_from_name("pointer", null)}
+          >
             <image iconName="window-close-symbolic" />
           </button>
         </box>