edit mode styling

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

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;

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 {