From 24b652a8a73900f4ebfb70c6e74f2f355d7524b7 Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Wed, 19 Apr 2023 18:00:48 +0200
Subject: [PATCH] 9555-Styles & fixes

---
 pandora_console/mobile/include/style/main.css | 406 +++++++++++++++++-
 pandora_console/mobile/include/ui.class.php   |   5 +-
 pandora_console/mobile/operation/agents.php   |  10 +-
 pandora_console/mobile/operation/alerts.php   |  18 +-
 .../mobile/operation/module_data.php          |   2 +-
 pandora_console/mobile/operation/modules.php  |  52 +--
 pandora_console/mobile/operation/services.php |   8 +-
 7 files changed, 442 insertions(+), 59 deletions(-)

diff --git a/pandora_console/mobile/include/style/main.css b/pandora_console/mobile/include/style/main.css
index 3c63b13a82..f3e895e718 100755
--- a/pandora_console/mobile/include/style/main.css
+++ b/pandora_console/mobile/include/style/main.css
@@ -27,9 +27,11 @@
  */
 :root {
   --primary-color: #14524f;
+  --primary-color-hover: #104240;
   --secondary-color: #ffffff;
   --body-color: #f6f7fb;
   --border-color: #e5e9ed;
+  --border-dark-color: #c0ccdc;
   --muted-color: #8a96a6;
 }
 
@@ -56,10 +58,12 @@ body {
   font-family: "Lato" !important;
 }
 
-a {
+a.ui-link,
+/* a:not(> div.event_name), */
+a:not(.ui-button) {
   text-decoration: underline !important;
   text-decoration-color: var(--muted-color) !important;
-  color: var(--primary-color);
+  color: var(--primary-color) !important;
 }
 
 .small {
@@ -86,6 +90,10 @@ a {
   align-items: center;
 }
 
+.flex-column {
+  flex-direction: column;
+}
+
 .space-between {
   justify-content: space-between;
 }
@@ -615,11 +623,6 @@ table.event_details td.cell_event_name {
   font-size: 14px;
 }
 
-#list_agents .cell_0 img {
-  float: left;
-  margin-right: 3px;
-}
-
 #list_agents td:hover,
 #list_networkmaps td:hover,
 #list_events td:hover,
@@ -643,7 +646,7 @@ table.event_details td.cell_event_name {
 }
 
 @media screen and (max-width: 34.99em) {
-  #list_agents td {
+  /* #list_agents td {
     height: 35px;
     padding-top: 7px;
     display: table-cell;
@@ -652,9 +655,9 @@ table.event_details td.cell_event_name {
     padding-left: 0px !important;
     padding-right: 0px !important;
     width: auto !important;
-  }
+  } */
 
-  #list_agents td.cell_0 {
+  /* #list_agents td.cell_0 {
     border-top: 0px none;
   }
   #list_agents td.cell_0 > span.tiny > img {
@@ -723,7 +726,7 @@ table.event_details td.cell_event_name {
 
   .agents_tiny_stats * {
     font-size: 12px !important;
-  }
+  } */
 
   #list_agent_Modules td {
     padding-top: 7px !important;
@@ -748,15 +751,6 @@ table.event_details td.cell_event_name {
 }
 /*END-----------Agents styles-----------------------------------------*/
 
-/*INIT-----------Alerts styles---------------------------------------*/
-
-#list_alerts td {
-  height: 35px;
-  padding-top: 20px;
-}
-
-/*END-----------Alerts styles---------------------------------------*/
-
 /*INIT-----------Network maps styles---------------------------------------*/
 
 #list_networkmaps td {
@@ -924,6 +918,9 @@ table.event_details td.cell_event_name {
     font-size: 12px !important;
   }
 
+  table#list_agents tr,
+  table#list_Modules tr,
+  table#list_alerts tr,
   table#list_module_data tr,
   table#list_servers tr,
   table[id^="service-table-"] tr {
@@ -933,6 +930,8 @@ table.event_details td.cell_event_name {
     align-items: center;
   }
 
+  table#list_agents b.ui-table-cell-label,
+  table#list_alerts b.ui-table-cell-label,
   table#list_module_data b.ui-table-cell-label,
   table#list_servers b.ui-table-cell-label,
   table[id^="service-table-"] b.ui-table-cell-label {
@@ -1859,12 +1858,13 @@ div.border-collapsible
 }
 
 table[id^="service-table-"] {
-  width: 100%;
+  margin-left: -14px;
+  width: calc(100% + 28px);
 }
 
 table > tbody > tr:nth-child(even),
 table[id^="service-table-"] > tbody > tr:nth-child(even) {
-  background-color: #e5e9ed;
+  background-color: var(--border-color);
 }
 
 table[id^="service-table-"] a strong {
@@ -1956,14 +1956,24 @@ span#user_logged {
   background-image: url(../../../images/home-mobile.svg) !important;
 }
 
+.ui-icon-caret-d,
 .ui-icon-arrow-d {
   background-image: url(../../../images/arrow-d-mobile.svg) !important;
 }
 
+.ui-icon-caret-u,
 .ui-icon-arrow-u {
   background-image: url(../../../images/arrow-u-mobile.svg) !important;
 }
 
+.ui-icon-delete {
+  background-image: url(../../../images/close@svg.svg) !important;
+}
+
+.ui-icon-search {
+  background-image: url(../../../images/details.svg) !important;
+}
+
 .ui-icon {
   background-color: transparent !important;
 }
@@ -2136,6 +2146,11 @@ table#last-activity > tbody > tr > td > b {
   border-radius: 8px;
 }
 
+.white-card.p-lr-0px {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 /* Events table */
 table#last_agent_events > tbody > tr.events > td.cell_0,
 table#list_events > tbody > tr.events > td.cell_0 {
@@ -2175,9 +2190,21 @@ table#last_agent_events > tbody > tr.events.datos_grey > td,
 table#list_events > tbody > tr.events.datos_grey > td {
   background-color: #adadad40;
 }
+table#last_agent_events > tbody > tr.events.datos_pink > td,
+table#list_events > tbody > tr.events.datos_pink > td {
+  background-color: #ef6dfb40;
+}
+table#last_agent_events > tbody > tr.events.datos_brown > td,
+table#list_events > tbody > tr.events.datos_brown > td {
+  background-color: #a52e0040;
+}
 
