Merge pull request #136 from wazuh/3.0-inline-css-2

Re-removed inline CSS from Settings and other files

public/controllers/common/directives.js

@@ -56,14 +56,14 @@ app.directive('dynamic', function($compile) {
             `   <md-nav-item ng-class="{menuSelectedChangeColor: menuNavItem == 'agents' }" md-nav-href="#/agents-preview" name="agents">Agents</md-nav-item>` +
             `   <md-nav-item ng-class="{menuSelectedChangeColor: menuNavItem == 'discover' }" md-nav-href="#/wazuh-discover" name="discover">Discover</md-nav-item>` +
             `   <div class="wazuhMenuNavBar_API" layout="row" ng-show="theresAPI">` +
-            `       <i class="fa fa-star" aria-hidden="true" style="color: #f39c12; font-size: 18px;"></i>` +
+            `       <i class="fa fa-star settings-template-1" aria-hidden="true"></i>` +
             `       <div layout layout-align="center center">{{ currentAPI }}</div>` +
             `       <md-tooltip md-direction="bottom">Selected API</md-tooltip>` +
             `   </div>` +
             `   <div class="wazuhMenuNavBar_API" layout="row" ng-show="!theresAPI">` +
             `       <div layout layout-align="center center">No API selected</div>` +
             `   </div>` +
-            `   <md-nav-item style="color:white !important;" class="wazuhMenuNavBar_gear" md-nav-href="#/settings" name="settings"><i class="fa fa-cog ng-scope" aria-hidden="true" ></i></md-nav-item>` +
+            `   <md-nav-item class="wazuhMenuNavBar_gear directives-color-white" md-nav-href="#/settings" name="settings"><i class="fa fa-cog ng-scope" aria-hidden="true" ></i></md-nav-item>` +
             `</md-nav-bar>`
         };
     });

public/templates/directives/kibana-discover-template.html

@@ -118,7 +118,7 @@
                  vis-data="visData"
                  show-spy-panel="true"
                  search-source="searchSource"
-                 style="height: 200px"
+                 class="kbn-dis-height-200"
                 >
               </visualization>
             </section>

public/templates/discover.html

@@ -118,7 +118,7 @@
                  vis-data="visData"
                  show-spy-panel="true"
                  search-source="searchSource"
-                 style="height: 200px"
+                 class="kbn-dis-height-200"
                 >
               </visualization>
             </section>

public/templates/settings.html

@@ -1,11 +1,11 @@
 <md-content flex ng-controller="settingsController" layout="column">
 
-    <md-content class="wazuhMenuNavBar" ng-init="menuNavItem = 'settings'" style="height: 70px;">
+    <md-content class="wazuhMenuNavBar settings-height-70" ng-init="menuNavItem = 'settings'">
         <menu-top></menu-top>
     </md-content>
 
     <md-content class="headBar" layout="row"  layout-align="center start">
-        <md-nav-bar flex style="padding-right: 0px;" md-selected-nav-item="submenuNavItem" nav-bar-aria-label="navigation submenu">
+        <md-nav-bar flex class="settings-padding-right" md-selected-nav-item="submenuNavItem" nav-bar-aria-label="navigation submenu">
             <md-nav-item md-nav-click="submenuNavItem = 'api'" name="api">API</md-nav-item>
             <md-nav-item md-nav-click="submenuNavItem = 'extensions'" name="extensions">Extensions</md-nav-item>
             <md-nav-item md-nav-click="submenuNavItem = 'pattern'" name="pattern">Pattern</md-nav-item>
@@ -34,7 +34,7 @@
 
     </md-card>
     <md-card layout-padding layout-align="start stretch" ng-if="apiIsDown === 'down'">
-        <h1 class="wazuh-h1"><i class="fa fa-warning ng-scope" aria-hidden="true" style="font-size: 25px;"></i> Wazuh RESTful API seems to be down</h1>
+        <h1 class="wazuh-h1"><i class="fa fa-warning ng-scope settings-font-25" aria-hidden="true"></i> Wazuh RESTful API seems to be down</h1>
         <p>Please, check if Wazuh RESTful API is running with one of the commands bellow:</p>
         <md-list>
             <md-list-item>For Systemd:</md-list-item>
