ux: new page header look wip

public/app/features/plugins/partials/ds_edit.html

-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header container">
+  <div class="page-header-inner">
+    <div class="page-breadcrumb">
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Configuration <i class="fa fa-caret-down"></i>
+        </a>
+      </div>
+      <!-- <div class="page&#45;breadcrumb__item">/</div> -->
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Data sources
+        </a>
+      </div>
+    </div>
 
 
-<div class="page-container">
+    <h1>
+      <i class="icon-gf icon-gf-datasources"></i>
+      <span ng-show="ctrl.isNew">Add data source</span>
+      <span ng-hide="ctrl.isNew">Settings</span>
+    </h1>
 
 
-  <div class="page-header">
-		<h1 ng-show="ctrl.isNew">Add data source</h1>
-		<h1 ng-hide="ctrl.isNew">Edit data source</h1>
+    <a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
+      <i class="fa fa-plus"></i>
+      Add data source
+    </a>
 
 
     <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
     <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
       <ul class="gf-tabs">
       <ul class="gf-tabs">
@@ -21,6 +40,9 @@
       </ul>
       </ul>
     </div>
     </div>
   </div>
   </div>
+</div>
+
+<div class="page-container">
 
 
   <div ng-if="ctrl.tabIndex === 0" class="tab-content">
   <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
 

public/app/features/plugins/partials/ds_list.html

-<div class="page-container">
-	<div class="page-header">
-		<h1>Data Sources</h1>
-		<a class="btn btn-success" href="datasources/new">
+<div class="page-header container">
+  <div class="page-header-inner">
+    <div class="page-breadcrumb">
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Configuration <i class="fa fa-caret-down"></i>
+        </a>
+      </div>
+    </div>
+
+    <h1>
+      <i class="icon-gf icon-gf-datasources"></i>
+      <span>Data Sources</span>
+    </h1>
+
+    <a class="page-header__cta btn btn-success" href="datasources/new">
       <i class="fa fa-plus"></i>
       <i class="fa fa-plus"></i>
       Add data source
       Add data source
     </a>
     </a>
+
   </div>
   </div>
+</div>
+
 
 
+<div class="page-container container">
   <section class="card-section" layout-mode>
   <section class="card-section" layout-mode>
     <layout-selector></layout-selector>
     <layout-selector></layout-selector>
 
 

public/sass/_variables.dark.scss

@@ -48,7 +48,7 @@ $critical:              #ed2e18;
 
 
 // Scaffolding
 // Scaffolding
 // -------------------------
 // -------------------------
-$body-bg:  			   	    rgb(20,20,20);
+$body-bg:  			   	    rgb(24,20,20);
 $page-bg:  			   	    $dark-2;
 $page-bg:  			   	    $dark-2;
 $body-color:   		 	    $gray-4;
 $body-color:   		 	    $gray-4;
 $text-color:   	   		  $gray-4;
 $text-color:   	   		  $gray-4;

public/sass/layout/_page.scss

@@ -7,15 +7,20 @@
 
 
 .main-view {
 .main-view {
   flex-grow: 1;
   flex-grow: 1;
+  background: linear-gradient(180deg,#282020 0,#1e0f05);
 }
 }
 
 
 .page-container {
 .page-container {
   @extend .container;
   @extend .container;
-  background-color: $page-bg;
-  padding: ($spacer * 2) ($spacer * 4);
+
+  padding: $spacer;
   min-height: calc(100% - 54px);
   min-height: calc(100% - 54px);
   padding-bottom: $spacer * 5;
   padding-bottom: $spacer * 5;
-  background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
+}
+
+.page-header-inner {
+  @include brand-bottom-border();
+  @include clearfix();
 }
 }
 
 
 .page-body {
 .page-body {
@@ -38,21 +43,20 @@
 }
 }
 
 
 .page-header {
 .page-header {
-  padding: $spacer 0 0 0;
-  margin-bottom: 2rem;
-  @include brand-bottom-border();
-  @include clearfix();
+  padding: 2rem 0 1rem 0;
 
 
   h1 {
   h1 {
+    font-size: $font-size-h2;
     flex-grow: 1;
     flex-grow: 1;
     display: inline-block;
     display: inline-block;
     margin-bottom: $spacer*1.5;
     margin-bottom: $spacer*1.5;
   }
   }
 
 
-  button, a {
+}
+
+.page-header__cta {
   float: right;
   float: right;
   margin-left: $spacer;
   margin-left: $spacer;
-  }
 }
 }
 
 
 .page-heading {
 .page-heading {
@@ -90,3 +94,16 @@
 .page-sidebar-section {
 .page-sidebar-section {
   margin-bottom: $spacer*2;
   margin-bottom: $spacer*2;
 }
 }
+
+.page-breadcrumb {
+  display: flex;
+  margin-bottom: $spacer;
+}
+
+.page-breadcrumb__item {
+  a {
+    color: $text-color-weak;
+  }
+  padding-right: $spacer;
+}
+