+table#list_agents > thead > tr > th,
+table#list_Modules > thead > tr > th,
+table#list_alerts > thead > tr > th,
 table#list_module_data > thead > tr > th {
   display: initial;
+  text-align: center;
 }
 
 h4[id^="service-"].ui-collapsible-heading
@@ -2199,3 +2226,338 @@ table[id^="service-table-"] > tbody > tr {
   padding: 0px 5px !important;
   height: 48px !important;
 }
+
+table#list_events td {
+  width: calc(100vw - 44px) !important;
+}
+
+.white-card.p-lr-0px table#list_alerts,
+.white-card.p-lr-0px table#list_alerts thead,
+.white-card.p-lr-0px table#list_alerts tbody,
+.white-card.p-lr-0px table#list_alerts tr,
+.white-card.p-lr-0px table#list_agents,
+.white-card.p-lr-0px table#list_agents thead,
+.white-card.p-lr-0px table#list_agents tbody,
+.white-card.p-lr-0px table#list_agents tr,
+.white-card.p-lr-0px table#list_Modules,
+.white-card.p-lr-0px table#list_Modules thead,
+.white-card.p-lr-0px table#list_Modules tbody,
+.white-card.p-lr-0px table#list_Modules tr {
+  width: calc(100vw - 26px) !important;
+}
+
+table#list_alerts > thead > tr > th[data-colstart="1"],
+table#list_alerts > tbody > tr > td.cell_0 {
+  width: 7%;
+  padding-right: 5px;
+}
+table#list_alerts > thead > tr > th[data-colstart="2"],
+table#list_alerts > tbody > tr > td.cell_1 {
+  width: 50%;
+}
+table#list_alerts > tbody > tr > td.cell_1 > div > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+table#list_alerts > thead > tr > th[data-colstart="3"],
+table#list_alerts > tbody > tr > td.cell_2 {
+  width: 25%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+table#list_alerts > thead > tr > th[data-colstart="4"],
+table#list_alerts > tbody > tr > td.cell_3 {
+  width: 18%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table#list_alerts > thead > tr > th[data-colstart="1"] {
+  color: transparent;
+  text-shadow: none;
+}
+
+table#list_alerts > tbody > tr > td.cell_1 {
+  padding: 0px !important;
+}
+
+table#list_agents span.agents_last_contact {
+  margin-left: 5px;
+}
+
+table#list_agents td.cell_0 > span.agent-status {
+  margin-right: 5px;
+}
+
+table#list_agents td.cell_0 > a {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table#list_agents td.cell_5 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+table#list_agents td.cell_6 span.agents_last_contact {
+  white-space: nowrap;
+  margin-right: 5px;
+}
+
+table#list_agents.ui-table-reflow thead tr th {
+  display: initial;
+}
+
+table#list_agents > tbody > tr > td.cell_1,
+table#list_agents > tbody > tr > td.cell_2,
+table#list_agents > tbody > tr > td.cell_3,
+table#list_agents > tbody > tr > td.cell_4,
+table#list_agents > tbody > tr > td.cell_7,
+table#list_agents > thead > tr > th[data-colstart="2"],
+table#list_agents > thead > tr > th[data-colstart="3"],
+table#list_agents > thead > tr > th[data-colstart="4"],
+table#list_agents > thead > tr > th[data-colstart="5"],
+table#list_agents > thead > tr > th[data-colstart="8"],
+table#list_Modules > thead > tr > th[data-colstart="2"],
+table#list_Modules > thead > tr > th[data-colstart="3"],
+table#list_Modules > thead > tr > th[data-colstart="4"] {
+  display: none;
+}
+
+table#list_Modules > thead > tr > th[data-colstart="1"],
+table#list_Modules > tbody > tr > td.cell_0 {
+  width: 50%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 5px;
+}
+table#list_Modules > thead > tr > th[data-colstart="5"],
+table#list_Modules > tbody > tr > td.cell_4 {
+  width: 25%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+table#list_Modules > thead > tr > th[data-colstart="6"],
+table#list_Modules > tbody > tr > td.cell_5 {
+  width: 25%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  margin-right: 5px;
+}
+
+table#list_alerts > tbody > tr,
+table#list_agents > tbody > tr,
+table#list_Modules > tbody > tr {
+  height: 48px !important;
+}
+
+table#list_alerts tbody td .status_rounded_rectangles,
+table#list_Modules tbody td .status_rounded_rectangles,
+table#list_agents tbody td .status_rounded_rectangles {
+  line-height: 20px;
+  width: 5px;
+  height: 20px;
+}
+
+table#list_alerts tbody td.cell_4 div.status_rounded_rectangles {
+}
+
+table#list_Modules td.cell_0 span.module-status {
+  margin-right: 5px;
+}
+
+table#list_agents thead tr {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+table#list_agents tr th {
+  text-align: center;
+}
+
+table#list_Modules tr td,
+table#list_agents tr td {
+  padding: 0px !important;
+  line-height: 25px;
+}
+
+table#list_agents > thead > tr > th[data-colstart="1"],
+table#list_agents > tbody > tr > td.cell_0 {
+  width: 50%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 5px;
+}
+table#list_agents > thead > tr > th[data-colstart="6"],
+table#list_agents > tbody > tr > td.cell_5 {
+  width: 25%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+table#list_agents > thead > tr > th[data-colstart="7"],
+table#list_agents > tbody > tr > td.cell_6 {
+  width: 25%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  margin-right: 5px;
+}
+
+table#list_events td a div.event_name {
+  word-wrap: break-word;
+}
+
+div#module-dialog-popup {
+  width: 280px;
+  height: 200px;
+  max-width: 100vw !important;
+}
+
+div#module-dialog {
+  height: 100%;
+}
+
+a#close-dialog-btn {
+  padding: 0px;
+  height: 25px;
+  width: 25px;
+  line-height: 25px;
+  margin-right: 5px;
+}
+
+a#graph-option,
+a#historical-option {
+  line-height: 40px;
+}
+
+div[data-role="fieldcontain"] > fieldset > label[for^="select-"] {
+  margin-top: 10px;
+  font-size: 10pt !important;
+  font-weight: 600;
+}
+
+div[data-role="fieldcontain"]
+  > fieldset
+  > div.ui-selectmenu
+  > a[id^="select-"] {
+  box-shadow: unset;
+  text-align: left;
+  color: var(--muted-color);
+  font-weight: 500;
+  border: 1px solid var(--border-dark-color) !important;
+  border-radius: 8px !important;
+}
+
+li > a.ui-listview-item-button.ui-button.ui-button-active {
+  color: #000;
+}
+
+div.ui-toolbar-header.ui-bar-inherit {
+  height: 40px;
+  line-height: 22px;
+  font-size: 10pt;
+}
+
+div.ui-toolbar-header.ui-bar-inherit
+  > .ui-page-dialog-close-button.ui-button.ui-corner-all.ui-button-icon-only.ui-toolbar-header-button-left {
+  background-color: transparent;
+  border: 0px;
+}
+
+div#free_search-container
+  > fieldset.ui-controlgroup.ui-controlgroup-vertical.ui-group-theme-inherit
+  > div.ui-textinput.ui-corner-all.ui-shadow-inset.ui-textinput-search.ui-body-inherit.ui-textinput-has-clear-button {
+  box-shadow: unset;
+  border: 1px solid var(--border-dark-color) !important;
+  border-radius: 8px !important;
+}
+
+input[name="free_search"] {
+  height: 48px;
+  margin-left: 15px !important;
+}
+
+input[name="free_search"]::placeholder {
+  font-style: italic;
+}
+
+div#free_search-container
+  span.ui-textinput-search-icon.ui-icon.ui-alt-icon.ui-icon-search {
+  height: 30px;
+  width: 25px;
+  margin-top: -15px !important;
+  margin-left: 5px;
+}
+
+a.ui-textinput-clear-button.ui-button-icon-only.ui-button-right.ui-widget.ui-button-inherit.ui-button.ui-shadow.ui-controlgroup-item {
+  height: 40px;
+  padding: 0px;
+  width: 40px;
+  margin-top: -20px !important;
+  box-shadow: unset;
+}
+
+fieldset[data-role="controlgroup"] > input[type="submit"] {
+  height: 48px;
+  border-radius: 8px;
+  background-color: var(--primary-color);
+  text-shadow: none;
+  color: var(--body-color);
+  font-size: 11pt !important;
+}
+
+fieldset[data-role="controlgroup"] > input[type="submit"]:active,
+fieldset[data-role="controlgroup"] > input[type="submit"]:hover {
+  background-color: var(--primary-color-hover);
+  text-shadow: none;
+  color: var(--body-color);
+}
+
+div.filter-collapsible.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content
+  > h4
+  > a {
+  height: 48px;
+  padding-top: 0px;
+  padding-left: 0px;
+  line-height: 55px;
+  font-size: 11pt;
+}
+
+div.filter-collapsible.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content
+  > h4
+  > a
+  > span.ui-icon.ui-icon-arrow-u,
+div.filter-collapsible.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content
+  > h4
+  > a
+  > span.ui-icon.ui-icon-arrow-d {
+  margin-left: 5px;
+}
+
+div.filter-collapsible.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content
+  > h4
+  > a,
+div.filter-collapsible.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content
+  > div
+  > ul
+  > li {
+  text-shadow: none !important;
+  background-color: var(--border-color) !important;
+}
diff --git a/pandora_console/mobile/include/ui.class.php b/pandora_console/mobile/include/ui.class.php
index 04bda0f942..87d20647a4 100755
--- a/pandora_console/mobile/include/ui.class.php
+++ b/pandora_console/mobile/include/ui.class.php
@@ -413,12 +413,13 @@ class Ui
     }
 
 
