Larger click area for the clear notification button

app/assets/stylesheets/notifications.css

@@ -61,30 +61,42 @@
   }
 
   .notification__unread_indicator {
-    --btn-background: var(--color-marker);
+    --btn-background: var(--color-canvas);
     --btn-border-color: var(--color-canvas);
     --btn-icon-size: 0.7em;
     --btn-padding: 0;
-    --btn-size: 1.2em;
+    --btn-size: 1.75em;
     --hover-size: 0;
 
-    inset: var(--block-space) var(--inline-space) auto auto;
+    inset: 0 0 auto auto;
     position: absolute;
-    scale: 0.7;
 
-    img {
-      visibility: hidden;
+    /* The red dot */
+    &:before {
+      aspect-ratio: 1;
+      background-color: var(--color-marker);
+      border-radius: 50%;
+      content: "";
+      inline-size: 0.55em;
+      inset: 50% auto auto 50%;
+      position: absolute;
+      translate: -50% -50%;
+    }
+
+    .icon {
+      opacity: 0;
     }
 
     @media (hover: hover) {
       &:hover {
-        --btn-background: var(--color-ink-medium);
-        --btn-border-color: var(--color-ink-medium);
+        --btn-background: transparent;
 
-        scale: 1;
+        &:before {
+          opacity: 0;
+        }
 
-        img {
-          visibility: unset;
+        .icon {
+          opacity: 1;
         }
       }
     }

app/helpers/notifications_helper.rb

@@ -32,10 +32,10 @@ module NotificationsHelper
 
   def notification_mark_read_button(notification)
     button_to read_notification_path(notification),
-        class: "notification__unread_indicator btn borderless",
+        class: "notification__unread_indicator btn btn--circle borderless",
         title: "Mark as read",
         data: { turbo_frame: "_top" } do
-      concat(image_tag("remove-med.svg", class: "unread_icon", size: 12, aria: { hidden: true }))
+      concat(icon_tag("remove-med"))
       concat(tag.span("Mark as read", class: "for-screen-reader"))
     end
   end