Restyling Preferences section

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

src/renderer/components/+preferences/preferences.scss

@@ -1,23 +1,51 @@
 .Preferences {
-  h2 {
+  position: fixed!important; // Allows to cover ClustersMenu
-    &:not(:first-child) {
+  z-index: 1;
-      margin-top: $padding * 3;
-    }
-  }
 
-  .info-block {
+  .WizardLayout {
-    --flex-gap: #{$padding};
+    grid-template-columns: unset;
+    grid-template-rows: 76px 1fr;
+    padding: 0;
+
+    .content-col {
+      background-color: transparent;
+      padding: $padding * 8 0;
+
+      h2 {
+        margin-bottom: $margin * 2;
+
+        &:not(:first-child) {
+          margin-top: $margin * 3;
+        }
       }
 
       .repos {
-    --flex-gap: #{$padding};
+        position: relative;
-
-    > .title {
-      font-style: italic;
-    }
 
         .Badge {
-      margin: $padding / 2;
+          display: flex;
+          margin: 0;
+          margin-bottom: 1px;
+          padding: $padding $padding * 2;
+        }
+      }
+
+      .hint {
+        margin-top: -$margin;
+      }
+    }
+  }
+
+  .is-mac & {
+    .WizardLayout .head-col {
+      padding-top: 32px;
+      overflow: hidden;
+    }
+  }
+
+  .Select {
+    &__control {
+      box-shadow: 0 0 0 1px $borderFaintColor;
     }
   }
 }

src/renderer/components/+preferences/preferences.tsx

@@ -1,5 +1,5 @@
 import "./preferences.scss"
-import React, { Fragment } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { action, computed, observable } from "mobx";
 import { t, Trans } from "@lingui/macro";
@@ -15,6 +15,8 @@ import { Notifications } from "../notifications";
 import { Badge } from "../badge";
 import { Spinner } from "../spinner";
 import { themeStore } from "../../theme.store";
+import { history } from "../../navigation";
+import { Tooltip } from "../tooltip";
 
 @observer
 export class Preferences extends React.Component {
@@ -103,26 +105,17 @@ export class Preferences extends React.Component {
     )
   }
 
-  renderInfo() {
-    return (
-      <Fragment>
-        <h2>
-          <Trans>Preferences</Trans>
-        </h2>
-        <div className="info-block flex gaps align-flex-start">
-          <Icon small material="info"/>
-          <p>
-            <Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
-          </p>
-        </div>
-      </Fragment>
-    )
-  }
-
   render() {
     const { preferences } = userStore;
+    const header = (
+      <>
+        <h2>Preferences</h2>
+        <Icon material="close" big onClick={history.goBack}/>
+      </>
+    );
     return (
-      <WizardLayout className="Preferences" infoPanel={this.renderInfo()}>
+      <div className="Preferences">
+        <WizardLayout header={header} centered>
           <h2><Trans>Color Theme</Trans></h2>
           <Select
             options={this.themeOptions}
@@ -148,29 +141,29 @@ export class Preferences extends React.Component {
             formatOptionLabel={this.formatHelmOptionLabel}
             controlShouldRenderValue={false}
           />
-        <div className="repos flex gaps align-center">
+          <div className="repos flex gaps column">
-          <div className="title">
+            {this.helmLoading && <Spinner center />}
-            <Trans>Added repos:</Trans>
-          </div>
-          <div className="repos-list">
-            {this.helmLoading && <Spinner/>}
             {Array.from(this.helmAddedRepos).map(([name, repo]) => {
+              const tooltipId = `message-${name}`;
               return (
-                <Badge key={name} className="added-repo flex gaps align-center" title={repo.url}>
+                <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
-                  <span className="repo">{name}</span>
+                  <span id={tooltipId} className="repo">{name}</span>
                   <Icon
-                    material="remove_circle_outline"
+                    material="delete"
                     onClick={() => this.removeRepo(repo)}
                     tooltip={<Trans>Remove</Trans>}
                   />
+                  <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
+                    {repo.url}
+                  </Tooltip>
                 </Badge>
               )
             })}
           </div>
-        </div>
 
           <h2><Trans>HTTP Proxy</Trans></h2>
           <Input
+            theme="round-black"
             placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
             value={preferences.httpsProxy || ""}
             onChange={v => preferences.httpsProxy = v}
@@ -201,6 +194,7 @@ export class Preferences extends React.Component {
             <Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
           </small>
         </WizardLayout>
-    )
+      </div>
+    );
   }
 }