-    public function contentBeginCollapsible($title='&nbsp;')
+    public function contentBeginCollapsible($title='&nbsp;', $class='')
     {
         $this->endCollapsible = false;
         $this->collapsible = [];
         $this->collapsible['items'] = [];
         $this->collapsible['title'] = $title;
+        $this->collapsible['class'] = $class;
     }
 
 
@@ -432,7 +433,7 @@ class Ui
     {
         $this->endCollapsible = true;
 
-        $html = "<div data-role='collapsible' "." data-collapsed-icon='arrow-d' "." data-expanded-icon='arrow-u' data-mini='true' "." data-theme='a' data-content-theme='c'>\n";
+        $html = "<div class='".$this->collapsible['class']."' data-role='collapsible' "." data-collapsed-icon='arrow-d' "." data-expanded-icon='arrow-u' data-mini='true' "." data-theme='a' data-content-theme='c'>\n";
         $html .= '<h4>'.$this->collapsible['title']."</h4>\n";
 
         $html .= "<ul data-role='listview' data-theme='c'>\n";
diff --git a/pandora_console/mobile/operation/agents.php b/pandora_console/mobile/operation/agents.php
index 37320a52e2..a53afc40d3 100644
--- a/pandora_console/mobile/operation/agents.php
+++ b/pandora_console/mobile/operation/agents.php
@@ -401,7 +401,7 @@ class Agents
 
             $serialized_filters_q_param = empty($this->serializedFilters) ? '' : '&agents_filter='.$this->serializedFilters;
 
-            $row[0] = $row[__('Agent')] = '<span class="tiny mrgn_right_5px">'.$img_status.'</span>'.'<a class="ui-link" data-ajax="false" href="index.php?page=agent&id='.$agent['id_agente'].$serialized_filters_q_param.'">'.ui_print_truncate_text($agent['alias'], 30, false).'</a>';
+            $row[0] = $row[__('Agent')] = '<span class="tiny agent-status">'.$img_status.'</span>'.'<a class="ui-link" data-ajax="false" href="index.php?page=agent&id='.$agent['id_agente'].$serialized_filters_q_param.'">'.ui_print_truncate_text($agent['alias'], 30, false).'</a>';
             $row[2] = $row[__('OS')] = ui_print_os_icon($agent['id_os'], false, true);
             $row[3] = $row[__('Group')] = ui_print_group_icon($agent['id_grupo'], true, 'groups_small', '', false);
             $row[5] = $row[__('Status')] = '<span class="show_collapside align-none-10p">'.__('S.').' </span>'.$img_status;
@@ -461,15 +461,19 @@ class Agents
             $table = new Table();
             $table->id = 'list_agents';
             $table->importFromHash($listAgents['agents']);
+
+            $ui->contentAddHtml('<div class="white-card p-lr-0px">');
             $ui->contentAddHtml($table->getHTML());
 
             if ($system->getPageSize() < $listAgents['total']) {
                 $ui->contentAddHtml(
-                    '<div id="loading_rows">'.html_print_image('images/spinner.gif', true, false, false, false, false, true).' '.__('Loading...').'</div>'
+                    '<br><div id="loading_rows">'.html_print_image('images/spinner.gif', true, false, false, false, false, true).' '.__('Loading...').'</div>'
                 );
 
                 $this->addJavascriptAddBottom();
             }
+
+            $ui->contentAddHtml('</div>');
         }
 
         $ui->contentAddLinkListener('list_agents');
