Removing the triangle icon

The message count was moved to the "hamburger" menu icon.
Using more discreet color for the circle.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/pi-hole/js/utils.js

@@ -366,18 +366,18 @@ function checkMessages() {
     : false;
   $.getJSON("api_db.php?status" + (ignoreNonfatal ? "&ignore=DNSMASQ_WARN" : ""), function (data) {
     if ("message_count" in data && data.message_count > 0) {
+      var more = '\nAccess "Tools/Pi-hole diganosis" for further details.';
       var title =
         data.message_count > 1
-          ? "There are " + data.message_count + " warnings. Click for further details."
-          : "There is one warning. Click for further details.";
+          ? "There are " + data.message_count + " warnings." + more
+          : "There is one warning." + more;
 
-      $("#pihole-diagnosis").prop("title", title);
-      $("#pihole-diagnosis-count").text(data.message_count);
-      $("#pihole-diagnosis").removeClass("hidden");
+      $("#top-warning-count").prop("title", title);
+      $("#top-warning-count").removeClass("hidden");
       $(".warning-count").text(data.message_count);
       $(".warning-count").removeClass("hidden");
     } else {
-      $("#pihole-diagnosis").addClass("hidden");
+      $("#top-warning-count").addClass("hidden");
       $(".warning-count").addClass("hidden");
     }
   });

scripts/pi-hole/php/header.php

@@ -265,15 +265,10 @@ if($auth) {
             <a href="#" class="sidebar-toggle-svg" data-toggle="push-menu" role="button">
                 <i aria-hidden="true" class="fa fa-bars"></i>
                 <span class="sr-only">Toggle navigation</span>
+                <span class="warning-count hidden" id="top-warning-count"></span>
             </a>
             <div class="navbar-custom-menu">
                 <ul class="nav navbar-nav">
-                    <li id="pihole-diagnosis" class="hidden">
-                        <a href="messages.php">
-                            <i class="fa fa-exclamation-triangle fa-2x icon-bounce"></i>
-                            <span class="label label-warning" id="pihole-diagnosis-count"></span>
-                        </a>
-                    </li>
                     <li<?php echo !$hostname ? ' class="hidden"' : "" ?>>
                         <p class="navbar-text">
                             <span class="hidden-xs hidden-sm">hostname:</span>

style/pi-hole.css

@@ -403,6 +403,7 @@ td.lookatme {
 }
 
 .sidebar-toggle-svg {
+  position: relative;
   color: #fff;
   float: left;
   background: none;
@@ -547,7 +548,7 @@ td.details-control {
   }
 
   /* hide warning icon only when logged in and menu is not collapsed */
-  .logged-in:not(.sidebar-collapse) #pihole-diagnosis,
+  .logged-in:not(.sidebar-collapse) #top-warning-count,
   .menu-open > a > span.warning-count {
     display: none;
   }
@@ -567,6 +568,14 @@ td.details-control {
   right: 3em;
   top: 50%;
   font-size: 12px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+#top-warning-count {
+  top: 50%;
+  left: 50%;
+  right: unset;
+  margin: 0;
 }
 
 .treeview-menu .warning-count {