FilePicker restyling

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

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

@@ -1,16 +1,20 @@
 import React from "react";
 import { Cluster } from "../../../../main/cluster";
-import { clusterStore } from "../../../../common/cluster-store"
-import { Icon } from "../../icon";
 import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
 import { autobind } from "../../../utils";
 import { Button } from "../../button";
-import { GeneralInputStatus } from "./statuses"
 import { observable } from "mobx";
 import { observer } from "mobx-react";
+import { SubTitle } from "../../layout/sub-title";
+import { ClusterIcon } from "../../cluster-icon";
+
+enum GeneralInputStatus {
+  CLEAN = "clean",
+  ERROR = "error",
+}
 
 interface Props {
-    cluster: Cluster;
+  cluster: Cluster;
 }
 
 @observer
@@ -21,7 +25,6 @@ export class ClusterIconSetting extends React.Component<Props> {
   @autobind()
   async onIconPick([file]: File[]) {
     const { cluster } = this.props;
-    
     try {
       if (file) {
         const buf = Buffer.from(await file.arrayBuffer());
@@ -38,35 +41,36 @@ export class ClusterIconSetting extends React.Component<Props> {
   }
 
   getClearButton() {
-    const { cluster } = this.props;
-
-    if (cluster.preferences.icon) {
-      return <Button accent onClick={() => this.onIconPick([])}>Clear</Button>
+    if (this.props.cluster.preferences.icon) {
+      return <Button tooltip="Revert back to default icon" accent onClick={() => this.onIconPick([])}>Clear</Button>
     }
   }
 
   render() {
-    return <>
-      <h4>Cluster Icon</h4>
-      <p>Set cluster icon. By default it is automatically generated. {this.getIconRight()}</p>
-      <div className="center">
-        <FilePicker 
-          accept="image/*" 
-          labelText="Browse for new icon..." 
-          onOverSizeLimit={OverSizeLimitStyle.FILTER} 
-          handler={this.onIconPick}
+    const label = (
+      <>
+        <ClusterIcon
+          cluster={this.props.cluster}
+          showErrors={false}
+          showTooltip={false}
         />
-        {this.getClearButton()}
-      </div>
-    </>;
-  }
-  
-  getIconRight(): React.ReactNode {
-    switch (this.status) {
-    case GeneralInputStatus.CLEAN:
-      return null;
-    case GeneralInputStatus.ERROR:
-      return <Icon size="16px" material="error" title={this.errorText}></Icon>
-    }
+        {"Browse for new icon..."}
+      </>
+    );
+    return (
+      <>
+        <SubTitle title="Cluster Icon" />
+        <p>Define cluster icon. By default automatically generated.</p>
+        <div className="file-loader">
+          <FilePicker
+            accept="image/*"
+            label={label}
+            onOverSizeLimit={OverSizeLimitStyle.FILTER}
+            handler={this.onIconPick}
+          />
+          {this.getClearButton()}
+        </div>
+      </>
+    );
   }
 }

src/renderer/components/file-picker/file-picker.scss

@@ -1,14 +1,11 @@
 .FilePicker {
-    input[type="file"] {
-        display: none;
-    }
+  input[type="file"] {
+    display: none;
+  }
 
-    label {
-        display: inline-block;
-        border: medium solid;
-        padding: 10px;
-        border-radius: 5px;
-        cursor: pointer;
-        margin: 5px;
-    }
+  label {
+    display: inline-flex;
+    cursor: pointer;
+    color: var(--blue);
+  }
 }

src/renderer/components/file-picker/file-picker.tsx

@@ -43,7 +43,7 @@ export enum OverTotalSizeLimitStyle {
 
 export interface BaseProps {
     accept?: string;
-    labelText: string;
+    label: React.ReactElement;
     multiple?: boolean;
 
     // limit is the optional maximum number of files to upload
@@ -175,10 +175,10 @@ export class FilePicker extends React.Component<Props> {
   }
 
   render() {
-    const { accept, labelText, multiple } = this.props;
+    const { accept, label, multiple } = this.props;
 
     return <div className="FilePicker">
-      <label htmlFor="file-upload">{labelText} {this.getIconRight()}</label>
+      <label className="flex gaps align-center" htmlFor="file-upload">{label} {this.getIconRight()}</label>
       <input 
         id="file-upload" 
         name="FilePicker"