minor style fixes & polish

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -77,7 +77,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
           </ul>
           </ul>
 
 
           <button className="panel-editor-tabs__close" onClick={this.onClose}>
           <button className="panel-editor-tabs__close" onClick={this.onClose}>
-            <i className="fa fa-remove" />
+            <i className="fa fa-reply" />
           </button>
           </button>
         </div>
         </div>
 
 

public/app/features/panel/panel_directive.ts

@@ -44,8 +44,8 @@ const panelTemplate = `
             </li>
             </li>
           </ul>
           </ul>
 
 
-          <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-            <i class="fa fa-remove"></i>
+          <button class="panel-editor-tabs__close" ng-click="ctrl.exitFullscreen();">
+            <i class="fa fa-reply"></i>
           </button>
           </button>
         </div>
         </div>
 
 

public/sass/_variables.dark.scss

@@ -267,6 +267,11 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 // -------------------------
 // -------------------------
 $tab-border-color: $dark-4;
 $tab-border-color: $dark-4;
 
 
+// Toolbar
+$toolbar-bg: $page-header-bg;
+$toolbar-shadow: 0 0 20px black;
+$toolbar-tab-bg: $gray-blue;
+
 // Pagination
 // Pagination
 // -------------------------
 // -------------------------
 
 

public/sass/_variables.light.scss

@@ -214,6 +214,11 @@ $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
 // -------------------------
 // -------------------------
 $tab-border-color: $gray-5;
 $tab-border-color: $gray-5;
 
 
+// Toolbar
+$toolbar-bg: linear-gradient(90deg, #ffffff, #e6eef9);
+$toolbar-shadow: 1px 1px 3px #c7d0d8;
+$toolbar-tab-bg: $white;
+
 // search
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-filter-box-bg: $gray-7;
 $search-filter-box-bg: $gray-7;

public/sass/components/_panel_editor.scss

@@ -67,13 +67,13 @@
   border-radius: 2px;
   border-radius: 2px;
   height: 10px;
   height: 10px;
   cursor: grabbing;
   cursor: grabbing;
-  background: $dark-4;
+  background: $input-label-bg;
   top: -8px;
   top: -8px;
 
 
   &:hover {
   &:hover {
     transition: background 0.2s ease-in 0.4s;
     transition: background 0.2s ease-in 0.4s;
     transition-delay: 0.2s;
     transition-delay: 0.2s;
-    background: $blue-dark;
+    background: linear-gradient(90deg, $orange, $red);
     .panel-editor-resizer__handle-dots {
     .panel-editor-resizer__handle-dots {
       transition: opacity 0.2s ease-in;
       transition: opacity 0.2s ease-in;
       opacity: 0;
       opacity: 0;
@@ -144,26 +144,15 @@
   @include clearfix();
   @include clearfix();
 
 
   .active.gf-tabs-link {
   .active.gf-tabs-link {
-    background: $input-label-bg;
+    background: $toolbar-tab-bg;
   }
   }
 }
 }
 
 
 .panel-editor-tabs__close {
 .panel-editor-tabs__close {
+  padding: 5px 9px;
+  border-radius: $border-radius;
   float: right;
   float: right;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: none;
-  padding: $tabs-padding;
-  color: $text-color;
-
-  i {
-    font-size: 120%;
-  }
-
-  &:hover {
-    color: $text-color-strong;
-  }
+  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
 }
 
 
 .ds-picker-list {
 .ds-picker-list {

public/sass/components/_toolbar.scss

@@ -2,9 +2,9 @@
   display: flex;
   display: flex;
   align-content: center;
   align-content: center;
   align-items: center;
   align-items: center;
-  background: $page-header-bg;
-  box-shadow: 0 0 20px black;
-  padding: 7px 30px 7px 20px;
+  background: $toolbar-bg;
+  box-shadow: $toolbar-shadow;
+  padding: 7px 20px 7px 20px;
   position: relative;
   position: relative;
   z-index: 1;
   z-index: 1;
   flex: 0 0 auto;
   flex: 0 0 auto;