Closes #17222: Improve visibility of notifications icon (#20035)

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

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>

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">

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