From 482459764993d0ca153fd9573e03abcdc2ed3b50 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 5 May 2025 14:49:31 -0500
Subject: [PATCH] Larger click area for the clear notification button

---
 app/assets/stylesheets/notifications.css | 34 ++++++++++++++++--------
 app/helpers/notifications_helper.rb      |  4 +--
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 43dd95d5e..1cd3a83fc 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/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;
         }
       }
     }
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index 3c36cc51a..13125cdad 100644
--- a/app/helpers/notifications_helper.rb
+++ b/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