FilePicker restyling

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

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

@@ -1,13 +1,17 @@
 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;
@@ -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 (this.props.cluster.preferences.icon) {
-
+      return <Button tooltip="Revert back to default icon" accent onClick={() => this.onIconPick([])}>Clear</Button>
-    if (cluster.preferences.icon) {
-      return <Button accent onClick={() => this.onIconPick([])}>Clear</Button>
     }
   }
 
   render() {
-    return <>
+    const label = (
-      <h4>Cluster Icon</h4>
+      <>
-      <p>Set cluster icon. By default it is automatically generated. {this.getIconRight()}</p>
+        <ClusterIcon
-      <div className="center">
+          cluster={this.props.cluster}
+          showErrors={false}
+          showTooltip={false}
+        />
+        {"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/*"
-          labelText="Browse for new icon..." 
+            label={label}
             onOverSizeLimit={OverSizeLimitStyle.FILTER}
             handler={this.onIconPick}
           />
           {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>
-    }
   }
 }

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

@@ -4,11 +4,8 @@
   }
 
   label {
-        display: inline-block;
+    display: inline-flex;
-        border: medium solid;
-        padding: 10px;
-        border-radius: 5px;
     cursor: pointer;
-        margin: 5px;
+    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"