From 9b60f8c40413ef3026b9e52511b11f2f23b6b5fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 30 Apr 2021 17:21:18 +0200
Subject: [PATCH] DashboardSettings: Slight design tweak to fix page toolbar
 padding and align design (#33575)

* DashboardSettings: Slight design tweak to fix page toolbar padding and align design

* Fixed font weight

* Removed comment

* Update
---
 .../DashboardSettings/DashboardSettings.tsx   | 17 ++++++++-------
 .../sass/components/_dashboard_settings.scss  | 21 ++++++++++++++-----
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 2c1118b715f..58d28df10e4 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -14,7 +14,7 @@ import { AnnotationsSettings } from './AnnotationsSettings';
 import { LinksSettings } from './LinksSettings';
 import { VersionsSettings } from './VersionsSettings';
 import { JsonEditorSettings } from './JsonEditorSettings';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaThemeV2 } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 
 export interface Props {
@@ -145,7 +145,7 @@ export class DashboardSettings extends PureComponent<Props> {
     const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
     const canSaveAs = contextSrv.hasEditPermissionInFolders;
     const canSave = dashboard.meta.canSave;
-    const styles = getStyles(config.theme);
+    const styles = getStyles(config.theme2);
 
     return (
       <div className="dashboard-settings">
@@ -183,23 +183,24 @@ export class DashboardSettings extends PureComponent<Props> {
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
   scrollInner: css`
     min-width: 100%;
     min-height: 100%;
+    display: flex;
   `,
   settingsWrapper: css`
-    background: ${theme.colors.bg1};
+    margin: ${theme.spacing(2)};
     display: flex;
-    min-height: 100%;
-    width: 100%;
+    flex-grow: 1;
   `,
   settingsContent: css`
     flex-grow: 1;
-    min-width: 0;
     height: 100%;
     padding: 32px;
-    max-width: 1100px;
+    border: 1px solid ${theme.colors.border.weak};
+    background: ${theme.colors.background.primary};
+    border-radius: ${theme.shape.borderRadius()};
   `,
   settingsContentFullWidth: css`
     flex-grow: 1;
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index 34dcbd9742b..47626652028 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@@ -21,10 +21,9 @@
 }
 
 .dashboard-settings__aside {
-  padding: 32px 0 0 32px;
-  background: $dashboard-bg;
   display: flex;
   flex-direction: column;
+  margin-top: $spacer;
 }
 
 .dashboard-settings__aside-header {
@@ -56,14 +55,26 @@
 
 .dashboard-settings__nav-item {
   padding: 8px 40px 8px 8px;
-  color: $text-color;
+  color: $text-color-weak;
   font-size: $font-size-md;
   line-height: 20px;
+  position: relative;
   @include left-brand-border;
 
   &.active {
-    @include left-brand-border-gradient();
-    background: $panel-bg;
+    color: $text-color;
+    font-weight: $font-weight-semi-bold;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      border-radius: 4px;
+      background: $brand-gradient-vertical;
+    }
   }
 
   .gicon {