Preferences page redesign (#2446)

* Removing header part

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

* Restyling PageLayout

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

* Restyling .round-black Input

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

* Adding Tab navigation to Preferences

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

* Styling Application tab

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

* Add esc button

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

* Add media queries

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

* Introducting Switcher component

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

* Styling Proxy tab

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

* Moving start-up switcher to Other tab

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

* Styling Kubernetes tab

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

* Styling Extensions tab

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

* Styling inputs and selects

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

* Styling helm chart section

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

* Create a telemetry tab with extensions

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

* Adding lens Select theme

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

* Remove Other tab

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

* Fix mainBackground color

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

* Simplifying Tabs boilerplate

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

* Replacing button font

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

* Fixing one-column settings layout

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

* Fixing integration tests

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

* Fixin tests harder

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

* Showing bottom bar in workspaces

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

src/renderer/components/layout/page-layout.tsx

@@ -3,19 +3,18 @@ import "./page-layout.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
-import { Icon } from "../icon";
 import { navigation } from "../../navigation";
-import { NavigationTree, RecursiveTreeView } from "../tree-view";
+import { Icon } from "../icon";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
-  header: React.ReactNode;
+  header?: React.ReactNode;
   headerClass?: IClassName;
   contentClass?: IClassName;
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
   showOnTop?: boolean; // covers whole app view
-  navigation?: NavigationTree[];
+  navigation?: React.ReactNode;
   back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
@@ -58,32 +57,34 @@ export class PageLayout extends React.Component<PageLayoutProps> {
 
   render() {
     const {
-      contentClass, header, headerClass, provideBackButtonNavigation,
+      contentClass, headerClass, provideBackButtonNavigation,
       contentGaps, showOnTop, navigation, children, ...elemProps
     } = this.props;
     const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>
-        <div className={cssNames("header flex gaps align-center", headerClass)}>
-          {header}
-          {provideBackButtonNavigation && (
-            <Icon
-              big material="close"
-              className="back box right"
-              onClick={this.back}
-            />
-          )}
-        </div>
         { navigation && (
-          <nav className="content-navigation">
-            <RecursiveTreeView data={navigation}/>
+          <nav className="sidebarRegion">
+            <div className="sidebar">
+              {navigation}
+            </div>
           </nav>
         )}
-        <div className="content-wrapper" id="ScrollSpyRoot">
+        <div className="contentRegion" id="ScrollSpyRoot">
           <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
             {children}
           </div>
+          <div className="toolsRegion">
+            <div className="fixedTools">
+              <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
+                <Icon material="close"/>
+              </div>
+              <div className="esc" aria-hidden="true">
+                ESC
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     );