@@ -528,7 +532,7 @@ class Agents
 									},
 									\"json\");
                                 // Clean
-                                $('#loading_rows').remove();
+                                // $('#loading_rows').remove();
 							}
 						}
 				}
diff --git a/pandora_console/mobile/operation/alerts.php b/pandora_console/mobile/operation/alerts.php
index 43c6482264..c1d17caac3 100644
--- a/pandora_console/mobile/operation/alerts.php
+++ b/pandora_console/mobile/operation/alerts.php
@@ -331,14 +331,21 @@ class Alerts
             }
 
             $row = [];
-            if (isset($this->columns['agent']) && $this->columns['agent']) {
-                $row[__('Agent')] = sprintf($disabled_style, io_safe_output($alert['agent_alias']));
-            }
+            $row[__('Status')] = ui_print_status_image($status, $title, true);
 
-            $row[__('Module')] = sprintf(
+            $row[__('Module/Agent')] = '<div class="flex flex-column"><span>';
+            $row[__('Module/Agent')] .= sprintf(
                 $disabled_style,
                 io_safe_output($alert['module_name'])
             );
+
+            $row[__('Module/Agent')] .= '</span><span class="muted">';
+            if (isset($this->columns['agent']) && $this->columns['agent']) {
+                $row[__('Module/Agent')] .= sprintf($disabled_style, io_safe_output($alert['agent_alias']));
+            }
+
+            $row[__('Module/Agent')] .= '</span></div>';
+
             $row[__('Template')] = sprintf(
                 $disabled_style,
                 io_safe_output($alert['template_name'])
@@ -347,7 +354,6 @@ class Alerts
                 $disabled_style,
                 human_time_comparation($alert['last_fired'], 'tiny')
             );
-            $row[__('Status')] = ui_print_status_image($status, $title, true);
 
             $table[] = $row;
         }
