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,59 +73,35 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
         const styles = getStyles(theme.v1);
         return (
           <div>
-            <Input
+            <InlineField label="Default Gauge Color">
-              className={styles.row}
+              <InlineLabel>
-              type="text"
-              value={'Default Gauge Color'}
-              disabled
-              prefix={
-                <div>
                 <ColorPicker
                   color={config.defaultColor}
                   onChange={(val) => onFieldChange('defaultColor', val)}
                   enableNamedColors={true}
                 />
-                </div>
+              </InlineLabel>
-              }
+            </InlineField>
-            />
+
-            <Input
+            <InlineField label="Arc Background">
-              className={styles.row}
+              <InlineLabel>
-              type="text"
-              value={'Arc Background'}
-              disabled
-              prefix={
-                <div>
                 <ColorPicker
                   color={config.arcBackground}
                   onChange={(val) => onFieldChange('arcBackground', val)}
                   enableNamedColors={true}
                 />
-                </div>
+              </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>
+                  <InlineField>
                     {threshold.useMetric ? (
                       <FieldNamePicker
                         context={context}
@@ -138,11 +116,25 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                         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`
+    deleteButton: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-right: 0px!important;
     `,
   };
 });