From 363f36dfae7cd29bd35dfe760fc6014d0b1463c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 21 Feb 2016 15:21:01 +0100
Subject: [PATCH] ux(): tweaks

---
 package.json                                  |  2 +
 .../cloudwatch/partials/config.html           | 58 ++++++-------------
 public/sass/_variables.light.scss             |  8 +--
 public/sass/base/_reboot.scss                 |  2 -
 public/sass/components/_timepicker.scss       |  2 +-
 5 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 530a3ea95f2..0df426954d3 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
     "lodash": "^2.4.1",
     "sinon": "1.16.1",
     "systemjs-builder": "^0.15.7",
+    "tether": "^1.2.0",
+    "tether-drop": "^1.4.2",
     "tslint": "^3.4.0",
     "typescript": "^1.7.5"
   }
diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html
index 69ec729a160..5f999c58a42 100644
--- a/public/app/plugins/datasource/cloudwatch/partials/config.html
+++ b/public/app/plugins/datasource/cloudwatch/partials/config.html
@@ -1,44 +1,22 @@
-<br>
-<h5>CloudWatch details</h5>
+<h3 class="page-heading">CloudWatch details</h3>
 
-<div class="editor-row">
-	<div class="section tight-form-container" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 200px">
-					Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
-				</li>
-				<li>
-					<input type="text" class="tight-form-input input-large last" ng-model='ctrl.current.database' placeholder="default"></input>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 200px">
-					Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip>
-				</li>
-        <!--
-          Whenever this list is updated, backend list should also be updated.
-          Please update the region list in pkg/api/cloudwatch/metric.go
-				-->
-        <li>
-          <select class="tight-form-input input-large last" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 200px">
-					Custom Metrics namespace<tip>Namespaces of Custom Metrics</tip>
-				</li>
-				<li>
-					<input type="text" class="tight-form-input input-large last" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+<div class="gf-form-group">
+	<div class="gf-form">
+		<label class="gf-form-label width-14">
+			Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
+		</label>
+		<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.database' placeholder="default"></input>
+	</div>
+	<div class="gf-form">
+		<label class="gf-form-label width-14">
+			Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip>
+		</label>
+		<div class="gf-form-select-wrapper">
+			<select class="gf-form-input max-width-15" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
 		</div>
 	</div>
+	<div class="gf-form">
+		<label class="gf-form-label width-14">Custom Metrics namespace<tip>Namespaces of Custom Metrics</tip></label>
+		<input type="text" class="gf-form-input max-width-15" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
+	</div>
 </div>
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index e1dda86d4f9..0b753411b32 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -177,11 +177,11 @@ $dropdownDivider:               $dropdownDividerTop;
 $dropdownTitle:                 $dark-5;
 
 $dropdownLinkColor:             $dark-3;
-$dropdownLinkColorHover:        $white;
-$dropdownLinkColorActive:       $white;
+$dropdownLinkColorHover:        $link-color;
+$dropdownLinkColorActive:       $link-color;
 
-$dropdownLinkBackgroundActive:  $blue;
-$dropdownLinkBackgroundHover:   $blue;
+$dropdownLinkBackgroundActive:  $gray-6;
+$dropdownLinkBackgroundHover:   $gray-6;
 
 
 // COMPONENT VARIABLES
diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss
index 646a92d549e..e1590769636 100644
--- a/public/sass/base/_reboot.scss
+++ b/public/sass/base/_reboot.scss
@@ -270,11 +270,9 @@ th {
 //
 // Forms
 //
-
 label {
   // Allow labels to use `margin` for spacing.
   display: inline-block;
-  margin-bottom: .5rem;
 }
 
 // Work around a Firefox/IE bug where the transparent `button` background
diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index 0a055bb35f2..776c69a6fac 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -13,7 +13,7 @@
 }
 
 .gf-timepicker-dropdown {
-  margin: -5px -10px 10px 5px;
+  margin: -8px -10px 10px 5px;
   padding: 10px 20px;
   float: right;
   background-color: $panel-bg;