@@ -365,7 +371,9 @@ class Alerts
             $tableHTML->id = 'list_alerts';
             $tableHTML->importFromHash($table);
             if (!$return) {
+                $ui->contentAddHtml('<div class="white-card p-lr-0px">');
                 $ui->contentAddHtml($tableHTML->getHTML());
+                $ui->contentAddHtml('</div>');
             } else {
                 return $tableHTML->getHTML();
             }
diff --git a/pandora_console/mobile/operation/module_data.php b/pandora_console/mobile/operation/module_data.php
index 101397de47..c958a07ddc 100644
--- a/pandora_console/mobile/operation/module_data.php
+++ b/pandora_console/mobile/operation/module_data.php
@@ -199,7 +199,7 @@ class ModuleData
                 $agent_name = agents_get_name($agent_id);
                 $module_name = modules_get_agentmodule_name($this->moduleId);
                 $ui->contentAddHtml('<h1 class="center font-10pt">'.$module_name.'</h1>');
-                $ui->contentAddHtml('<p class="center"><span class="muted small">'.$agent_name.'</span></p>');
+                $ui->contentAddHtml('<p class="center"><span class="muted">'.$agent_name.'</span></p>');
 
                 $ui->contentAddHtml($table->getHTML());
 
diff --git a/pandora_console/mobile/operation/modules.php b/pandora_console/mobile/operation/modules.php
index ba558e5726..f097d61791 100644
--- a/pandora_console/mobile/operation/modules.php
+++ b/pandora_console/mobile/operation/modules.php
@@ -250,7 +250,7 @@ class Modules
                 __('Filter Modules by %s'),
                 $this->filterEventsGetString()
             );
