Dashboard: Minor settings UI Update (#16669)

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

* Minor tweak

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

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">

public/app/features/dashboard/components/DashboardSettings/template.html

 <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}}

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

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;
   }
 }
 

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;
+}