ux: updating header design for pages

pkg/api/index.go

@@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
 		alertChildNavs := []*dtos.NavLink{
-			{Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
-			{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
+			{Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
+			{Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"},
 		}
 
 		data.NavTree = append(data.NavTree, &dtos.NavLink{

public/app/core/components/navbar/navbar.ts

@@ -40,9 +40,9 @@ export function pageH1() {
     restrict: 'E',
     template: `
     <h1 class="page-header__title">
-      <i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
-      <img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
-      {{model.node.text}}
+      <i class="page-header__icon {{::model.header.icon}}" ng-if="::model.header.icon"></i>
+      <img class="page-header__img" ng-src="{{::model.header.img}}" ng-if="::model.header.img"></i>
+      {{model.header.text}}
     </h1>
     `,
     scope: {

public/app/core/nav_model_srv.ts

@@ -5,15 +5,24 @@ import config from 'app/core/config';
 import _ from 'lodash';
 
 export interface NavModelItem {
-  title: string;
+  text: string;
   url: string;
   icon?: string;
-  iconUrl?: string;
+  img?: string;
 }
 
-export interface NavModel {
-  section: NavModelItem;
-  menu: NavModelItem[];
+export class NavModel {
+  breadcrumbs: NavModelItem[];
+  header: NavModelItem;
+  node: NavModelItem;
+
+  constructor() {
+    this.breadcrumbs = [];
+  }
+
+  setPageHeaderIndex(index: number) {
+    this.header = this.breadcrumbs[index];
+  }
 }
 
 export class NavModelSrv {
@@ -31,12 +40,13 @@ export class NavModelSrv {
 
   getNav(...args) {
     var children = this.navItems;
-    var nav = {breadcrumbs: [], node: null};
+    var nav = new NavModel();
 
     for (let id of args) {
       let node = _.find(children, {id: id});
       nav.breadcrumbs.push(node);
       nav.node = node;
+      nav.header = node;
       children = node.children;
     }
 

public/app/features/admin/partials/configuration_home.html

@@ -1,9 +1,14 @@
-<navbar model="ctrl.navModel"></navbar>
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
-	</div>
+<div class="page-header-canvas">
+	<div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
 
+    <div class="page-header">
+      <page-h1 model="ctrl.navModel"></page-h1>
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
 	<section class="card-section card-list-layout-grid">
 		<ol class="card-list">
 			<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
@@ -29,4 +34,4 @@
 			</li>
 		</ol>
 	</section>
-</div>
+</div>

public/app/features/alerting/alert_list_ctrl.ts

@@ -23,7 +23,8 @@ export class AlertListCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, private $location, navModelSrv) {
-    this.navModel = navModelSrv.getNav('alerting');
+    this.navModel = navModelSrv.getNav('alerting', 'alert-list');
+    this.navModel.setPageHeaderIndex(0);
 
     var params = $location.search();
     this.filters.state = params.state || null;

public/app/features/alerting/notifications_list_ctrl.ts

@@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl {
   constructor(private backendSrv, navModelSrv) {
     this.loadNotifications();
     this.navModel = navModelSrv.getNav('alerting', 'channels');
+    this.navModel.setPageHeaderIndex(0);
   }
 
   loadNotifications() {

public/app/features/alerting/partials/alert_list.html

@@ -1,29 +1,52 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" >
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" >
-	<div class="page-header">
-    <page-h1 model="ctrl.navModel"></page-h1>
+    <div class="page-header">
+      <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
 
-    <a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
-			<i class="fa fa-info-circle"></i>
-			How to add an alert
-		</a>
-    <a class="btn btn-inverse" href="alerting/notifications" >
-			<i class="fa fa-bell"></i>
-			Notification channels
-		</a>
-	</div>
+      <ul class="gf-tabs">
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link active" href="alerting">
+            <i class="fa fa-fw fa-list-ul"></i>
+            Alert Rules
+          </a>
+        </li>
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link" href="alerting/notifications">
+            <i class="gicon gicon-alert-notification-channel"></i>
+            Notification channels
+          </a>
+        </li>
+      </ul>
 
-  <div class="gf-form-group">
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label">Filter by state</label>
-        <div class="gf-form-select-wrapper width-13">
-          <select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
-          </select>
-        </div>
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
+
+  <div class="page-action-bar">
+    <div class="gf-form">
+      <label class="gf-form-label">Filter by state</label>
+      <div class="gf-form-select-wrapper width-13">
+        <select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
+        </select>
       </div>
     </div>
+
+    <div class="page-action-bar__spacer">
+    </div>
+
+    <a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
+      <i class="fa fa-info-circle"></i>
+      How to add an alert
+    </a>
+
+    <!-- <a class="btn btn&#45;inverse" href="alerting/notifications" > -->
+    <!--   <i class="fa fa&#45;bell"></i> -->
+    <!--   Notification channels -->
+    <!-- </a> -->
   </div>
 
   <section class="card-section card-list-layout-list">

public/app/features/alerting/partials/notifications_list.html

@@ -1,10 +1,35 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" >
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" >
-	<div class="page-header">
-    <page-h1 model="ctrl.navModel"></page-h1>
+    <div class="page-header">
+      <page-h1 model="ctrl.navModel" class="page-header__heading"></page-h1>
 
-    <a href="alerting/notification/new" class="btn btn-success pull-right">
+      <ul class="gf-tabs">
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link" href="alerting">
+            <i class="fa fa-fw fa-list-ul"></i>
+            Alert Rules
+          </a>
+        </li>
+        <li class="gf-tabs-item">
+          <a class="gf-tabs-link active" href="alerting/notifications">
+            <i class="gicon gicon-alert-notification-channel"></i>
+            Notification channels
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
+	<div class="page-action-bar">
+    <div class="page-action-bar__spacer">
+    </div>
+
+    <a href="alerting/notification/new" class="btn btn-success">
+      <i class="fa fa-plus"></i>
       New Channel
     </a>
   </div>

public/app/features/org/partials/profile.html

@@ -1,10 +1,14 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
-	</div>
+    <div class="page-header">
+      <page-h1 model="ctrl.navModel"></page-h1>
+    </div>
+  </div>
+</div>
 
+<div class="page-container page-body">
 	<form name="ctrl.userForm" class="gf-form-group">
 		<h3 class="page-heading">Information</h3>
 

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

@@ -3,9 +3,7 @@
 		<navbar model="ctrl.navModel"></navbar>
 
 		<div class="page-header">
-			<page-h1 model="ctrl.navModel"></page-h1>
-
-			<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
+      <page-h1 model="ctrl.navModel"></page-h1>
 
 			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
 				<ul class="gf-tabs">
@@ -28,6 +26,13 @@
 </div>
 
 <div class="page-container page-body">
+
+  <div class="page-action-bar">
+    <div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">
+      Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+    </div>
+  </div>
+
 	<div ng-if="ctrl.tabIndex === 0">
 		<form name="ctrl.editForm" ng-if="ctrl.current">
 			<div class="gf-form-group">

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

@@ -1,16 +1,25 @@
-<navbar model="ctrl.navModel"></navbar>
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
+<div class="page-header-canvas">
+	<div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
 
-		<a class="page-header__cta btn btn-success" href="datasources/new">
-			Add data source
-		</a>
+    <div class="page-header">
+		  <page-h1 model="ctrl.navModel"></page-h1>
+
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
+  <div class="page-action-bar">
+    <div class="page-action-bar__spacer"></div>
+    <a class="page-header__cta btn btn-success" href="datasources/new">
+      <i class="fa fa-plus"></i>
+      Add data source
+    </a>
 	</div>
 
 	<section class="card-section" layout-mode>
 		<layout-selector></layout-selector>
-
 		<ol class="card-list">
 			<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
 				<a class="card-item" href="datasources/edit/{{ds.id}}/">
@@ -43,4 +52,4 @@
 	<div ng-if="ctrl.datasources.length === 0">
 		<em>No data sources defined</em>
 	</div>
-</div>
+</div>

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

@@ -1,93 +1,94 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header-canvas">
+  <div class="page-container" ng-init="ctrl.init()">
+    <navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container" ng-init="ctrl.init()">
-  <div class="page-header">
-    <div class="plugin-header">
-      <span class="plugin-header-logo">
-        <img ng-src="{{ctrl.model.info.logos.large}}">
-      </span>
+    <div class="page-header">
+      <div class="plugin-header">
+        <span class="plugin-header-logo">
+          <img ng-src="{{ctrl.model.info.logos.large}}">
+        </span>
 
-      <div class="plugin-header-info-block">
-        <h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
-        <div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
-        <div class="plugin-header-stamps">
-          <span class="plugin-header-stamps-type">
-            <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
-          </span>
+        <div class="plugin-header-info-block">
+          <h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
+          <div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
+          <div class="plugin-header-stamps">
+            <span class="plugin-header-stamps-type">
+              <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-
-    <ul class="gf-tabs">
-      <li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
-        <a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
-          {{::tab}}
-        </a>
-      </li>
-    </ul>
 
+      <ul class="gf-tabs">
+        <li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
+          <a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
+            {{::tab}}
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
+</div>
 
-  <div class="page-body page-body--with-sidebar">
-    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
-      </div>
+<div class="page-container page-body page-body--with-sidebar">
+  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
+    <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
     </div>
+  </div>
 
-    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
-      <div ng-if="ctrl.model.id">
-        <plugin-component type="app-config-ctrl"></plugin-component>
+  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
+    <div ng-if="ctrl.model.id">
+      <plugin-component type="app-config-ctrl"></plugin-component>
 
-	      <div class="gf-form-button-row">
-					<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
-					<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
-					<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
-				</div>
+      <div class="gf-form-button-row">
+        <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
+        <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
+        <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
       </div>
     </div>
+  </div>
 
-    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
-			<dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
-    </div>
-
-    <aside class="page-sidebar">
-      <section class="page-sidebar-section">
-        <h4>Version</h4>
-        <span>{{ctrl.model.info.version}}</span>
-				<div ng-show="ctrl.model.hasUpdate">
-          <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
-				</div>
-      </section>
-      <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
-        <h5>Includes</h4>
-        <ul class="ui-list plugin-info-list">
-          <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
-            <i class="{{plug.icon}}"></i>
-            {{plug.name}}
-          </li>
-        </ul>
-      </section>
-      <section class="page-sidebar-section">
-        <h5>Dependencies</h4>
-        <ul class="ui-list plugin-info-list">
-          <li class="plugin-info-list-item">
-            <img src="public/img/grafana_icon.svg"></img>
-            Grafana {{ctrl.model.dependencies.grafanaVersion}}
-          </li>
-          <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
-            <i class="{{plugDep.icon}}"></i>
-            {{plugDep.name}} {{plugDep.version}}
-          </li>
-        </ul>
-      </section>
-      <section class="page-sidebar-section">
-        <h5>Links</h4>
-        <ul class="ui-list">
-          <li ng-repeat="link in ctrl.model.info.links">
-            <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
-          </li>
-        </ul>
-      </section>
-    </aside>
+  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
+    <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
   </div>
+
+  <aside class="page-sidebar">
+    <section class="page-sidebar-section">
+      <h4>Version</h4>
+      <span>{{ctrl.model.info.version}}</span>
+      <div ng-show="ctrl.model.hasUpdate">
+        <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
+      </div>
+    </section>
+    <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
+      <h5>Includes</h4>
+      <ul class="ui-list plugin-info-list">
+        <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
+          <i class="{{plug.icon}}"></i>
+          {{plug.name}}
+        </li>
+      </ul>
+    </section>
+    <section class="page-sidebar-section">
+      <h5>Dependencies</h4>
+      <ul class="ui-list plugin-info-list">
+        <li class="plugin-info-list-item">
+          <img src="public/img/grafana_icon.svg"></img>
+          Grafana {{ctrl.model.dependencies.grafanaVersion}}
+        </li>
+        <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
+          <i class="{{plugDep.icon}}"></i>
+          {{plugDep.name}} {{plugDep.version}}
+        </li>
+      </ul>
+    </section>
+    <section class="page-sidebar-section">
+      <h5>Links</h4>
+      <ul class="ui-list">
+        <li ng-repeat="link in ctrl.model.info.links">
+          <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
+        </li>
+      </ul>
+    </section>
+  </aside>
 </div>

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

@@ -1,63 +1,68 @@
-<navbar model="ctrl.navModel"></navbar>
 
-<div class="page-container">
-	<div class="page-header">
-		<h1>
-			<i class="icon-gf icon-gf-apps"></i>
-			Plugins <span class="muted small">(currently installed)</span>
-		</h1>
+<div class="page-header-canvas">
+  <div class="page-container">
+    <navbar model="ctrl.navModel"></navbar>
 
-		<div class="page-header-tabs">
-			<ul class="gf-tabs">
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
-						Panels
-					</a>
-				</li>
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
-						Data sources
-					</a>
-				</li>
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
-						Apps
-					</a>
-				</li>
-			</ul>
+    <div class="page-header">
+		  <page-h1 model="ctrl.navModel"></page-h1>
 
-			<a class="get-more-plugins-link" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
-				Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
-			</a>
-		</div>
-	</div>
+      <div class="page-header-tabs">
+        <ul class="gf-tabs">
+          <li class="gf-tabs-item">
+            <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
+              <i class="icon-gf icon-gf-panel"></i>
+              Panels
+            </a>
+          </li>
+          <li class="gf-tabs-item">
+            <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
+              <i class="gicon gicon-datasources"></i>
+              Data sources
+            </a>
+          </li>
+          <li class="gf-tabs-item">
+            <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
+              <i class="icon-gf icon-gf-apps"></i>
+              Apps
+            </a>
+          </li>
+        </ul>
 
-	<section class="card-section" layout-mode>
-		<layout-selector></layout-selector>
+        <a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
+          Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="page-container page-body">
+  <section class="card-section" layout-mode>
+    <layout-selector></layout-selector>
 
-		<ol class="card-list" >
-			<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
-				<a class="card-item" href="plugins/{{plugin.id}}/edit">
-					<div class="card-item-header">
-						<div class="card-item-type">
-							<i class="icon-gf icon-gf-{{plugin.type}}"></i>
-							{{plugin.type}}
-						</div>
-						<div class="card-item-notice" ng-show="plugin.hasUpdate">
-							<span bs-tooltip="plugin.latestVersion">Update available!</span>
-						</div>
-					</div>
-					<div class="card-item-body">
-						<figure class="card-item-figure">
-							<img ng-src="{{plugin.info.logos.small}}">
-						</figure>
-						<div class="card-item-details">
-							<div class="card-item-name">{{plugin.name}}</div>
-							<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
-						</div>
-					</div>
-				</a>
-			</li>
-		</ol>
-	</section>
+    <ol class="card-list" >
+      <li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
+        <a class="card-item" href="plugins/{{plugin.id}}/edit">
+          <div class="card-item-header">
+            <div class="card-item-type">
+              <i class="icon-gf icon-gf-{{plugin.type}}"></i>
+              {{plugin.type}}
+            </div>
+            <div class="card-item-notice" ng-show="plugin.hasUpdate">
+              <span bs-tooltip="plugin.latestVersion">Update available!</span>
+            </div>
+          </div>
+          <div class="card-item-body">
+            <figure class="card-item-figure">
+              <img ng-src="{{plugin.info.logos.small}}">
+            </figure>
+            <div class="card-item-details">
+              <div class="card-item-name">{{plugin.name}}</div>
+              <div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ol>
+  </section>
 </div>

public/sass/_grafana.scss

@@ -85,6 +85,7 @@
 @import "components/code_editor";
 @import "components/dashboard_grid";
 @import "components/dashboard_list";
+@import "components/page_header";
 
 
 // PAGES

public/sass/_variables.scss

@@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2;
 $panel-padding: 0px 10px 5px 10px;
 
 // tabs
-$tabs-padding: 8px 15px 11px;
+$tabs-padding: 10px 15px 10px;
 

public/sass/base/_icons.scss

@@ -43,5 +43,9 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
 }
 
+.gicon-alert-notification-channel {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
+}
+
 
 

public/sass/components/_footer.scss

@@ -5,7 +5,7 @@
 .footer {
   color: $footer-link-color;
   padding: 5rem 0 1rem 0;
-  font-size: $font-size-xs;
+  font-size: $font-size-sm;
   width: 98%;  /* was causing horiz scrollbars - need to examine */
 
   a {

public/sass/components/_page_header.scss

@@ -0,0 +1,61 @@
+
+.page-header-canvas {
+  background: linear-gradient(90deg, #292a2d, black);
+  box-shadow: inset 0px -4px 14px #2d2d2d;
+  border-bottom: 1px solid $dark-4;
+}
+
+.page-header {
+  padding: 2rem 0 0 0;
+
+  .btn {
+    float: right;
+    margin-left: 1rem;
+
+    // better align icons
+    .fa {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.page-header__title {
+  font-size: $font-size-h2;
+  flex-grow: 1;
+  margin-bottom: 2.5rem;
+  line-height: 50px;
+}
+
+.page-header__img {
+  border-radius: 50%;
+  margin-right: 0.5rem;
+  position: relative;
+  top: -3px;
+  width: 50px;
+  height: 50px;
+}
+
+.page-header__icon {
+  font-size: 150%;
+  margin-right: 0.5rem;
+  width: 50px;
+  height: 50px;
+  position: relative;
+
+  &.fa {
+    top: 3px;
+  }
+
+  &.icon-gf {
+    top: 3px;
+  }
+}
+
+.page-heading {
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: $spacer * 0.7;
+}
+
+

public/sass/components/_tabs.scss

@@ -1,6 +1,8 @@
 .gf-tabs {
   @include clearfix();
   float: left;
+  position: relative;
+  top: 1px;
 }
 
 .gf-tabs-item {
@@ -18,7 +20,7 @@
   border-radius: 3px 3px 0 0;
 
   i {
-    padding-right: 5px;
+    margin-right: 5px;
   }
 
   &:hover,
@@ -32,8 +34,6 @@
     border-color: $orange $dark-4 transparent;
     background: $page-bg;
     color: $link-color;
-    position: relative;
-    top: 1px;
   }
 }
 

public/sass/layout/_page.scss

@@ -42,6 +42,17 @@
   }
 }
 
+.page-action-bar {
+  margin-bottom: $spacer * 2;
+  display: flex;
+  align-items: flex-start;
+}
+
+.page-action-bar__spacer {
+  width: $spacer * 2;
+  flex-grow: 1;
+}
+
 .page-content-with-sidebar {
   width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
 }
@@ -53,68 +64,6 @@
   }
 }
 
-.page-header-canvas {
-  background: linear-gradient(90deg, #292a2d, black);
-  box-shadow: inset 0px -4px 14px #2d2d2d;
-  bottom-border: 1px solid $dark-4;
-}
-
-.page-header {
-  padding: 2rem 0 0 0;
-
-  .btn {
-    float: right;
-    margin-left: 1rem;
-
-    // better align icons
-    .fa {
-      position: relative;
-      top: 1px;
-    }
-  }
-}
-
-.page-header__title {
-  font-size: $font-size-h2;
-  flex-grow: 1;
-  display: inline-block;
-  margin-bottom: 2.5rem;
-}
-
-.page-header__img {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 1rem;
-  position: relative;
-  top: -3px;
-}
-
-.page-header__icon {
-  font-size: 150%;
-  margin-right: 1rem;
-}
-
-.page-heading {
-  font-size: 1.25rem;
-  margin-top: 0;
-  margin-bottom: $spacer * 0.7;
-}
-
-.admin-page {
-  max-width: 800px;
-  margin-left: 10px;
-  h2 {
-    margin-left: 15px;
-    margin-bottom: 0px;
-    font-size: $font-size-lg;
-    color: $text-color;
-    i {
-      padding-right: 6px;
-    }
-  }
-}
-
 .page-sidebar {
   color: $text-color-weak;
   h4 {
@@ -207,13 +156,12 @@
 
     // 5px - for rounded arrows and
     // 50px - to prevent hover glitches on the border created using shadows*/
-  border-radius: 0 5px 0 50px;
-}
+    border-radius: 0 5px 0 50px;
+  }
 
-// we dont need an arrow after the last link
-&:last-child:after {
-  content: none;
-}
+  // we dont need an arrow after the last link
+  &:last-child:after {
+    content: none;
+  }
 }
 
-