ux(): tweaks

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"
   }

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>

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

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

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;