refactor(notifications): improve notification UX

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;
       }

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>