@@ -45,36 +45,34 @@
         <p>If the API is <code>active (running)</code> please check its configuration below.</p>
     </md-card>
     <md-card layout-padding layout-align="start stretch" ng-if="apiEntries.length != 0 && currentDefault === undefined">
-        <h1 class="wazuh-h1"><i class="fa fa-warning ng-scope" aria-hidden="true" style="font-size: 25px;"></i> Please select an API from the list as default</h1>
+        <h1 class="wazuh-h1"><i class="fa fa-warning ng-scope settings-font-25" aria-hidden="true"></i> Please select an API from the list as default</h1>
-        <p>The Wazuh app needs an API connection for it to work. Please click the API's star (<i class="fa fa-star" aria-hidden="true" style="font-size: 18px;"></i>) icon of your choice to select that one.</p>
+        <p>The Wazuh app needs an API connection for it to work. Please click the API's star (<i class="fa fa-star settings-font-18" aria-hidden="true"></i>) icon of your choice to select that one.</p>
     </md-card>
 
     <md-card layout-padding layout-align="start stretch" ng-if="submenuNavItem == 'api'">
 
-        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope" aria-hidden="true" style="font-size: 25px;"></i> Wazuh App: API configuration</h1>
+        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope settings-font-25" aria-hidden="true"></i> Wazuh App: API configuration</h1>
 
         <span layout="row" layout-align="start start">
-            <p flex="15" style="font-weight: bold;">Cluster</p>
+            <p flex="15" class="settings-font-bold">Cluster</p>
-            <p flex="20" style="font-weight: bold;">Manager</p>
+            <p flex="20" class="settings-font-bold">Manager</p>
-            <p flex="15" style="font-weight: bold;">API URL</p>
+            <p flex="15" class="settings-font-bold">API URL</p>
-            <p flex="15" style="font-weight: bold;">API Port</p>
+            <p flex="15" class="settings-font-bold">API Port</p>
-            <p flex="15" style="font-weight: bold;">User</p>
+            <p flex="15" class="settings-font-bold">User</p>
-            <p flex="20" style="font-weight: bold;">Actions</p>
+            <p flex="20" class="settings-font-bold">Actions</p>
-
-
         </span>
 
         <div ng-repeat="entry in apiEntries">
             <span layout="row" layout-align="space-between center">
-                <p flex="15" ><i ng-show="(entry._id === currentDefault)" tooltip="Set as default Manager" class="fa fa-star" aria-hidden="true" style="color: #f39c12; font-size: 18px;"></i> {{entry._source.cluster_info.cluster}}</p>
+                <p flex="15" ><i ng-show="(entry._id === currentDefault)" tooltip="Set as default Manager" class="fa fa-star settings-template-1" aria-hidden="true"></i> {{entry._source.cluster_info.cluster}}</p>
                 <p flex="20" >{{entry._source.cluster_info.manager}}</p>
                 <p flex="15" >{{entry._source.url}}</p>
                 <p flex="15" >{{entry._source.api_port}}</p>
                 <p flex="15" >{{entry._source.api_user}}</p>
                 <p flex="20" >
-                    <i ng-click="setDefault(entry)" tooltip="Set as default Manager" class="fa fa-star" aria-hidden="true" style="font-size: 18px;"></i>
+                    <i ng-click="setDefault(entry)" tooltip="Set as default Manager" class="fa fa-star settings-font-18" aria-hidden="true"></i>
-                    <i ng-click="removeManager(entry)" tooltip="Remove manager" class="fa fa-trash" aria-hidden="true" style="margin-left: 7px;font-size: 18px;"></i>
+                    <i ng-click="removeManager(entry)" tooltip="Remove manager" class="fa fa-trash settings-template-2" aria-hidden="true"></i>
-                    <i ng-click="checkManager(entry)" tooltip="Check connection" class="fa fa-refresh" aria-hidden="true" style="margin-left: 7px;font-size: 18px;"></i>
+                    <i ng-click="checkManager(entry)" tooltip="Check connection" class="fa fa-refresh settings-template-2" aria-hidden="true"></i>
                 </p>
             </span>
 
