Fine-tuning general section

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

src/renderer/components/+extensions/extensions.tsx

@@ -45,6 +45,7 @@ import { Install } from "./install";
 import { InstalledExtensions } from "./installed-extensions";
 import { Notice } from "./notice";
 import { SettingLayout } from "../layout/setting-layout";
+import { docsUrl } from "../../../common/vars";
 
 function getMessageFromError(error: any): string {
   if (!error || typeof error !== "object") {
@@ -514,7 +515,13 @@ export class Extensions extends React.Component<Props> {
           <section>
             <h1>Extensions</h1>
 
-            <Notice/>
+            <Notice>
+              <p>
+                Add new features via Lens Extensions.{" "}
+                Check out <a href={`${docsUrl}/extensions/`} target="_blank" rel="noreferrer">docs</a>{" "}
+                and list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
+              </p>
+            </Notice>
 
             <Install
               supportedFormats={supportedFormats}

src/renderer/components/+extensions/notice.tsx

@@ -20,17 +20,14 @@
  */
 
 import styles from "./notice.module.css";
-import React from "react";
+import React, { DOMAttributes } from "react";
-import { docsUrl } from "../../../common/vars";
 
-export function Notice() {
+interface Props extends DOMAttributes<any> {}
+
+export function Notice(props: Props) {
   return (
     <div className={styles.notice}>
-      <p>
+      {props.children}
-        Add new features via Lens Extensions.{" "}
-        Check out <a href={`${docsUrl}/extensions/`} target="_blank" rel="noreferrer">docs</a>{" "}
-        and list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
-      </p>
     </div>
   );
 }

src/renderer/components/cluster-settings/cluster-settings.tsx

@@ -39,12 +39,17 @@ export function GeneralSettings({ entity }: EntitySettingViewProps) {
 
   return (
     <section>
+      <section className="small">
+        <p>General Cluster settings.</p>
+      </section>
       <section>
         <components.ClusterNameSetting cluster={cluster} />
       </section>
+      <hr/>
       <section>
         <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
       </section>
+      <hr/>
       <section>
         <components.ClusterKubeconfig cluster={cluster} />
       </section>

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

@@ -21,7 +21,6 @@
 
 import React from "react";
 import type { Cluster } from "../../../../main/cluster";
-//import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
 import { boundMethod } from "../../../utils";
 import { Button } from "../../button";
 import { observable } from "mobx";
@@ -67,15 +66,12 @@ export class ClusterIconSetting extends React.Component<Props> {
   }
 
   getClearButton() {
-    if (this.props.cluster.preferences.icon) {
+    return <Button
-      return <Button
+      label="Clear"
-        label="Clear"
+      onClick={() => this.onIconPick([])}
-        tooltip="Revert back to default icon"
+      disabled={!this.props.cluster.preferences.icon}
-        onClick={() => this.onIconPick([])}
+      className="ml-5"
-      />;
+    />;
-    }
-
-    return null;
   }
 
   render() {
@@ -87,15 +83,16 @@ export class ClusterIconSetting extends React.Component<Props> {
           title={entity.metadata.name}
           source={entity.metadata.source}
           src={entity.spec.icon?.src}
+          size={50}
         />
-        <span style={{marginRight: "var(--unit)"}}>Browse for new icon...</span>
+        <Button className="ml-5">Upload Icon</Button>
       </>
     );
 
     return (
       <>
         <SubTitle title="Cluster Icon" />
-        <div className="file-loader">
+        <div className="file-loader flex flex-row items-center mt-2">
           <FilePicker
             accept="image/*"
             label={label}

src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx

@@ -25,6 +25,7 @@ import { observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { boundMethod } from "../../../../common/utils";
 import { shell } from "electron";
+import { Notice } from "../../+extensions/notice";
 
 interface Props {
   cluster: Cluster;
@@ -42,14 +43,12 @@ export class ClusterKubeconfig extends React.Component<Props> {
 
   render() {
     return (
-      <>
+      <Notice>
         <SubTitle title="Kubeconfig" />
-
         <span>
           <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>
         </span>
-
+      </Notice>
-      </>
     );
   }
 }

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

@@ -227,12 +227,12 @@ export class FilePicker extends React.Component<Props> {
 
   getIconRight(): React.ReactNode {
     switch (this.status) {
-      case FileInputStatus.CLEAR:
-        return <Icon className="clean" material="cloud_upload"></Icon>;
       case FileInputStatus.PROCESSING:
         return <Spinner />;
       case FileInputStatus.ERROR:
         return <Icon material="error" title={this.errorText}></Icon>;
+      default:
+        return null;
     }
   }
 }

src/renderer/components/layout/setting-layout.scss

@@ -163,7 +163,7 @@
           }
 
           .Icon {
-            color: var(--textColorSecondary);
+            color: var(--textColorTertiary);
           }
         }