Fixed the circle

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

@@ -162,8 +162,8 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           {thresholds.map((threshold, index) => {
             return (
               <div className="thresholds-row" key={`${threshold.index}-${index}`}>
-                <div className="thresholds-row-add-button">
-                  <i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} />
+                <div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}>
+                  <i className="fa fa-plus" />
                 </div>
                 <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
                 <div className="thresholds-row-input">{this.renderInput(threshold)}</div>

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

@@ -1,3 +1,7 @@
+.thresholds {
+  margin-bottom: 10px;
+}
+
 .thresholds-row {
   display: flex;
   flex-direction: row;
@@ -14,10 +18,18 @@
   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 {
-  cursor: pointer;
+  color: $white;
 }
 
 .thresholds-row-color-indicator {
@@ -47,7 +59,7 @@
   height: 0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-right: 5px solid $gray-5;
+  border-right: 5px solid $input-label-border-color;
 }
 
 .thresholds-row-input-inner-value {
@@ -83,7 +95,7 @@
   justify-content: center;
   height: 37px;
   width: 37px;
-  background-color: $gray-5;
+  background-color: $input-label-border-color;
   border-top: 1px solid $input-label-border-color;
   border-bottom: 1px solid $input-label-border-color;
   border-right: 1px solid $input-label-border-color;