From b769335dd28368ad36ffec8292dfa3779b3bdfa8 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 2 Apr 2021 11:57:36 +0300
Subject: [PATCH] Styling Kubernetes tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+preferences/kubectl-binaries.tsx         | 101 +++++++++++-------
 .../components/+preferences/preferences.tsx   |   6 +-
 src/renderer/components/input/input.scss      |   2 +-
 .../components/layout/page-layout.scss        |   3 +-
 .../components/layout/page-layout.tsx         |   2 +-
 5 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/src/renderer/components/+preferences/kubectl-binaries.tsx b/src/renderer/components/+preferences/kubectl-binaries.tsx
index f373c101c6..40a56da5e2 100644
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/src/renderer/components/+preferences/kubectl-binaries.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import { Checkbox } from "../checkbox";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
 import { UserPreferences, userStore } from "../../../common/user-store";
 import { observer } from "mobx-react";
 import { bundledKubectlPath } from "../../../main/kubectl";
 import { SelectOption, Select } from "../select";
+import { FormSwitch, Switcher } from "../switch";
 
 export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
   const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
@@ -24,46 +24,65 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
 
   return (
     <>
-      <SubTitle title="Automatic kubectl binary download"/>
-      <Checkbox
-        label="Download kubectl binaries matching the Kubernetes cluster version"
-        value={preferences.downloadKubectlBinaries}
-        onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
-      />
-      <SubTitle title="Download mirror" />
-      <Select
-        placeholder="Download mirror for kubectl"
-        options={downloadMirrorOptions}
-        value={preferences.downloadMirror}
-        onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
-        disabled={!preferences.downloadKubectlBinaries}
-      />
-      <SubTitle title="Directory for binaries" />
-      <Input
-        theme="round-black"
-        value={downloadPath}
-        placeholder={userStore.getDefaultKubectlPath()}
-        validators={pathValidator}
-        onChange={setDownloadPath}
-        onBlur={save}
-        disabled={!preferences.downloadKubectlBinaries}
-      />
-      <small className="hint">
-        The directory to download binaries into.
-      </small>
-      <SubTitle title="Path to kubectl binary" />
-      <Input
-        theme="round-black"
-        placeholder={bundledKubectlPath()}
-        value={binariesPath}
-        validators={pathValidator}
-        onChange={setBinariesPath}
-        onBlur={save}
-        disabled={preferences.downloadKubectlBinaries}
-      />
-      <small className="hint">
-        The path to the kubectl binary on the system.
-      </small>
+      <section className="small">
+        <SubTitle title="Kubectl binary download"/>
+        <FormSwitch
+          control={
+            <Switcher
+              checked={preferences.downloadKubectlBinaries}
+              onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
+              name="kubectl-download"
+            />
+          }
+          label="Download kubectl binaries matching the Kubernetes cluster version"
+        />
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Download mirror" />
+        <Select
+          placeholder="Download mirror for kubectl"
+          options={downloadMirrorOptions}
+          value={preferences.downloadMirror}
+          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+          disabled={!preferences.downloadKubectlBinaries}
+        />
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Directory for binaries" />
+        <Input
+          theme="round-black"
+          value={downloadPath}
+          placeholder={userStore.getDefaultKubectlPath()}
+          validators={pathValidator}
+          onChange={setDownloadPath}
+          onBlur={save}
+          disabled={!preferences.downloadKubectlBinaries}
+        />
+        <div className="hint">
+          The directory to download binaries into.
+        </div>
+      </section>
+
+      <hr className="small"/>
+
+      <section className="small">
+        <SubTitle title="Path to kubectl binary" />
+        <Input
+          theme="round-black"
+          placeholder={bundledKubectlPath()}
+          value={binariesPath}
+          validators={pathValidator}
+          onChange={setBinariesPath}
+          onBlur={save}
+          disabled={preferences.downloadKubectlBinaries}
+        />
+      </section>
     </>
   );
 });
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 9616ff95d7..f550cda378 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -181,13 +181,11 @@ export class Preferences extends React.Component {
 
         {this.activeTab == PreferencesTab.Kubernetes && (
           <section id="kubernetes">
-            <section>
-              <h1>Kubernetes</h1>
-            </section>
             <section id="kubectl">
-              <h2>Kubectl binary</h2>
+              <h2>Kubernetes</h2>
               <KubectlBinaries preferences={preferences}/>
             </section>
+            <hr/>
             <section id="helm">
               <h2>Helm Charts</h2>
               <HelmCharts/>
diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss
index 15a4c8bc77..71f8e3dc98 100644
--- a/src/renderer/components/input/input.scss
+++ b/src/renderer/components/input/input.scss
@@ -97,7 +97,7 @@
 
       label {
         background: #00000021;
-        border: 1px solid #20222580;
+        border: 1px solid #202225bf;
         border-radius: 4px;
         padding: $padding;
 
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index c1ce85b791..26ba540cea 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -145,7 +145,7 @@
 
   .Select {
     &__control {
-      box-shadow: 0 0 0 1px #20222580;
+      box-shadow: 0 0 0 1px #202225bf;
       background: #00000021;
     }
 
@@ -196,6 +196,7 @@
       margin-bottom: 8px;
       padding-bottom: 0;
       font-size: 12px;
+      line-height: 1;
     }
 
     hr {
diff --git a/src/renderer/components/layout/page-layout.tsx b/src/renderer/components/layout/page-layout.tsx
index 784d4ccf7c..d3af904c6d 100644
--- a/src/renderer/components/layout/page-layout.tsx
+++ b/src/renderer/components/layout/page-layout.tsx
@@ -77,7 +77,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
           </div>
           <div className="toolsRegion">
             <div className="fixedTools">
-              <div className="closeBtn" role="button" aria-label="Close">
+              <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
                 <Icon material="close"/>
               </div>
               <div className="esc" aria-hidden="true">