Styling helm chart section

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

src/renderer/components/+preferences/helm-charts.scss

@@ -1,11 +1,21 @@
 .HelmCharts {
   .repos {
-    margin-top: var(--margin);
+    margin-top: 20px;
 
-    .Badge {
+    .repo {
-      display: flex;
+      background: var(--inputControlBackground);
-      margin-bottom: 1px!important;
+      border-radius: 4px;
-      padding: 6px 8px;
+      padding: 12px 16px;
+      box-shadow: 0 0 0 1px var(--secondaryBackground);
+
+      .repoName {
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+
+      .repoUrl {
+        color: var(--textColorDimmed);
+      }
     }
   }
 }

src/renderer/components/+preferences/helm-charts.tsx

@@ -4,12 +4,10 @@ import React from "react";
 import { action, computed, observable } from "mobx";
 
 import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
-import { Badge } from "../badge";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Select, SelectOption } from "../select";
-import { Tooltip } from "../tooltip";
 import { AddHelmRepoDialog } from "./add-helm-repo-dialog";
 import { observer } from "mobx-react";
 
@@ -116,20 +114,18 @@ export class HelmCharts extends React.Component {
         <AddHelmRepoDialog onAddRepo={() => this.loadRepos()}/>
         <div className="repos flex gaps column">
           {Array.from(this.addedRepos).map(([name, repo]) => {
-            const tooltipId = `message-${name}`;
-
             return (
-              <Badge key={name} className="added-repo flex gaps align-center justify-space-between">
+              <div key={name} className="repo flex gaps align-center justify-space-between">
-                <span id={tooltipId} className="repo">{name}</span>
+                <div>
+                  <div className="repoName">{name}</div>
+                  <div className="repoUrl">{repo.url}</div>
+                </div>
                 <Icon
                   material="delete"
                   onClick={() => this.removeRepo(repo)}
                   tooltip="Remove"
                 />
-                <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
+              </div>
-                  {repo.url}
-                </Tooltip>
-              </Badge>
             );
           })}
         </div>

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

@@ -133,9 +133,6 @@ export class Preferences extends React.Component {
                 onChange={v => this.shell = v}
                 onBlur={() => preferences.shell = this.shell}
               />
-              <div className="hint">
-                The path of the shell that the terminal uses.
-              </div>
             </section>
           </section>
         )}

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

@@ -98,6 +98,12 @@
     > .content {
       width: var(--width);
       padding: 60px 40px 80px;
+
+      > section {
+        &:last-of-type {
+          margin-bottom: 80px;
+        }
+      }
     }
 
     > .toolsRegion {

src/renderer/themes/lens-light.json

@@ -12,7 +12,7 @@
     "textColorPrimary": "#555555",
     "textColorSecondary": "#51575d",
     "textColorAccent": "#333333",
-    "textColorDimmed": "#8e92978c",
+    "textColorDimmed": "#5557598c",
     "borderColor": "#c9cfd3",
     "borderFaintColor": "#dfdfdf",
     "mainBackground": "#f1f1f1",