@@ -82,10 +80,10 @@
         </div>
 
         <div layout="row" layout-align="center center">
-            <md-button flex="15" ng-click="$parent.addManagerContainer = !$parent.addManagerContainer" type="submit" class="buttonBlueLightSettings md-raised md-primary"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size: 15px;"></i> Add new API</md-button>
+            <md-button flex="15" ng-click="$parent.addManagerContainer = !$parent.addManagerContainer" type="submit" class="buttonBlueLightSettings md-raised md-primary"><i class="fa fa-plus-circle settings-font-15" aria-hidden="true"></i> Add new API</md-button>
         </div>
 
-        <form flex ng-submit="processForm()" layout="column" layout-align="start stretch" ng-show="$parent.addManagerContainer || apiEntries.length == 0" style="margin-top: 30px; ">
+        <form flex ng-submit="processForm()" layout="column" layout-align="start stretch" ng-show="$parent.addManagerContainer || apiEntries.length == 0" class="settings-margin-top-30">
           <md-input-container>
             <label>Username</label>
             <input placeholder="" type="text" ng-model="formData.user" aria-label="username" required/>
@@ -103,10 +101,10 @@
             <input placeholder="" ng-model="formData.port" type="text" aria-label="port" required/>
           </md-input-container>
           <div layout="row" layout-align="center center">
-            <p style="color: #ff9999">{{messageError}}</p>
+            <p class="settings-color-f9">{{messageError}}</p>
           </div>
           <div layout="row" layout-align="center center">
-            <md-button flex="15" type="submit" class="buttonBlueLightSettings md-raised md-primary"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size: 13px; margin-right: 5px; "></i>SAVE</md-button>
+            <md-button flex="15" type="submit" class="buttonBlueLightSettings md-raised md-primary"><i class="fa fa-plus-circle settings-template-3" aria-hidden="true"></i>SAVE</md-button>
           </div>
         </form>
 
@@ -114,12 +112,12 @@
 
     <md-card flex layout-padding layout-align="start stretch" ng-if="submenuNavItem == 'extensions'">
 
-        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope" aria-hidden="true" style="font-size: 25px;"></i> Wazuh App: Extensions</h1>
+        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope settings-font-25" aria-hidden="true"></i> Wazuh App: Extensions</h1>
 
         <p flex>Enable or disable extensions according to your needs. The extension includes: Panels and Discover, for Overview / Agents tabs.</p>
 
         <div>
-            <span layout="row" layout-align="space-between center" style="font-weight: bold">
+            <span layout="row" layout-align="space-between center" class="settings-font-bold">
                 PCI DSS
             </span>
             <span>
@@ -132,7 +130,7 @@
         </div>
 
         <div>
-            <span layout="row" layout-align="space-between center" style="font-weight: bold">
+            <span layout="row" layout-align="space-between center" class="settings-font-bold">
                 OpenSCAP
             </span>
             <span>
@@ -145,7 +143,7 @@
         </div>
 
         <div>
-            <span layout="row" layout-align="space-between center" style="font-weight: bold">
+            <span layout="row" layout-align="space-between center" class="settings-font-bold">
                 Audit
             </span>
             <span>
@@ -160,7 +158,7 @@
 
     <md-card flex layout-padding layout-align="start stretch" ng-if="submenuNavItem == 'pattern'">
 
-        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope" aria-hidden="true" style="font-size: 25px;"></i> Wazuh App: Index pattern selection</h1>
+        <h1 class="wazuh-h1"><i class="fa fa-cog ng-scope settings-font-25" aria-hidden="true"></i> Wazuh App: Index pattern selection</h1>
 
         <p flex>Select the index pattern to run search and analytics against:</p>
         <p flex><strong>Beware: the new index-pattern structure must be compatible with Wazuh alerts, otherwise the visualizations will load erroneous data, or no data at all.</strong></p>
@@ -192,9 +190,8 @@
             </md-card-content>
         </md-card>
 
-
         <md-card layout-align="start stretch">
-            <md-card-content style="width: 500px;">
+            <md-card-content class="settings-width-500">
                 <h1 class="wazuh-h1">Version</h1>
                 <span layout="row" layout-align="space-between center">
                     <p>App version</p>