Fixed issues with plus button in threshold and panel option header, and current…

Fixed issues with plus button in threshold and panel option header, and current state in viz picker, fixes #15329

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -30,13 +30,13 @@
   &:hover {
     .panel-options-group__add-circle {
       background-color: $btn-success-bg;
-      color: $text-color-strong;
+      color: $white;
     }
   }
 }
 
 .panel-options-group__add-circle {
-  @include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
+  @include gradientBar($btn-success-bg, $btn-success-bg-hl);
 
   border-radius: 50px;
   width: 20px;

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -21,7 +21,7 @@
 }
 
 .thresholds-row-add-button {
-  @include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
 
   align-self: center;
   margin-right: 5px;
@@ -34,7 +34,7 @@
   cursor: pointer;
 
   &:hover {
-    color: $text-color-strong;
+    color: $white;
   }
 }
 

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -119,7 +119,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
       template +=
         `
       <div class="panel-options-group" ng-cloak>` +
-        (i > 0 ? `<div class="panel-options-group__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        (i > 0
+          ? `<div class="panel-options-group__header">
+           <span class="panel-options-group__title">{{ctrl.editorTabs[${i}].title}}
+           </span>
+         </div>`
+          : '') +
         `<div class="panel-options-group__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
@@ -228,8 +233,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
     };
 
     return (
-      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}
-        scrollTop={scrollTop} setScrollTop={this.setScrollTop}>
+      <EditorTabBody
+        heading="Visualization"
+        renderToolbar={this.renderToolbar}
+        toolbarItems={[pluginHelp]}
+        scrollTop={scrollTop}
+        setScrollTop={this.setScrollTop}
+      >
         <>
           <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
             <VizTypePicker
@@ -247,11 +257,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
 }
 
 const mapStateToProps = (state: StoreState) => ({
-  urlOpenVizPicker: !!state.location.query.openVizPicker
+  urlOpenVizPicker: !!state.location.query.openVizPicker,
 });
 
 const mapDispatchToProps = {
-  updateLocation
+  updateLocation,
 };
 
 export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps);

public/sass/components/_panel_editor.scss

@@ -146,15 +146,17 @@
   padding-bottom: 6px;
   transition: transform 1 ease;
 
-  &--current {
-    box-shadow: 0 0 6px $orange;
-    border: 1px solid $orange;
-  }
-
   &:hover {
     box-shadow: $panel-editor-viz-item-shadow-hover;
     background: $panel-editor-viz-item-bg-hover;
     border: $panel-editor-viz-item-border-hover;
+
+  }
+
+  &--current {
+    box-shadow: 0 0 6px $orange !important;
+    border: 1px solid $orange !important;
+    background: $panel-editor-viz-item-bg !important;
   }
 }