From e1eb7ca5714d6986624753c1c2b69353f0ac71d0 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 23 Nov 2018 16:25:46 +0100
Subject: [PATCH] styling

---
 public/app/plugins/panel/gauge/Thresholds.tsx | 12 ++++++------
 public/sass/components/_thresholds.scss       |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index 6ce72d14431..72d21700421 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -91,7 +91,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     return [
       <div className="gf-form threshold-row threshold-row-min" key="min">
         <input
-          className="gf-form-input"
+          className="gf-form-input threshold-row-input"
           onBlur={this.onBlur}
           onChange={event => this.onChangeThresholdValue(event, thresholds[0])}
           value={thresholds[0].value}
@@ -108,7 +108,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       </div>,
       <div className="gf-form threshold-row threshold-row-max" key="max">
         <input
-          className="gf-form-input"
+          className="gf-form-input threshold-row-input"
           onBlur={this.onBlur}
           onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
           value={thresholds[1].value}
@@ -129,7 +129,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
           key={`${threshold}-${index}`}
         >
           <input
-            className="gf-form-input"
+            className="gf-form-input threshold-row-input"
             type="text"
             onChange={event => this.onChangeThresholdValue(event, threshold)}
             value={threshold.value}
@@ -177,7 +177,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { userAddedThresholds } = this.state;
     const indicators = userAddedThresholds + 1;
 
-    if (index === 0 || index === indicators) {
+    if (index === 0 || index === this.state.thresholds.length) {
       return (
         <div
           key={index}
@@ -212,7 +212,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
             background: this.getIndicatorColor(index),
           }}
         >
-          {index}
+          d
         </div>
         <div
           onClick={() => this.onAddThreshold(this.insertAtIndex(index))}
@@ -222,7 +222,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
             background: this.getIndicatorColor(index),
           }}
         >
-          {index}
+          i
         </div>
       </div>
     );
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index 1782ab6505a..6acb03b2dd7 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -16,6 +16,10 @@
   }
 }
 
+.threshold-row-input {
+  border-radius: $border-radius 0 0 $border-radius;
+}
+
 .threshold-row-min {
   margin-top: -17px;
 }