From 527da44bd0043b2f6297149421b87fb30f59dbe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juanjo=20Jim=C3=A9nez?= <juanjo@wazuh.com>
Date: Tue, 12 Dec 2017 15:12:39 +0100
Subject: [PATCH] Removed inline CSS from Settings

---
 public/less/loader.js          |  1 +
 public/less/settings.less      | 54 ++++++++++++++++++++++++++++
 public/templates/settings.html | 64 ++++++++++++++++------------------
 3 files changed, 85 insertions(+), 34 deletions(-)
 create mode 100644 public/less/settings.less

diff --git a/public/less/loader.js b/public/less/loader.js
index 06afe426b..002e51aac 100644
--- a/public/less/loader.js
+++ b/public/less/loader.js
@@ -10,4 +10,5 @@ require('plugins/wazuh/less/wazuh-navbar.less');
 require('plugins/wazuh/less/not-used.less');
 require('plugins/wazuh/less/buttons.less');
 require('plugins/wazuh/less/overview.less');
+require('plugins/wazuh/less/settings.less');
 import 'ui/styles/theme.less'
diff --git a/public/less/settings.less b/public/less/settings.less
new file mode 100644
index 000000000..686f443d5
--- /dev/null
+++ b/public/less/settings.less
@@ -0,0 +1,54 @@
+.settings-height-70 {
+    height: 70px;
+}
+
+.settings-padding-right {
+    padding-right: 0px;
+}
+
+.settings-margin-top-30 {
+    margin-top: 30px;
+}
+
+.settings-font-15 {
+    font-size: 15px;
+}
+
+.settings-font-18 {
+    font-size: 18px;
+}
+
+.settings-font-25 {
+    font-size: 25px;
+}
+
+.settings-font-bold {
+    font-weight: bold;
+}
+
+.settings-template-1 {
+    color: #f39c12;
+    font-size: 18px;
+}
+
+.settings-template-2 {
+    margin-left: 7px;
+    font-size: 18px;
+}
+
+.settings-template-3 {
+    font-size: 13px;
+    margin-right: 5px;
+}
+
+.settings-width-500 {
+    width: 500px;
+}
+
+.settings-background-e2 {
+    background-color: #e2e2e2;
+}
+
+.settings-color-f9 {
+    color: #ff9999;
+}
diff --git a/public/templates/settings.html b/public/templates/settings.html
index 5b9b7cf48..a13c687d6 100644
--- a/public/templates/settings.html
+++ b/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">
-		<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>
@@ -47,30 +47,28 @@
 
 	<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="20" style="font-weight: bold;">Manager</p>
-			<p flex="15" style="font-weight: bold;">API URL</p>
-			<p flex="15" style="font-weight: bold;">API Port</p>
-			<p flex="15" style="font-weight: bold;">User</p>
-			<p flex="20" style="font-weight: bold;">Actions</p>
-
-
+			<p flex="15" class="settings-font-bold">Cluster</p>
+			<p flex="20" class="settings-font-bold">Manager</p>
+			<p flex="15" class="settings-font-bold">API URL</p>
+			<p flex="15" class="settings-font-bold">API Port</p>
+			<p flex="15" class="settings-font-bold">User</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._source.active == 'true')" 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="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="removeManager(entry)" tooltip="Remove manager" class="fa fa-trash" aria-hidden="true" style="margin-left: 7px;font-size: 18px;"></i>
-					<i ng-click="checkManager(entry)" tooltip="Check connection" class="fa fa-refresh" aria-hidden="true" style="margin-left: 7px;font-size: 18px;"></i>
+				<p flex="15" ><i ng-show="(entry._source.active == 'true')" 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 settings-font-18" aria-hidden="true"></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 settings-template-2" aria-hidden="true"></i>
 				</p>
 			</span>
 
@@ -78,10 +76,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 settings-font-15"><i class="fa fa-plus-circle" 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/>
@@ -99,10 +97,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>
 
@@ -110,12 +108,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>
@@ -128,7 +126,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>
@@ -141,7 +139,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>
@@ -156,12 +154,12 @@
 
 	<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>
 
-        <md-input-container flex="20" class="md-whiteframe-z1 manager-ruleset-decoders-selector" ng-if="load === false" style="background-color: #e2e2e2;">
+        <md-input-container flex="20" class="md-whiteframe-z1 manager-ruleset-decoders-selector settings-background-e2" ng-if="load === false">
             <md-select ng-model="selectedIndexPattern" ng-change="changeIndexPattern(selectedIndexPattern)" aria-label="Select index pattern">
                 <md-option ng-repeat="indexPattern in indexPatterns.list" value="{{indexPattern.id}}">{{indexPattern.attributes.title}}</md-option>
             </md-select>
@@ -188,9 +186,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>
@@ -206,7 +203,6 @@
 					<p>Revision</p>
 					<p>{{appInfo["revision"]}}</p>
 				</span>
-
 			</md-card-content>
 		</md-card>
 	</md-content>