From f175046bc10b7c89ae73dfce9eb4b59b5cbdde7a Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 22 Apr 2019 16:04:35 +0200
Subject: [PATCH] Dashboard: Minor settings UI Update (#16669)

* removed settings header in aside, added header next to search button, tweaked paddings

* Minor tweak
---
 .../src/themes/_variables.light.scss.tmpl.ts           |  2 +-
 .../features/dashboard/components/DashNav/DashNav.tsx  |  5 +++++
 .../components/DashboardSettings/template.html         |  5 -----
 public/sass/_variables.light.generated.scss            |  2 +-
 public/sass/components/_dashboard_settings.scss        | 10 +++++++---
 public/sass/components/_navbar.scss                    |  9 +++++++++
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 671e0376f53..96b2936354c 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -196,7 +196,7 @@ $input-color-select-arrow: $gray-1;
 $placeholderText: $gray-2;
 
 // search
-$search-shadow: 0 5px 30px 0 $gray-4;
+$search-shadow: 0 1px 5px 0 $gray-5;
 $search-filter-box-bg: $gray-7;
 
 // Typeahead
diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index 4b29b01bb06..cf82453cfa7 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -146,6 +146,7 @@ export class DashNav extends PureComponent<Props> {
             <i className="fa fa-caret-down" />
           </a>
         </div>
+        {this.isSettings && <span className="navbar-settings-title">&nbsp;/ Settings</span>}
         <div className="navbar__spacer" />
       </>
     );
@@ -155,6 +156,10 @@ export class DashNav extends PureComponent<Props> {
     return this.props.editview || this.props.isFullscreen;
   }
 
+  get isSettings() {
+    return this.props.editview;
+  }
+
   renderBackButton() {
     return (
       <div className="navbar-edit">
diff --git a/public/app/features/dashboard/components/DashboardSettings/template.html b/public/app/features/dashboard/components/DashboardSettings/template.html
index d177ec3eda2..b630c6e81bd 100644
--- a/public/app/features/dashboard/components/DashboardSettings/template.html
+++ b/public/app/features/dashboard/components/DashboardSettings/template.html
@@ -1,9 +1,4 @@
 <aside class="dashboard-settings__aside">
-	<h2 class="dashboard-settings__aside-header">
-		<i class="gicon gicon-cog"></i>
-		Settings
-	</h2>
-
 	<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
     <i class="{{::section.icon}}"></i>
 		{{::section.title}}
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 7ac170e51f1..b989af2eb21 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -199,7 +199,7 @@ $input-color-select-arrow: $gray-1;
 $placeholderText: $gray-2;
 
 // search
-$search-shadow: 0 5px 30px 0 $gray-4;
+$search-shadow: 0 1px 5px 0 $gray-5;
 $search-filter-box-bg: $gray-7;
 
 // Typeahead
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index c5e6bc5efa6..c53e912ba06 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -25,12 +25,12 @@
   flex-grow: 1;
   min-width: 0;
   height: 100%;
-  padding: 30px;
+  padding: 32px;
   max-width: 1100px;
 }
 
 .dashboard-settings__aside {
-  padding: 27px 0 0 30px;
+  padding: 32px 0 0 32px;
   background: $panel-bg;
   display: flex;
   flex-direction: column;
@@ -54,6 +54,7 @@
 .dashboard-settings__header {
   font-size: $font-size-h3;
   margin-bottom: $space-xl;
+  line-height: 36px;
 }
 
 .dashboard-settings__subheader {
@@ -64,9 +65,10 @@
 }
 
 .dashboard-settings__nav-item {
-  padding: 7px 12px;
+  padding: 8px 40px 8px 8px;
   color: $text-color;
   font-size: $font-size-md;
+  line-height: 20px;
   @include left-brand-border;
 
   &.active {
@@ -76,11 +78,13 @@
 
   .gicon {
     margin-bottom: 2px;
+    margin-right: 4px;
   }
 
   .fa {
     font-size: 17px;
     width: 16px;
+    margin-right: 4px;
   }
 }
 
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index d3b37f18920..0128defe161 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -212,3 +212,12 @@
     border-color: $text-color-strong;
   }
 }
+
+.navbar-settings-title {
+  display: block;
+  margin: 0;
+  color: $headings-color;
+  font-size: $font-size-lg;
+  min-height: $navbarHeight;
+  line-height: $navbarHeight;
+}