From fce10c73b7342ab5494a45e4d9df8d368b05112a Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Wed, 6 Aug 2025 15:28:01 -0400
Subject: [PATCH] Closes #17222: Improve visibility of notifications icon
 (#20035)

---
 netbox/templates/htmx/notifications.html    | 4 ++--
 netbox/templates/inc/light_toggle.html      | 4 ++--
 netbox/templates/inc/notification_bell.html | 3 ++-
 netbox/templates/inc/user_menu.html         | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/netbox/templates/htmx/notifications.html b/netbox/templates/htmx/notifications.html
index e03e5afc9..2154d56ba 100644
--- a/netbox/templates/htmx/notifications.html
+++ b/netbox/templates/htmx/notifications.html
@@ -15,14 +15,14 @@
           <div class="d-block text-secondary fs-5">{{ notification.event }} {{ notification.created|timesince }} {% trans "ago" %}</div>
         </div>
         <div class="col-auto">
-          <a href="#" hx-get="{% url 'extras:notification_dismiss' pk=notification.pk %}" hx-target="closest .notifications" class="list-group-item-actions text-secondary" title="{% trans "Dismiss" %}">
+          <a href="#" hx-get="{% url 'extras:notification_dismiss' pk=notification.pk %}" hx-target="closest .notifications" class="list-group-item-actions text-red" title="{% trans "Dismiss" %}">
             <i class="mdi mdi-close"></i>
           </a>
         </div>
       </div>
     </div>
   {% empty %}
-    <div class="dropdown-item text-muted">
+    <div class="dropdown-item disabled">
       {% trans "No unread notifications" %}
     </div>
   {% endfor %}
diff --git a/netbox/templates/inc/light_toggle.html b/netbox/templates/inc/light_toggle.html
index e4d511501..aa72ed616 100644
--- a/netbox/templates/inc/light_toggle.html
+++ b/netbox/templates/inc/light_toggle.html
@@ -1,10 +1,10 @@
 {% load i18n %}
 
 <div class="d-flex ms-2">
-  <button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+  <button class="nav-link color-mode-toggle hide-theme-dark fs-2 p-0 text-secondary" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
     <i class="mdi mdi-lightbulb"></i>
   </button>
-  <button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+  <button class="nav-link color-mode-toggle hide-theme-light fs-2 p-0 text-secondary" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
     <i class="mdi mdi-lightbulb-on"></i>
   </button>
 </div>
diff --git a/netbox/templates/inc/notification_bell.html b/netbox/templates/inc/notification_bell.html
index 5140a2f3f..42148d96d 100644
--- a/netbox/templates/inc/notification_bell.html
+++ b/netbox/templates/inc/notification_bell.html
@@ -1,6 +1,7 @@
 {% if notifications %}
   <span class="text-primary" id="notifications-alert" hx-swap-oob="true">
-    <i class="mdi mdi-bell-badge"></i>
+    <i class="mdi mdi-bell-ring"></i>
+    <span class="badge bg-red"></span>
   </span>
 {% else %}
   <span class="text-muted" id="notifications-alert" hx-swap-oob="true">
diff --git a/netbox/templates/inc/user_menu.html b/netbox/templates/inc/user_menu.html
index e27be3323..4cca0b57e 100644
--- a/netbox/templates/inc/user_menu.html
+++ b/netbox/templates/inc/user_menu.html
@@ -12,9 +12,9 @@
   {# Notifications #}
   {% with notifications=request.user.notifications.unread.exists %}
     <div class="dropdown">
-      <a href="#" class="nav-link px-1" data-bs-toggle="dropdown" hx-get="{% url 'extras:notifications' %}" hx-target="next .notifications" aria-label="{% trans "Notifications" %}">
+      <button class="nav-link fs-2 p-0" data-bs-toggle="dropdown" hx-get="{% url 'extras:notifications' %}" hx-target="next .notifications" aria-label="{% trans "Notifications" %}">
         {% include 'inc/notification_bell.html' %}
-      </a>
+      </button>
       <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications"></div>
     </div>
   {% endwith %}