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/+extensions/extensions.tsx

@@ -45,6 +45,7 @@ import { Install } from "./install";
 import { InstalledExtensions } from "./installed-extensions";
 import { Notice } from "./notice";
 import { SettingLayout } from "../layout/setting-layout";
+import { docsUrl } from "../../../common/vars";
 
 function getMessageFromError(error: any): string {
   if (!error || typeof error !== "object") {
@@ -514,7 +515,13 @@ export class Extensions extends React.Component<Props> {
           <section>
             <h1>Extensions</h1>
 
-            <Notice/>
+            <Notice>
+              <p>
+                Add new features via Lens Extensions.{" "}
+                Check out <a href={`${docsUrl}/extensions/`} target="_blank" rel="noreferrer">docs</a>{" "}
+                and list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
+              </p>
+            </Notice>
 
             <Install
               supportedFormats={supportedFormats}

src/renderer/components/+extensions/notice.tsx

@@ -20,17 +20,14 @@
  */
 
 import styles from "./notice.module.css";
-import React from "react";
-import { docsUrl } from "../../../common/vars";
+import React, { DOMAttributes } from "react";
 
-export function Notice() {
+interface Props extends DOMAttributes<any> {}
+
+export function Notice(props: Props) {
   return (
     <div className={styles.notice}>
-      <p>
-        Add new features via Lens Extensions.{" "}
-        Check out <a href={`${docsUrl}/extensions/`} target="_blank" rel="noreferrer">docs</a>{" "}
-        and list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
-      </p>
+      {props.children}
     </div>
   );
 }