From bd0357b637b7b95d6e7818bf6cdde293048887a3 Mon Sep 17 00:00:00 2001
From: Trent White <trent@wearecapacity.com>
Date: Fri, 19 Feb 2016 17:34:09 -0500
Subject: [PATCH 1/3] added angular gradient to page and login. Tweaked header
 underline to not be so heavy. Tweaked stacked logo on login. Created an
 alternative to avatar when there's no connection to gravatar - could use
 work, but I think you get the idea.

---
 public/app/core/components/sidemenu/sidemenu.html |  3 ++-
 public/app/partials/login.html                    |  2 +-
 public/sass/_variables.dark.scss                  |  2 ++
 public/sass/_variables.light.scss                 |  6 ++++--
 public/sass/components/_dashboard.scss            |  2 +-
 public/sass/components/_sidemenu.scss             |  9 +++++++++
 public/sass/layout/_page.scss                     |  7 +++++--
 public/sass/pages/_login.scss                     | 15 +++++++++++++--
 8 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index f4221367fdf..66ee0b6d8b9 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -3,7 +3,8 @@
 	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
 		<div class="sidemenu-org">
 			<div class="sidemenu-org-avatar">
-				<img ng-src="{{ctrl.user.gravatarUrl}}">
+				<img ng-if="ctrl.user.gravatarURL" ng-src="{{ctrl.user.gravatarUrl}}">
+				<span class="no-avatar h2" ng-if!="ctrl.user.gravatarURL">?</span>
 			</div>
 			<div class="sidemenu-org-details">
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 6f437a02824..b7aa340bfed 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="login-container container">
 
 	<div class="login-box">
 
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index f94cab08b43..4ed292e66e5 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -50,6 +50,7 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  			   rgb(20,20,20);
 $page-bg:  			   $dark-2;
+$page-img-bg: 		   url('../img/angle_gradient_rev.png');
 $body-color:   		   $gray-4;
 $text-color:   	       $gray-4;
 
@@ -74,6 +75,7 @@ $hr-border-color: rgba(0,0,0,.1) !default;
 $component-active-color: #fff !default;
 $component-active-bg:    $brand-primary !default;
 
+
 // Panel
 // -------------------------
 $panel-bg: 				 $dark-2;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index e2c8fb06c8a..74d1305bcba 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -54,8 +54,9 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		  $white;
-$page-bg:  		  $white;
+$body-bg:  		$white;
+$page-bg:  		$white;
+$page-img-bg: 	url('../img/angle_gradient_light_rev.png');
 $body-color:    $gray-1;
 $text-color:    $gray-1;
 
@@ -80,6 +81,7 @@ $hr-border-color: $dark-3 !default;
 $component-active-color: $white !default;
 $component-active-bg:    $brand-primary !default;
 
