Styling Kubernetes tab

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

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"/>
+      <section className="small">
-      <Checkbox
+        <SubTitle title="Kubectl binary download"/>
-        label="Download kubectl binaries matching the Kubernetes cluster version"
+        <FormSwitch
-        value={preferences.downloadKubectlBinaries}
+          control={
-        onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
+            <Switcher
-      />
+              checked={preferences.downloadKubectlBinaries}
-      <SubTitle title="Download mirror" />
+              onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
-      <Select
+              name="kubectl-download"
-        placeholder="Download mirror for kubectl"
+            />
-        options={downloadMirrorOptions}
+          }
-        value={preferences.downloadMirror}
+          label="Download kubectl binaries matching the Kubernetes cluster version"
-        onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+        />
-        disabled={!preferences.downloadKubectlBinaries}
+      </section>
-      />
+
-      <SubTitle title="Directory for binaries" />
+      <hr className="small"/>
-      <Input
+
-        theme="round-black"
+      <section className="small">
-        value={downloadPath}
+        <SubTitle title="Download mirror" />
-        placeholder={userStore.getDefaultKubectlPath()}
+        <Select
-        validators={pathValidator}
+          placeholder="Download mirror for kubectl"
-        onChange={setDownloadPath}
+          options={downloadMirrorOptions}
-        onBlur={save}
+          value={preferences.downloadMirror}
-        disabled={!preferences.downloadKubectlBinaries}
+          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
-      />
+          disabled={!preferences.downloadKubectlBinaries}
-      <small className="hint">
+        />
-        The directory to download binaries into.
+      </section>
-      </small>
+
-      <SubTitle title="Path to kubectl binary" />
+      <hr className="small"/>
-      <Input
+
-        theme="round-black"
+      <section className="small">
-        placeholder={bundledKubectlPath()}
+        <SubTitle title="Directory for binaries" />
-        value={binariesPath}
+        <Input
-        validators={pathValidator}
+          theme="round-black"
-        onChange={setBinariesPath}
+          value={downloadPath}
-        onBlur={save}
+          placeholder={userStore.getDefaultKubectlPath()}
-        disabled={preferences.downloadKubectlBinaries}
+          validators={pathValidator}
-      />
+          onChange={setDownloadPath}
-      <small className="hint">
+          onBlur={save}
-        The path to the kubectl binary on the system.
+          disabled={!preferences.downloadKubectlBinaries}
-      </small>
+        />
+        <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>
     </>
   );
 });

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/>

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;
 

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 {

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">