more styles

src/components/editors/IconsEditor.tsx

@@ -121,7 +121,6 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
   };
 
   const onConditionChange = (iconIdx: number, conditionIdx: number, field: keyof IconConfig, value: any) => {
-    console.log(value);
     // @ts-ignore
     icons[iconIdx][field][conditionIdx] = value;
 
@@ -138,18 +137,25 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
               {icons.map((icon, iconIdx) => {
                 return (
                   <div key={iconIdx} className={styles.icon}>
-                    <IconButton name="trash-alt" onClick={() => removeIcon(iconIdx)}></IconButton>
+                    <IconButton 
+                      name="trash-alt" 
+                      onClick={() => removeIcon(iconIdx)}
+                      tooltip="Delete Icon"
+                    ></IconButton>
+                    <div className={styles.row}>
                       <Input
                         type="url"
                         placeholder="Image URL"
                         value={icon.url}
                         onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
                       />
+                    </div>
                     <RadioButtonGroup
                       value={icon.position}
                       options={positionOptions}
                       onChange={(newVal) => onIconFieldChange(iconIdx, 'position', newVal)}
                     />
+                    <div className={styles.slider}>
                       <Slider
                         value={icon.size}
                         min={1}
@@ -157,10 +163,12 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
                         step={1}
                         onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
                       />
+                    </div>
 
                     {icon.conditions.map((condition, conditionIdx) => {
                       return (
-                        <HorizontalGroup key={conditionIdx}>
+                        <div className={styles.condition}>
+                          <HorizontalGroup key={conditionIdx} >
                             <FieldNamePicker
                               context={context}
                               value={icon.metrics[conditionIdx]}
@@ -182,8 +190,10 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
                             <IconButton
                               name="trash-alt"
                               onClick={() => removeCondition(iconIdx, conditionIdx)}
+                              tooltip="Delete Condition"
                             ></IconButton>
                           </HorizontalGroup>
+                        </div>
                       );
                     })}
                     <Button variant="secondary" onClick={() => addCondition(iconIdx)}>
@@ -206,6 +216,9 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
 interface IconsEditorStyles {
   icons: string;
   icon: string;
+  condition: string;
+  slider: string;
+  row: string;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
@@ -221,9 +234,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       padding-bottom: ${theme.spacing.formSpacingBase * 2}px;
 
       &:last-child {
-        border: none;
         margin-bottom: 0;
       }
     `,
+    condition: css`
+      margin-bottom: ${theme.spacing.xxs};
+    `,
+    slider: css`
+      padding-bottom: 0;
+    `,
+    row: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
   };
+
 });

src/components/editors/ThresholdsEditor.tsx

@@ -103,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
             />
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
-                <HorizontalGroup key={thresholdIdx} className={styles.row}>
+                <HorizontalGroup key={thresholdIdx}>
                   <Input
                     type="text"
                     value={'Color'}
@@ -138,7 +138,11 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                       onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
                     />
                   )}
-                  <IconButton name="trash-alt" onClick={() => removeThreshold(thresholdIdx)}></IconButton>
+                  <IconButton 
+                    name="trash-alt" 
+                    onClick={() => removeThreshold(thresholdIdx)}
+                    tooltip="Delete Threshold"
+                  ></IconButton>
                 </HorizontalGroup>
               );
             })}