+
 // Panel
 // -------------------------
 
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss
index 9b23484bdb4..59b38a6512e 100644
--- a/public/sass/components/_dashboard.scss
+++ b/public/sass/components/_dashboard.scss
@@ -281,7 +281,7 @@ div.flot-text {
     border-top: 0;
     border-right: 0;
     border-left: 0;
-    border-bottom: 2px solid transparent;
+    border-bottom: 1px solid transparent;
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 8063bbaa2c9..829ee37f71a 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -189,6 +189,15 @@
 
 .sidemenu-org-avatar {
   width: 44px;
+  background-color: $gray-2;
+  border-radius: 50%;
+  .no-avatar {
+    color: $brand-primary;
+    text-shadow: 0 1px 0 $dark-1;
+    padding-left: 17px;
+    position: relative;
+    top:  5px;
+  }
 }
 
 .sidemenu-org-avatar > img {
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 48c4e33b5df..84f48f6b1e7 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -20,6 +20,10 @@
 
 .page-container {
   background-color: $page-bg;
+  background-image: $page-img-bg; /* this is an experiment */
+  background-position: left;
+  background-size: 60%;
+  background-repeat: no-repeat;
   position: relative;
   padding: ($spacer * 2) ($spacer * 4);
   max-width: 1060px;
@@ -30,7 +34,6 @@
 
 .page-header {
   padding: $spacer 0 $spacer/2 0;
-
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
@@ -40,7 +43,7 @@
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 1px solid transparent;
 
   h1 {
     font-style: italic;
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 3f3bb020263..a624408c7b1 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,3 +1,13 @@
+.login-container {
+  background-image: $page-img-bg; /* this is an experiment */
+  background-position: left;
+  background-size: 60%;
+  background-repeat: no-repeat;
+  min-width: 100%;
+  margin-left: 0;
+  margin-top: -26px; /* BAD HACK - experiement to see how it looks */
+  padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
+}
 
 .login-form {
   display: inline-block;
@@ -6,11 +16,12 @@
 
 .login-box {
   max-width: 700px;
-  margin: $spacer * 2 auto 0 auto;
+  margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
 }
 
 .login-box-logo {
   text-align: center;
+  margin-bottom: $spacer * 2;
   img {
     width: 6rem;
   }
@@ -173,7 +184,7 @@
       width: 125px;
     }
     .icon-gf-grafana_wordmark {
-      top: -90px;
+      top: -5px;
       font-size: 3rem;
     }
   }

From 18bbefee1c3362891ef92fcddf3e18679a0d9c87 Mon Sep 17 00:00:00 2001
From: Trent White <trent@wearecapacity.com>
Date: Fri, 19 Feb 2016 17:39:18 -0500
Subject: [PATCH 2/3] saw how checkbox images were called in css variables, so
 updated pageImgURL variable.

---
 public/sass/_variables.dark.scss  | 2 +-
 public/sass/_variables.light.scss | 2 +-
 public/sass/layout/_page.scss     | 2 +-
 public/sass/pages/_login.scss     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 4ed292e66e5..d0721d889ae 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -50,7 +50,7 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  			   rgb(20,20,20);
 $page-bg:  			   $dark-2;
-$page-img-bg: 		   url('../img/angle_gradient_rev.png');
+$pageImageUrl: 		   '../img/angle_gradient_rev.png';
 $body-color:   		   $gray-4;
 $text-color:   	       $gray-4;
 
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 74d1305bcba..157f5fcd3e7 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -56,7 +56,7 @@ $critical:              #EC2128;
 
 $body-bg:  		$white;
 $page-bg:  		$white;
-$page-img-bg: 	url('../img/angle_gradient_light_rev.png');
+$pageImageUrl: 	'../img/angle_gradient_light_rev.png';
 $body-color:    $gray-1;
 $text-color:    $gray-1;
 
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 84f48f6b1e7..ec793403ee9 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -20,7 +20,7 @@
 
 .page-container {
   background-color: $page-bg;
-  background-image: $page-img-bg; /* this is an experiment */
+  background-image: url($pageImageUrl); /* this is an experiment */
   background-position: left;
   background-size: 60%;
   background-repeat: no-repeat;
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index a624408c7b1..494b2273bc1 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,5 +1,5 @@
 .login-container {
-  background-image: $page-img-bg; /* this is an experiment */
+  background-image: url($pageImageUrl); /* this is an experiment */
   background-position: left;
   background-size: 60%;
   background-repeat: no-repeat;

From 6721cec73fbc85313c134faa1c0c014066987cbb Mon Sep 17 00:00:00 2001
From: Trent White <trent@wearecapacity.com>
Date: Fri, 19 Feb 2016 18:22:24 -0500
Subject: [PATCH 3/3] created secondary button style, added a couple of
 variables, played with the plugins page to get the underline in place. Worth
 a look, but check that I was building everything properly :)

---
 public/app/features/apps/partials/list.html       | 15 +++++++--------
 public/app/features/apps/partials/page.html       | 13 ++++++-------
 .../app/features/datasources/partials/list.html   |  4 ++--
 public/sass/_variables.dark.scss                  |  3 +++
 public/sass/_variables.light.scss                 |  3 +++
 public/sass/base/_fonts.scss                      |  8 ++++++++
 public/sass/components/_buttons.scss              |  3 +++
 public/sass/components/_sidemenu.scss             |  2 +-
 8 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/public/app/features/apps/partials/list.html b/public/app/features/apps/partials/list.html
index 98305ff7696..bab4ca5c687 100644
--- a/public/app/features/apps/partials/list.html
+++ b/public/app/features/apps/partials/list.html
@@ -2,14 +2,14 @@
 </navbar>
 
 <div class="page-container">
-  <div class="page-wide">
+  <div class="page-header">
     <h1>Plugins</h1>
+    </div>
+	<div ng-if="!ctrl.apps">
+		<em>No apps defined</em>
+	</div>
 
-		<div ng-if="!ctrl.apps">
-			<em>No apps defined</em>
-		</div>
-
-		<ul class="filter-list">
+	<ul class="filter-list">
       <li ng-repeat="app in ctrl.apps">
         <ul class="filter-list-card">
 					<li class="filter-list-card-image">
@@ -43,6 +43,5 @@
           </li>
         </ul>
       </li>
-		</ul>
-	</div>
+	</ul>
 </div>
diff --git a/public/app/features/apps/partials/page.html b/public/app/features/apps/partials/page.html
index 0b3f983124d..c65053b47fe 100644
--- a/public/app/features/apps/partials/page.html
+++ b/public/app/features/apps/partials/page.html
@@ -1,14 +1,13 @@
-<navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
+<navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
+	<div class="page-header">
 		<h1>{{ctrl.page.name}}</h1>
+	</div>
 
-		<div ng-if="ctrl.page">
-			<plugin-component type="app-page">
-			</plugin-component>
-		</div>
-
+	<div ng-if="ctrl.page">
+		<plugin-component type="app-page">
+		</plugin-component>
 	</div>
 </div>
diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html
index e66df175435..0a2e2673bbd 100644
--- a/public/app/features/datasources/partials/list.html
+++ b/public/app/features/datasources/partials/list.html
@@ -33,7 +33,7 @@
 				<tr ng-repeat="ds in ctrl.datasources">
 					<td>
 						<a href="datasources/edit/{{ds.id}}">
-							<i class="fa fa-database"></i> &nbsp; {{ds.name}}
+							<i class="icon-gf inline-icon-gf icon-gf-datasources"></i> &nbsp; {{ds.name}}
 						</a>
 					</td>
 					<td>
@@ -41,7 +41,7 @@
 					</td>
 					<td class="text-center">
 						<span ng-if="ds.isDefault">
-							<span class="label label-info">default</span>
+							<span class="btn btn-secondary btn-mini">default</span>
 						</span>
 					</td>
 					<td class="text-right">
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index d0721d889ae..c125cb9636e 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -119,6 +119,9 @@ $table-border:                $dark-3; // table and cell border
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
+$btn-secondary-bg:            $blue-dark;
+$btn-secondary-bg-hl:         lighten($blue-dark, 8%);
+
 $btn-info-bg:                 lighten($purple, 3%);
 $btn-info-bg-hl:     		  darken($purple, 3%);
 
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 157f5fcd3e7..87360341449 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -127,6 +127,9 @@ $scrollbarBorder:       $gray-4;
 $btn-primary-bg:        $brand-primary;
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
+$btn-secondary-bg:      $blue-dark;
+$btn-secondary-bg-hl:   lighten($blue-dark, 8%);
+
 $btn-info-bg:           lighten($purple, 3%);
 $btn-info-bg-hl:        darken($purple, 3%);
 
diff --git a/public/sass/base/_fonts.scss b/public/sass/base/_fonts.scss
index 61ff672465b..f43721afb3a 100644
--- a/public/sass/base/_fonts.scss
+++ b/public/sass/base/_fonts.scss
@@ -24,6 +24,14 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.inline-icon-gf {
+    vertical-align: middle;
+}
+
+
+
+
+
 .icon-gf-raintank_wordmark:before {
     content: "\e600";
 }
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 4f71e2075bb..0fc6dae6cca 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -73,6 +73,9 @@
 .btn-primary {
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
+.btn-secondary {
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+}
 // Warning appears are orange
 .btn-warning {
   @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 829ee37f71a..bf48f05a2e4 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -192,7 +192,7 @@
   background-color: $gray-2;
   border-radius: 50%;
   .no-avatar {
-    color: $brand-primary;
+    color: $text-color;
     text-shadow: 0 1px 0 $dark-1;
     padding-left: 17px;
     position: relative;