From 90c67f9a1632b9b42b52e4691af9542fe13ef850 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 21 Jun 2021 16:50:34 +0300
Subject: [PATCH] Making inputs consistent

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../cluster-settings/cluster-settings.tsx     |  1 +
 .../cluster-accessible-namespaces.tsx         |  1 +
 .../components/cluster-metrics-setting.tsx    |  1 +
 .../components/cluster-prometheus-setting.tsx | 32 ++++++++++--------
 .../editable-list/editable-list.scss          |  5 ++-
 .../editable-list/editable-list.tsx           | 10 +++---
 .../components/layout/setting-layout.scss     | 33 ++++++++-----------
 .../components/layout/setting-layout.tsx      |  2 +-
 8 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/renderer/components/cluster-settings/cluster-settings.tsx b/src/renderer/components/cluster-settings/cluster-settings.tsx
index ed01ce4fb7..04577b0236 100644
--- a/src/renderer/components/cluster-settings/cluster-settings.tsx
+++ b/src/renderer/components/cluster-settings/cluster-settings.tsx
@@ -106,6 +106,7 @@ export function MetricsSettings({ entity }: EntitySettingViewProps) {
       <section>
         <components.ClusterPrometheusSetting cluster={cluster} />
       </section>
+      <hr/>
       <section>
         <components.ClusterMetricsSetting cluster={cluster} />
       </section>
diff --git a/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx
index ab2a03f73c..6794646bea 100644
--- a/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx
@@ -54,6 +54,7 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
             this.namespaces.delete(oldNamesapce);
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
           }}
+          inputTheme="round-black"
         />
         <small className="hint">
         This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.
diff --git a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
index 21a6b3242d..a30fb823ae 100644
--- a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
@@ -100,6 +100,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
           options={Object.values(ClusterMetricsResourceType)}
           onChange={this.onChangeSelect}
           formatOptionLabel={this.formatOptionLabel}
+          themeName="lens"
         />
         <Button
           primary
diff --git a/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx
index dfecec3573..a74606b1ec 100644
--- a/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx
@@ -138,26 +138,30 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
                     this.onSaveProvider();
                   }}
                   options={this.options}
+                  themeName="lens"
                 />
                 <small className="hint">What query format is used to fetch metrics from Prometheus</small>
               </>
           }
         </section>
         {this.canEditPrometheusPath && (
-          <section>
-            <p>Prometheus service address.</p>
-            <Input
-              theme="round-black"
-              value={this.path}
-              onChange={(value) => this.path = value}
-              onBlur={this.onSavePath}
-              placeholder="<namespace>/<service>:<port>"
-            />
-            <small className="hint">
-              An address to an existing Prometheus installation{" "}
-              ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
-            </small>
-          </section>
+          <>
+            <hr/>
+            <section>
+              <SubTitle title="Prometheus service address" />
+              <Input
+                theme="round-black"
+                value={this.path}
+                onChange={(value) => this.path = value}
+                onBlur={this.onSavePath}
+                placeholder="<namespace>/<service>:<port>"
+              />
+              <small className="hint">
+                An address to an existing Prometheus installation{" "}
+                ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
+              </small>
+            </section>
+          </>
         )}
       </>
     );
diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index b30fdf7f57..0f88d009d9 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -23,7 +23,10 @@
   .el-contents {
     display: flex;
     flex-direction: column;
-    margin: $padding 0px;
+
+    &:not(:empty) {
+      margin: $padding 0px;
+    }
 
     .el-value-remove {
       .Icon {
diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx
index ec31a2586e..0b427b6f2a 100644
--- a/src/renderer/components/editable-list/editable-list.tsx
+++ b/src/renderer/components/editable-list/editable-list.tsx
@@ -25,7 +25,7 @@ import { observer } from "mobx-react";
 import React from "react";
 
 import { Icon } from "../icon";
-import { Input } from "../input";
+import { Input, InputProps } from "../input";
 import { boundMethod } from "../../utils";
 
 export interface Props<T> {
@@ -37,11 +37,13 @@ export interface Props<T> {
   // An optional prop used to convert T to a displayable string
   // defaults to `String`
   renderItem?: (item: T, index: number) => React.ReactNode,
+  inputTheme?: InputProps["theme"];
 }
 
 const defaultProps: Partial<Props<any>> = {
   placeholder: "Add new item...",
-  renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>
+  renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>,
+  inputTheme: "round"
 };
 
 @observer
@@ -59,13 +61,13 @@ export class EditableList<T> extends React.Component<Props<T>> {
   }
 
   render() {
-    const { items, remove, renderItem, placeholder } = this.props;
+    const { items, remove, renderItem, placeholder, inputTheme } = this.props;
 
     return (
       <div className="EditableList">
         <div className="el-header">
           <Input
-            theme="round"
+            theme={inputTheme}
             onSubmit={this.onSubmit}
             placeholder={placeholder}
           />
diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 198e7c9cb6..e59c6e89f7 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -20,17 +20,19 @@
  */
 
 .SettingLayout {
-  --width: 75%;
-  --nav-width: 180px;
   --nav-column-width: 30vw;
   width: 100%;
   height: 100%;
-  display: grid !important;
+  display: grid;
   color: var(--settingsColor);
-
-  @include media("<1000px") {
-    --width: 85%;
-  }
+  position: fixed;
+  z-index: 13!important;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: unset;
+  background-color: var(--settingsBackground);
 
   &.showNavigation {
     grid-template-columns: var(--nav-column-width) 1fr;
@@ -40,18 +42,6 @@
     }
   }
 
-  // covers whole app view area
-  &.showOnTop {
-    position: fixed !important; // allow to cover ClustersMenu
-    z-index: 13;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    height: unset;
-    background-color: var(--settingsBackground);
-  }
-
   > .sidebarRegion {
     display: flex;
     justify-content: flex-end;
@@ -124,7 +114,9 @@
     justify-content: center;
 
     > .content {
-      width: var(--width);
+      width: 100%;
+      max-width: 740px;
+      min-width: 460px;
       padding: 60px 40px 80px;
 
       > section {
@@ -210,6 +202,7 @@
     .hint {
       margin-top: 8px;
       font-size: 14px;
+      line-height: 20px;
     }
 
     .SubTitle {
diff --git a/src/renderer/components/layout/setting-layout.tsx b/src/renderer/components/layout/setting-layout.tsx
index 45912f262c..53e54e07ac 100644
--- a/src/renderer/components/layout/setting-layout.tsx
+++ b/src/renderer/components/layout/setting-layout.tsx
@@ -81,7 +81,7 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
       contentClass, provideBackButtonNavigation,
       contentGaps, navigation, children, ...elemProps
     } = this.props;
-    const className = cssNames("SettingLayout", "showOnTop", { showNavigation: navigation }, this.props.className);
+    const className = cssNames("SettingLayout", { showNavigation: navigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>