From d70dfd5fd7922a113ae63eeb7890f7a01a72b546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 22 Nov 2018 12:13:28 +0100
Subject: [PATCH] edit mode styling

---
 .../features/dashboard/dashgrid/EditorTabBody.tsx | 10 ++++------
 public/sass/components/_panel_editor.scss         | 15 +++++++++------
 public/sass/components/_toolbar.scss              |  9 ++-------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
index 6ac3cd0573f..02404a917e6 100644
--- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -107,12 +107,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
         </div>
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false}>
-            <div className="panel-editor__content">
-              <FadeIn in={openView !== null} duration={200}>
-                {openView && this.renderOpenView(openView)}
-              </FadeIn>
-              {children}
-            </div>
+            <FadeIn in={openView !== null} duration={200}>
+              <div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
+            </FadeIn>
+            <div className="panel-editor__content">{children}</div>
           </CustomScrollbar>
         </div>
       </>
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 436014346d3..907fa0ce44e 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -49,6 +49,11 @@
   padding: 40px 20px;
 }
 
+.panel-editor__toolbar-view {
+  background: $black;
+  padding: 20px;
+}
+
 .panel-in-fullscreen {
   .sidemenu {
     display: none;
@@ -116,9 +121,8 @@
 }
 
 .viz-picker__item {
-  background: $card-background;
-  box-shadow: $card-shadow;
-
+  background: $panel-bg;
+  border: $panel-border;
   border-radius: 3px;
   height: 90px;
   width: 150px;
@@ -210,9 +214,8 @@
 }
 
 .ds-picker-list__item {
-  background: $card-background;
-  box-shadow: $card-shadow;
-
+  background: $panel-bg;
+  border: $panel-border;
   border-radius: 3px;
   display: flex;
   cursor: pointer;
diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss
index 72ab783fed2..ca81a6a7316 100644
--- a/public/sass/components/_toolbar.scss
+++ b/public/sass/components/_toolbar.scss
@@ -42,18 +42,13 @@
   height: 20px;
 }
 
-.toolbar-subview {
-  position: relative;
-  top: -23px;
-}
-
 .toolbar-subview__close {
   background: transparent;
   padding: 4px 8px 4px 9px;
   border: none;
   position: absolute;
-  right: 15px;
-  top: 0px;
+  right: 25px;
+  top: 20px;
   font-size: $font-size-md;
 
   &:hover {