thresholds styles

src/components/editors/ThresholdsEditor.tsx

@@ -1,6 +1,6 @@
 import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker';
 
-import { StandardEditorProps } from '@grafana/data';
+import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
 import {
   Button,
   ColorPicker,
@@ -9,11 +9,13 @@ import {
   InlineField,
   InlineSwitch,
   Input,
+  stylesFactory,
   ThemeContext,
 } from '@grafana/ui';
 
 import React from 'react';
 
+import { css } from 'emotion';
 import * as _ from 'lodash';
 
 interface Props {
@@ -65,11 +67,12 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
 
   return (
     <ThemeContext.Consumer>
-      {() => {
-        // const styles = getStyles(theme.v1);
+      {(theme) => {
+        const styles = getStyles(theme.v1);
         return (
           <div>
             <Input
+              className={styles.row}
               type="text"
               value={'Default Gauge Color'}
               disabled
@@ -84,6 +87,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
               }
             />
             <Input
+              className={styles.row}
               type="text"
               value={'Arc Background'}
               disabled
@@ -99,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
             />
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
-                <HorizontalGroup key={thresholdIdx}>
+                <HorizontalGroup key={thresholdIdx} className={styles.row}>
                   <Input
                     type="text"
                     value={'Color'}
@@ -147,3 +151,15 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
     </ThemeContext.Consumer>
   );
 }
+
+interface ThresholdsEditorStyles {
+  row: string;
+}
+
+const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
+  return {
+    row: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
+  };
+});