Making inputs consistent

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

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>

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.

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

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>
+            <hr/>
-            <Input
+            <section>
-              theme="round-black"
+              <SubTitle title="Prometheus service address" />
-              value={this.path}
+              <Input
-              onChange={(value) => this.path = value}
+                theme="round-black"
-              onBlur={this.onSavePath}
+                value={this.path}
-              placeholder="<namespace>/<service>:<port>"
+                onChange={(value) => this.path = value}
-            />
+                onBlur={this.onSavePath}
-            <small className="hint">
+                placeholder="<namespace>/<service>:<port>"
-              An address to an existing Prometheus installation{" "}
+              />
-              ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
+              <small className="hint">
-            </small>
+                An address to an existing Prometheus installation{" "}
-          </section>
+                ({"<namespace>/<service>:<port>"}). {productName} tries to auto-detect address if left empty.
+              </small>
+            </section>
+          </>
         )}
       </>
     );

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 {

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

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);
-
+  position: fixed;
-  @include media("<1000px") {
+  z-index: 13!important;
-    --width: 85%;
+  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 {

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