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 {
   &:hover {
     .panel-options-group__add-circle {
     .panel-options-group__add-circle {
       background-color: $btn-success-bg;
       background-color: $btn-success-bg;
-      color: $text-color-strong;
+      color: $white;
     }
     }
   }
   }
 }
 }
 
 
 .panel-options-group__add-circle {
 .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;
   border-radius: 50px;
   width: 20px;
   width: 20px;

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

@@ -21,7 +21,7 @@
 }
 }
 
 
 .thresholds-row-add-button {
 .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;
   align-self: center;
   margin-right: 5px;
   margin-right: 5px;
@@ -34,7 +34,7 @@
   cursor: pointer;
   cursor: pointer;
 
 
   &:hover {
   &: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 +=
       template +=
         `
         `
       <div class="panel-options-group" ng-cloak>` +
       <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">
         `<div class="panel-options-group__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
         </div>
@@ -228,8 +233,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
     };
     };
 
 
     return (
     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}>
           <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
             <VizTypePicker
             <VizTypePicker
@@ -247,11 +257,11 @@ export class VisualizationTab extends PureComponent<Props, State> {
 }
 }
 
 
 const mapStateToProps = (state: StoreState) => ({
 const mapStateToProps = (state: StoreState) => ({
-  urlOpenVizPicker: !!state.location.query.openVizPicker
+  urlOpenVizPicker: !!state.location.query.openVizPicker,
 });
 });
 
 
 const mapDispatchToProps = {
 const mapDispatchToProps = {
-  updateLocation
+  updateLocation,
 };
 };
 
 
 export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps);
 export default connectWithStore(VisualizationTab, mapStateToProps, mapDispatchToProps);

public/sass/components/_panel_editor.scss

@@ -146,15 +146,17 @@
   padding-bottom: 6px;
   padding-bottom: 6px;
   transition: transform 1 ease;
   transition: transform 1 ease;
 
 
-  &--current {
-    box-shadow: 0 0 6px $orange;
-    border: 1px solid $orange;
-  }
-
   &:hover {
   &:hover {
     box-shadow: $panel-editor-viz-item-shadow-hover;
     box-shadow: $panel-editor-viz-item-shadow-hover;
     background: $panel-editor-viz-item-bg-hover;
     background: $panel-editor-viz-item-bg-hover;
     border: $panel-editor-viz-item-border-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;
   }
   }
 }
 }