Cleaning settings page view (#3156)

* Making inputs consistent

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

* Fixing hover effect in inputs

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

* Adding separators to sidebar menu

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

* Fine-tuning general section

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

* Fine-tuning hidden metrics area

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

* EntityIcon in Settings sidebar

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

* Moving cluster icon settings on top

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

* Shrink Apply button a big

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

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