ux(): minor tweaks

public/app/features/dashboard/timepicker/dropdown.html

@@ -35,15 +35,13 @@
 			<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
 		</div>
 
-
-
 		<label class="small">Refreshing every:</label>
 		<div class="gf-form-inline">
 			<div class="gf-form gf-size-max-xxxl">
 				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
 			</div>
 			<div class="gf-form">
-				<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+				<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
 			</div>
 		</div>
 

public/app/features/datasources/partials/edit.html

@@ -41,7 +41,7 @@
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
 			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
-			<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
+			<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
 				Test Connection
 			</button>
 			<a class="btn btn-link" href="datasources">Cancel</a>

public/app/features/styleguide/styleguide.html

@@ -26,20 +26,14 @@
 		</tab>
 		<tab heading="Buttons">
 
-			<div class="style-guide-button-list p-a-2">
-				<button class="btn btn-primary">btn-primary</button>
-				<button class="btn btn-info">btn-info</button>
-				<button class="btn btn-inverse">btn-inverse</button>
-				<button class="btn btn-success">btn-success</button>
-				<button class="btn btn-warning">btn-warning</button>
-				<button class="btn btn-danger">btn-danger</button>
+			<div ng-repeat="variant in ctrl.buttonVariants" class="row">
+				<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
+					<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
+						btn{{variant}}{{buttonName}} {{btnSize}}
+					</button>
+				</div>
 			</div>
 
-
-			<div class="style-guide-button-list p-a-2">
-				<button class="btn btn-primary btn-small">btn-small</button>
-				<button class="btn btn-success btn-large">btn-large</button>
-			</div>
 		</tab>
 		<tab heading="Forms">
 		</tab>

public/app/features/styleguide/styleguide.ts

@@ -6,6 +6,9 @@ import _ from 'lodash';
 class StyleGuideCtrl {
   colors: any = [];
   theme: string;
+  buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
+  buttonSizes = ['btn-small', '', 'btn-large'];
+  buttonVariants = ['-', '-outline-'];
 
   /** @ngInject **/
   constructor($http) {

public/app/partials/dashboard.html

@@ -100,7 +100,7 @@
 
 		<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
 			<div class="span12" style="text-align:right;">
-				<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-info btn-small">
+				<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
 					<span><i class="fa fa-plus"></i> ADD ROW</span>
 				</span>
 			</div>

public/sass/_variables.dark.scss

@@ -92,8 +92,8 @@ $modal-background: $black;
 $code-tag-bg: #444;
 
 // Lists
-$grafanaListBackground:  	$dark-3;
-$grafanaListAccent:      	lighten($dark-2, 2%);
+$grafanaListBackground:  	  $dark-3;
+$grafanaListAccent:      	  lighten($dark-2, 2%);
 $grafanaListBorderTop:      $dark-3;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
@@ -117,20 +117,20 @@ $table-border:                $dark-3; // table and cell border
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
-$btn-info-bg:                 lighten($purple, 3%);
-$btn-info-bg-hl:     		  darken($purple, 3%);
+$btn-secondary-bg:            $blue-dark;
+$btn-secondary-bg-hl:     		lighten($blue-dark, 3%);
 
-$btn-success-bg-hl:     	  darken($green, 3%);
+$btn-success-bg-hl:     	    darken($green, 3%);
 $btn-success-bg:              lighten($green, 3%);
 
 $btn-warning-bg:              $brand-warning;
-$btn-warning-bg-hl:     	  lighten($brand-warning, 8%);
+$btn-warning-bg-hl:     	    lighten($brand-warning, 8%);
 
 $btn-danger-bg:               lighten($red, 3%);
 $btn-danger-bg-hl:            darken($red, 3%);
 
 $btn-inverse-bg:              $dark-3;
-$btn-inverse-bg-hl:     	  lighten($dark-3, 1%);
+$btn-inverse-bg-hl:     	    lighten($dark-3, 1%);
 $btn-inverse-text-color:      $link-color;
 
 $btn-link-color:              $gray-3;
@@ -226,7 +226,7 @@ $successText:             #468847;
 $successBackground:       $btn-success-bg;
 
 $infoText:                $blue-dark;
-$infoBackground:          $btn-info-bg;
+$infoBackground:          $blue-dark;
 
 // Tooltips and popovers
 // -------------------------

public/sass/_variables.light.scss

@@ -31,7 +31,7 @@ $white:            #fff;
 // Accent colors
 // -------------------------
 $blue:             	   	#2AB2E4;
-$blue-dark:             #75CAEB;
+$blue-dark:             #3CAAD6;
 $green:                 #28B62C;
 $red:                   #FF4136;
 $yellow:                #FF851B;
@@ -125,8 +125,8 @@ $scrollbarBorder:       $gray-4;
 $btn-primary-bg:        $brand-primary;
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
-$btn-info-bg:           lighten($purple, 3%);
-$btn-info-bg-hl:        darken($purple, 3%);
+$btn-secondary-bg:      $blue-dark;
+$btn-secondary-bg-hl:   lighten($blue-dark, 4%);
 
 $btn-success-bg:        lighten($green, 3%);
 $btn-success-bg-hl:     darken($green, 3%);
@@ -250,8 +250,8 @@ $successText:             lighten($green, 10%);
 $successBackground:       $green;
 $successBorder:           transparent;
 
-$infoText:                lighten($purple,10%);
-$infoBackground:          $purple;
+$infoText:                $blue;
+$infoBackground:          $blue-dark;
 $infoBorder:              transparent;
 
 

public/sass/components/_buttons.scss

@@ -65,7 +65,7 @@
 }
 
 .btn-link {
-  color: $btn-link-color;   
+  color: $btn-link-color;
 }
 
 // Set the backgrounds
@@ -86,8 +86,8 @@
   @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
 }
 // Info appears as a neutral blue
-.btn-info {
-  @include buttonBackground($btn-info-bg, $btn-info-bg-hl);
+.btn-secondary {
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
 }
 // Inverse appears as dark gray
 .btn-inverse {
@@ -100,10 +100,10 @@
   @include button-outline-variant($btn-primary-bg);
 }
 .btn-outline-secondary {
-  @include button-outline-variant($btn-inverse-bg);
+  @include button-outline-variant($btn-secondary-bg);
 }
-.btn-outline-info {
-  @include button-outline-variant($btn-info-bg);
+.btn-outline-inverse {
+  @include button-outline-variant($btn-inverse-bg);
 }
 .btn-outline-success {
   @include button-outline-variant($btn-success-bg);

public/sass/layout/_page.scss

@@ -18,6 +18,7 @@
   }
 }
 
+$color-page-hero-bg: #2e2e2e;
 .page-container {
   background-color: $page-bg;
   position: relative;
@@ -26,6 +27,7 @@
   margin-left: 0;
   min-height: calc(100% - 54px);
   padding-bottom: $spacer * 5;
+  background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
 }
 
 .page-header {
@@ -40,7 +42,7 @@
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 2px solid transparent;
 
   h1 {
     font-style: italic;

public/sass/pages/_styleguide.scss

@@ -16,6 +16,7 @@
 .style-guide-button-list {
   padding: $spacer;
   button {
+    display: block;
     margin: 0 $spacer $spacer 0;
   }
 }