pretty styles

src/components/editors/IconsEditor.tsx

@@ -241,7 +241,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       margin-bottom: ${theme.spacing.xxs};
     `,
     slider: css`
-      padding-bottom: 0;
+      padding-bottom: ${theme.spacing.xxs};
     `,
     row: css`
       margin-bottom: ${theme.spacing.sm};

src/components/editors/ThresholdsEditor.tsx

@@ -7,6 +7,7 @@ import {
   HorizontalGroup,
   IconButton,
   InlineField,
+  InlineLabel,
   InlineSwitch,
   Input,
   stylesFactory,
@@ -18,6 +19,7 @@ import React from 'react';
 import { css } from 'emotion';
 import * as _ from 'lodash';
 
+
 interface Props {
   defaultColor: string;
   arcBackground: string;
@@ -71,78 +73,68 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
         const styles = getStyles(theme.v1);
         return (
           <div>
-            <Input
-              className={styles.row}
-              type="text"
-              value={'Default Gauge Color'}
-              disabled
-              prefix={
-                <div>
-                  <ColorPicker
-                    color={config.defaultColor}
-                    onChange={(val) => onFieldChange('defaultColor', val)}
-                    enableNamedColors={true}
-                  />
-                </div>
-              }
-            />
-            <Input
-              className={styles.row}
-              type="text"
-              value={'Arc Background'}
-              disabled
-              prefix={
-                <div>
-                  <ColorPicker
-                    color={config.arcBackground}
-                    onChange={(val) => onFieldChange('arcBackground', val)}
-                    enableNamedColors={true}
-                  />
-                </div>
-              }
-            />
+            <InlineField label="Default Gauge Color">
+              <InlineLabel>
+                <ColorPicker
+                  color={config.defaultColor}
+                  onChange={(val) => onFieldChange('defaultColor', val)}
+                  enableNamedColors={true}
+                />
+              </InlineLabel>
+            </InlineField>
+
+            <InlineField label="Arc Background">
+              <InlineLabel>
+                <ColorPicker
+                  color={config.arcBackground}
+                  onChange={(val) => onFieldChange('arcBackground', val)}
+                  enableNamedColors={true}
+                />
+              </InlineLabel>
+            </InlineField>
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
                 <HorizontalGroup key={thresholdIdx}>
-                  <Input
-                    type="text"
-                    value={'Color'}
-                    disabled
-                    prefix={
-                      <div>
-                        <ColorPicker
-                          color={threshold.color}
-                          onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
-                          enableNamedColors={true}
-                        />
-                      </div>
-                    }
-                  />
                   <InlineField label="Use metric">
                     <InlineSwitch
                       value={threshold.useMetric}
                       onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'useMetric', (evt.target as any).checked)}
                     />
                   </InlineField>
-                  {threshold.useMetric ? (
-                    <FieldNamePicker
-                      context={context}
-                      value={threshold.metricName as string}
-                      onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)}
-                      item={fieldNamePickerSettings}
-                    />
-                  ) : (
-                    <Input
-                      placeholder="value"
-                      value={threshold.value}
-                      onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
-                    />
-                  )}
-                  <IconButton 
-                    name="trash-alt" 
-                    onClick={() => removeThreshold(thresholdIdx)}
-                    tooltip="Delete Threshold"
-                  ></IconButton>
+                  <InlineField>
+                    {threshold.useMetric ? (
+                      <FieldNamePicker
+                        context={context}
+                        value={threshold.metricName as string}
+                        onChange={(newVal: any) => onThresholdFieldChange(thresholdIdx, 'metricName', newVal)}
+                        item={fieldNamePickerSettings}
+                      />
+                    ) : (
+                      <Input
+                        placeholder="value"
+                        value={threshold.value}
+                        onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
+                      />
+                    )}
+                  </InlineField>
+                  <InlineField label="Color">
+                    <InlineLabel>
+                      <ColorPicker
+                        color={threshold.color}
+                        onChange={(newVal) => onThresholdFieldChange(thresholdIdx, 'color', newVal)}
+                        enableNamedColors={true}
+                      />
+                    </InlineLabel>
+                  </InlineField>
+                  <InlineField>
+                    <InlineLabel width={0} className={styles.deleteButton}>
+                      <IconButton
+                        name="trash-alt"
+                        onClick={() => removeThreshold(thresholdIdx)}
+                        tooltip="Delete Threshold"
+                      ></IconButton>
+                    </InlineLabel>
+                  </InlineField>
                 </HorizontalGroup>
               );
             })}
@@ -157,13 +149,13 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
 }
 
 interface ThresholdsEditorStyles {
-  row: string;
+  deleteButton: string;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdsEditorStyles => {
   return {
-    row: css`
-      margin-bottom: ${theme.spacing.sm};
+    deleteButton: css`
+      margin-right: 0px!important;
     `,
   };
 });