fix label and saving procedure

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/main/cluster.ts

@@ -537,7 +537,7 @@ export class Cluster implements ClusterModel, ClusterState {
 
       return ClusterStatus.AccessGranted;
     } catch (error) {
-      logger.error(`Failed to connect cluster "${this.contextName}": ${error}`);
+      logger.error(`Failed to connect cluster "${this.contextName}": ${error}`, { error });
 
       if (error.statusCode) {
         if (error.statusCode >= 400 && error.statusCode < 500) {

src/renderer/components/+cluster-settings/cluster-settings.scss

@@ -49,7 +49,11 @@
     margin-top: $padding;
   }
 
-  .icon-background-color {
-    max-width: 100px;
+  .icon-background-color label {
+    overflow: hidden;
+    width: var(--cluster-icon-size);
+    height: var(--cluster-icon-size);
+    border-radius: 5px;
+    margin: 2px;
   }
 }

src/renderer/components/+cluster-settings/components/cluster-icon-setting.tsx

@@ -3,12 +3,12 @@ import { Cluster } from "../../../../main/cluster";
 import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
 import { autobind } from "../../../utils";
 import { Button } from "../../button";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
+import { observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { ClusterIcon } from "../../cluster-icon";
 import { Input } from "../../input";
-import { debounce } from "lodash";
+import { throttle } from "lodash";
 
 enum GeneralInputStatus {
   CLEAN = "clean",
@@ -23,6 +23,18 @@ interface Props {
 export class ClusterIconSetting extends React.Component<Props> {
   @observable status = GeneralInputStatus.CLEAN;
   @observable errorText?: string;
+  @observable iconColour = this.getIconBackgroundColorValue();
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.iconColour, background => {
+        // This is done so that the UI can update as fast as it would like
+        // without the necessary slowing down of the updates to the Cluster
+        // Preferences (to prevent too many file writes).
+        this.onColorChange(background);
+      }),
+    ]);
+  }
 
   @autobind()
   async onIconPick([file]: File[]) {
@@ -60,9 +72,9 @@ export class ClusterIconSetting extends React.Component<Props> {
     return iconPreference.background;
   }
 
-  onColorChange = debounce(background => {
+  onColorChange = throttle(background => {
     this.props.cluster.preferences.icon = { background };
-  }, 100, {
+  }, 200, {
     leading: true,
     trailing: true,
   });
@@ -97,9 +109,9 @@ export class ClusterIconSetting extends React.Component<Props> {
           <Input
             className="icon-background-color"
             type="color"
-            value={this.getIconBackgroundColorValue()}
+            value={this.iconColour}
             title="Choose auto generated icon's background color"
-            onChange={this.onColorChange}
+            onChange={background => this.iconColour = background}
           />
           <small className="hint">
             This action clears any previously set icon.

src/renderer/components/app.scss

@@ -15,7 +15,8 @@
   --font-weight-normal: 400;
   --font-weight-bold: 500;
   --main-layout-header: 40px;
-  --drag-region-height: 22px
+  --drag-region-height: 22px;
+  --cluster-icon-size: 37px;
 }
 
 *, *:before, *:after {
@@ -82,6 +83,13 @@ html, body {
   pointer-events: none;
 }
 
+input[type='color'] {
+  padding: 0;
+  margin: -25%;
+  width: 150%;
+  height: 150%;
+}
+
 body {
   font: $font-size $font-main;
 }

src/renderer/components/cluster-icon/cluster-icon.scss

 .ClusterIcon {
-  --size: 37px;
-
   position: relative;
   border-radius: $radius;
   padding: $radius;
@@ -21,8 +19,8 @@
   }
 
   img {
-    width: var(--size);
-    height: var(--size);
+    width: var(--cluster-icon-size);
+    height: var(--cluster-icon-size);
   }
 
   &.active, &.interactive:hover {