From c97f14fbd381be85ced2b336022462f1bfae95b9 Mon Sep 17 00:00:00 2001
From: Adri Valle <adri9valle@gmail.com>
Date: Wed, 16 Jan 2019 11:18:47 +0100
Subject: [PATCH] Fix wazuh logo on low resolution

---
 .../appserver/static/css/styles/common.css    | 52 +++++++++++++++++--
 .../static/js/directives/wz-menu/wz-menu.html |  2 +-
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/SplunkAppForWazuh/appserver/static/css/styles/common.css b/SplunkAppForWazuh/appserver/static/css/styles/common.css
index 810cdd1c2..b734aaab5 100644
--- a/SplunkAppForWazuh/appserver/static/css/styles/common.css
+++ b/SplunkAppForWazuh/appserver/static/css/styles/common.css
@@ -544,10 +544,54 @@ kbn-vis .vis-container {
   height: auto;
 }
 
-/* Class for define Wazuh logo width */
-.wz-logo-container {
-  width: 150px;
-  max-width: 150px;
+@supports not (-moz-appearance:none) {
+  @media (min-width: 1060px) {      
+      .wz-logo{        
+          content: url("../images/wazuh/png/wazuh_white_full.png");
+      } 
+      .wz-logo-container {
+          width: 150px;
+          max-width: 150px;
+      }
+  }
+  @media (max-width: 1059px) {    
+      .wz-logo{         
+         content: url("../images/wazuh/png/wazuh_white_iso.png");
+         max-height: 45px;
+         max-width: 28px;
+     } 
+     .wz-logo-container {
+          min-width: 20px!important;
+          max-width: 30px!important;
+          margin-right: 5px!important;
+      }
+  }
+}
+
+@supports (-moz-appearance:none) {
+  @media (min-width: 1060px) {      
+      .wz-logo::after{        
+          content: url("../images/wazuh/png/wazuh_white_full.png");
+          display: flex;
+      } 
+      .wz-logo-container {
+          width: 185px;
+          max-width: 185px;
+      }
+  }
+  @media (max-width: 1059px) {    
+      .wz-logo::after{         
+          content: url("../images/wazuh/png/wazuh_white_iso.png") ;
+          display: flex;
+          max-height: 45px;
+          max-width: 28px;
+      } 
+      .wz-logo-container {
+              min-width: 20px;
+              max-width: 30px;
+              margin-right: 5px;
+          }
+      }
 }
 
 /* Unclassified but important Wazuh app component styles */
diff --git a/SplunkAppForWazuh/appserver/static/js/directives/wz-menu/wz-menu.html b/SplunkAppForWazuh/appserver/static/js/directives/wz-menu/wz-menu.html
index ec5539181..5e0142d75 100644
--- a/SplunkAppForWazuh/appserver/static/js/directives/wz-menu/wz-menu.html
+++ b/SplunkAppForWazuh/appserver/static/js/directives/wz-menu/wz-menu.html
@@ -5,7 +5,7 @@
   
       <!-- Wazuh app logo -->
       <a class="cursor-pointer wz-logo-container wz-margin-right-15" ui-sref="overview">
-        <img class="wz-responsive-img" aria-hidden="true" src='{{logoUrl}}'>
+        <img class="wz-responsive-img wz-logo" aria-hidden="true">
       </a>
   
       <!-- Main Wazuh app navigation buttons -->