-            $ui->contentBeginCollapsible($filter_title);
+            $ui->contentBeginCollapsible($filter_title, 'filter-collapsible');
                 $ui->beginForm('index.php?page=modules');
                     $system = System::getInstance();
                     $groups = users_get_groups_for_select(
@@ -599,9 +599,9 @@ class Modules
                         $script = 'onclick="openDialog('.$module['id_agente_modulo'].', '.$this->id_agent.', \'node\');"';
                     }
 
-                    $row[0] = $row[__('Module name')] = '<span '.$script.'><span class="tiny mrgn_right_5px">'.$image_status.'</span>'.'<span class="data module_name">'.ui_print_truncate_text($module['module_name'], 30, false).'</span></span>';
+                    $row[0] = $row[__('Module name')] = '<span '.$script.'><span class="tiny module-status">'.$image_status.'</span>'.'<span class="data module_name">'.ui_print_truncate_text($module['module_name'], 30, false).'</span></span>';
                 } else {
-                    $row[0] = $row[__('Module name')] = '<span class="tiny mrgn_right_5px">'.$image_status.'</span>'.'<span class="data module_name">'.ui_print_truncate_text($module['module_name'], 30, false).'</span>';
+                    $row[0] = $row[__('Module name')] = '<span class="tiny module-status">'.$image_status.'</span>'.'<span class="data module_name">'.ui_print_truncate_text($module['module_name'], 30, false).'</span>';
                 }
 
                 if ($this->columns['agent']) {
@@ -730,9 +730,9 @@ class Modules
                             $row[7] = $row[__('Data')] = '<span class="nowrap">';
                             $row[7] = $row[__('Data')] .= '<span class="show_collapside invisible">';
                             $row[7] = $row[__('Data')] .= $row[__('Status')].'&nbsp;&nbsp;</span>';
-                            $row[7] = $row[__('Data')] .= '<a data-ajax="false" class="ui-link" ';
+                            $row[7] = $row[__('Data')] .= '<span data-ajax="false" class="ui-link" ';
                             $row[7] = $row[__('Data')] .= 'href="#">';
-                            $row[7] = $row[__('Data')] .= $output.'</a></span>';
+                            $row[7] = $row[__('Data')] .= $output.'</span></span>';
                             // Row 7.
                             $row[7] = $row[__('Data')];
                         } else {
@@ -740,9 +740,9 @@ class Modules
                             $row[7] = $row[__('Data')] = '<span class="nowrap">';
                             $row[7] = $row[__('Data')] .= '<span class="show_collapside invisible">';
                             $row[7] = $row[__('Data')] .= $row[__('Status')].'&nbsp;&nbsp;</span>';
-                            $row[7] = $row[__('Data')] .= '<a data-ajax="false" class="ui-link" ';
+                            $row[7] = $row[__('Data')] .= '<span data-ajax="false" class="ui-link" ';
                             $row[7] = $row[__('Data')] .= 'href="#">';
-                            $row[7] = $row[__('Data')] .= $output.'</a></span>';
+                            $row[7] = $row[__('Data')] .= $output.'</span></span>';
                         }
                     } else {
                         if ($system->getConfig('metaconsole')) {
@@ -813,7 +813,20 @@ class Modules
                 $table->id = 'list_Modules';
                 $table->importFromHash($listModules['modules']);
 
+                $ui->contentAddHtml('<div class="white-card p-lr-0px">');
                 $ui->contentAddHtml($table->getHTML());
+
+                if (!$this->all_modules) {
+                    if ($system->getPageSize() < $listModules['total']) {
+                        $ui->contentAddHtml(
+                            '<br><div id="loading_rows">'.html_print_image('images/spinner.gif', true, false, false, false, false, true).' '.__('Loading...').'</div>'
+                        );
+
+                        $this->addJavascriptAddBottom();
+                    }
+                }
+
+                $ui->contentAddHtml('</div>');
             } else {
                 $table = new Table();
                 $table->id = 'list_agent_Modules';
@@ -824,16 +837,6 @@ class Modules
 
                 return $html;
             }
-
-            if (!$this->all_modules) {
-                if ($system->getPageSize() < $listModules['total']) {
-                    $ui->contentAddHtml(
-                        '<div id="loading_rows">'.html_print_image('images/spinner.gif', true, false, false, false, false, true).' '.__('Loading...').'</div>'
-                    );
-
-                    $this->addJavascriptAddBottom();
-                }
-            }
         }
 
         $ui->contentAddHtml(
@@ -841,19 +844,18 @@ class Modules
             data-transition="pop" class="ui-btn ui-corner-all ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">
             </a>
             
-            <div data-role="popup" id="module-dialog" data-overlay-theme="b" data-dismissible="false" style="max-width:100%; width: 100%;">
-                <div data-role="header" data-theme="a">
-                    <h1 style="margin-left: 10px;"> '.__('Choose option').'</h1>
+            <div data-role="popup" id="module-dialog" data-overlay-theme="b" data-dismissible="false">
+                <div data-role="header" data-theme="a" class="flex align-items-center space-between">
+                    <h1 style="margin-left: 10px;" class="font-10pt"> '.__('Choose option').'</h1>
+                    <a href="#" id="close-dialog-btn" data-role="button" class="ui-corner-all " data-rel="back">X</a>
                 </div>
                 
-                <div role="main" class="ui-content">
-                    <a href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b" data-rel="back">'.__('Cancel').'</a>
-                    
-                    <a id="graph-option" href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b">
+                <div role="main" class="ui-content">                    
+                    <a data-role="button" id="graph-option" href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b">
                         '.__('Graph').'
                     </a>
 
-                    <a id="historical-option" href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b"  data-transition="flow">
+                    <a data-role="button" id="historical-option" href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b">
                         '.__('Historical data').'
                     </a>
                 </div>
diff --git a/pandora_console/mobile/operation/services.php b/pandora_console/mobile/operation/services.php
index 346f7716d3..addd30d76b 100644
--- a/pandora_console/mobile/operation/services.php
+++ b/pandora_console/mobile/operation/services.php
@@ -134,6 +134,12 @@ class Services
         $ui->showFooter(false);
         $ui->beginContent();
 
+        if (empty($this->services)) {
+            $ui->contentAddHtml(
+                '<span class="color-red">'.__('No services found').'</span>'
+            );
+        }
+
         $ui->contentAddHtml('<div class="list_services" data-role="collapsible-set" data-theme="a" data-content-theme="d">');
             $count = 0;
             $url_agent = 'index.php?page=agents&group=%s&status=%s';
@@ -331,7 +337,7 @@ class Services
                         );
 
                         if ($item->exists() !== true) {
-                            $name .= '<strong class="red">'.__('Nonexistent. This element should be deleted').'</strong>';
+                            $name .= '<strong class="color-red">'.__('Nonexistent. This element should be deleted').'</strong>';
                         } else {
                             $url = ui_get_full_url(
                                 'index.php?sec=eventos&sec2=operation/events/events&event_view_hr=8&severity=4&id_agent='.$item->module()->id_agente().'&id_agent_module='.$item->id_agente_modulo()