Made some style tweaks

packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx

@@ -12,16 +12,18 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
   return (
     <div className="panel-options-group">
       {props.onAdd ? (
-        <div className="panel-options-group__header" style={{ cursor: 'pointer' }} onClick={props.onAdd}>
+        <div className="panel-options-group__header">
-          <div className="panel-options-group__add">
+          <button className="panel-options-group__add-btn" onClick={props.onAdd}>
-            <i className="fa fa-plus" />
+            <div className="panel-options-group__add-circle">
-          </div>
+              <i className="fa fa-plus" />
-          <span className="panel-options-group__title">{props.title}</span>
+            </div>
+            <span className="panel-options-group__title">{props.title}</span>
+          </button>
         </div>
       ) : (
         props.title && (
           <div className="panel-options-group__header">
-            {props.title}
+            <span className="panel-options-group__title">{props.title}</span>
             {props.onClose && (
               <button className="btn btn-link" onClick={props.onClose}>
                 <i className="fa fa-remove" />

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

@@ -7,11 +7,11 @@
 
 .panel-options-group__header {
   padding: 4px 8px;
-  font-size: 1.1rem;
   background: $panel-options-group-header-bg;
   position: relative;
   border-radius: $border-radius $border-radius 0 0;
   display: flex;
+  align-items: center;
 
   .btn {
     position: absolute;
@@ -19,17 +19,41 @@
     top: 0;
   }
 }
-.panel-options-group__add {
+
-  background-color: $btn-success-bg;
+.panel-options-group__add-btn {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  &:hover {
+    .panel-options-group__add-circle {
+      background-color: $btn-success-bg;
+      color: $text-color-strong;
+    }
+  }
+}
+
+.panel-options-group__add-circle {
+  @include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
+
   border-radius: 50px;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-right: 6px;
+
+  i {
+    position: relative;
+    top: 1px;
+  }
 }
+
 .panel-options-group__title {
-  margin-left: 8px;
+  font-size: 1.1rem;
 }
 
 .panel-options-group__body {

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

@@ -5,7 +5,7 @@
 .thresholds-row {
   display: flex;
   flex-direction: row;
-  height: 70px;
+  height: 62px;
 }
 
 .thresholds-row:first-child > .thresholds-row-color-indicator {
@@ -21,21 +21,21 @@
 }
 
 .thresholds-row-add-button {
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
+
   align-self: center;
   margin-right: 5px;
-  color: $green;
   height: 24px;
   width: 24px;
-  background-color: $green;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-}
 
-.thresholds-row-add-button > i {
+  &:hover {
-  color: $white;
+    color: $text-color-strong;
+  }
 }
 
 .thresholds-row-color-indicator {

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx

@@ -81,7 +81,7 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
     const { valueMappings } = this.state;
 
     return (
-      <PanelOptionsGroup title="Add mapping" onAdd={this.addMapping}>
+      <PanelOptionsGroup title="Add value mapping" onAdd={this.addMapping}>
           {valueMappings.length > 0 &&
             valueMappings.map((valueMapping, index) => (
               <MappingRow