Merge pull request #15332 from grafana/style-fixes

Fixed issues with plus button in threshold and panel option header

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;
   }
   }
 }
 }