TreeView minor fixes

pandora_console/include/class/Tree.class.php

@@ -772,10 +772,19 @@ class Tree
         if ((bool) $module['alerts']) {
             // Module has alerts triggered.
             if ($module_alert_triggered === true) {
-                $module['alertsImageHTML'] = html_print_image('images/bell_orange.png', true, ['title' => __('Module alerts'), 'style' => 'filter: initial']);
+                $colorAlertButton = COL_ALERTFIRED;
             } else {
-                $module['alertsImageHTML'] = html_print_image('images/bell_green.png', true, ['title' => __('Module alerts'), 'style' => 'filter: initial']);
+                $colorAlertButton = COL_NORMAL;
             }
+
+            $module['alertsImageHTML'] = html_print_div(
+                [
+                    'title' => __('Module alerts'),
+                    'class' => 'alert_background_state main_menu_icon module-button',
+                    'style' => 'background-color: '.$colorAlertButton,
+                ],
+                true
+            );
         }
     }
 

pandora_console/include/styles/pandora.css

@@ -11291,3 +11291,15 @@ form#satellite_conf_edit > fieldset.full-column {
 div[role="dialog"] {
   z-index: 1115;
 }
+
+.module_background_state {
+  mask: url(../../images/modules@svg.svg) no-repeat center / contain;
+  -webkit-mask: url(../../images/modules@svg.svg) no-repeat center / contain;
+  margin: 0 auto;
+}
+
+.alert_background_state {
+  mask: url(../../images/alert@svg.svg) no-repeat center / contain;
+  -webkit-mask: url(../../images/alert@svg.svg) no-repeat center / contain;
+  margin: 0 auto;
+}

pandora_console/include/styles/tree.css

@@ -272,7 +272,7 @@ div.tree-node span {
 
 .tree-node > .node-content > .module-action-buttons {
   float: right;
-  min-width: 105px;
+  min-width: 120px;
   position: relative;
   /* top: 5px; */
 }
@@ -356,8 +356,15 @@ div#tree-controller-recipient {
 
 .node-content .module-button {
   padding: 6px;
+  margin-top: 2px;
 }
 
+.node-content .module-button.module-alerts {
+  margin: 6px;
+  width: 16px;
+  padding: 0;
+  float: right;
+}
 .node-content .module-button:hover {
   /* width: 20px; */
   background-color: #fff;