Fine-tuning Extensions view

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

src/renderer/components/+extensions/extensions.scss

@@ -1,10 +1,5 @@
 .PageLayout.Extensions {
   $spacing: $padding * 2;
-  --width: 50%;
-
-  h2 {
-    margin-bottom: $padding;
-  }
 
   .no-extensions {
     --flex-gap: #{$padding};
@@ -16,17 +11,28 @@
   }
 
   .install-extension {
-    margin: $spacing * 2 0;
+    margin-bottom: $padding * 4;
   }
 
   .installed-extensions {
     --flex-gap: #{$spacing};
 
     .extension {
+      --flex-gap: #{$padding / 2};
+
       padding: $padding $spacing;
       background: $layoutBackground;
       border-radius: $radius;
 
+      .contents {
+        padding-right: $padding * 2;
+
+        .Badge {
+          font-size: smaller;
+          overflow: visible;
+        }
+      }
+
       .actions > button:not(:last-child) {
         margin-right: $spacing / 2;
       }
@@ -42,10 +48,8 @@
     }
   }
 
-  .SearchInput {
+  .SearchInput > label .Icon {
-    --spacing: 10px;
+    height: 21px; // conform with icons within Install input
-
-    max-width: none;
   }
 }
 

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

@@ -12,12 +12,12 @@ import { extensionLoader } from "../../../extensions/extension-loader";
 import { extensionDisplayName, LensExtensionManifest, sanitizeExtensionName } from "../../../extensions/lens-extension";
 import logger from "../../../main/logger";
 import { prevDefault } from "../../utils";
+import { Badge } from "../badge";
 import { Button } from "../button";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Icon } from "../icon";
 import { DropFileInput, Input, InputValidator, InputValidators, SearchInput } from "../input";
 import { PageLayout } from "../layout/page-layout";
-import { SubTitle } from "../layout/sub-title";
 import { Notifications } from "../notifications";
 import { Spinner } from "../spinner/spinner";
 import { TooltipPosition } from "../tooltip";
@@ -449,9 +449,11 @@ export class Extensions extends React.Component {
 
       return (
         <div key={id} className="extension flex gaps align-center">
-          <div className="box grow">
+          <div className="contents box grow">
-            <h5>{name}</h5>
+            <div className="flex gaps align-center">
-            <h6>{version}</h6>
+              <h5 className="extension-name">{name}</h5>
+              <Badge label={version}/>
+            </div>
             <p>{description}</p>
           </div>
           <div className="actions">
@@ -482,20 +484,20 @@ export class Extensions extends React.Component {
   }
 
   render() {
-    const topHeader = <h2>Manage Lens Extensions</h2>;
+    const topHeader = <h1>Lens Extensions</h1>;
     const { installPath } = this;
 
     return (
       <DropFileInput onDropFiles={this.installOnDrop}>
         <PageLayout showOnTop className="Extensions" header={topHeader} contentGaps={false}>
-          <h2>Lens Extensions</h2>
+          <section>
+            <h1>Extensions</h1>
             <div>
               Add new features and functionality via Lens Extensions.
               Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank" rel="noreferrer">learn more</a> or see the list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
             </div>
-
+            <section className="install-extension">
-          <div className="install-extension flex column gaps">
+              <h2>Install</h2>
-            <SubTitle title="Install Extension:"/>
               <div className="extension-input flex box gaps align-center">
                 <Input
                   className="box grow"
@@ -528,17 +530,21 @@ export class Extensions extends React.Component {
               <small className="hint">
                 <b>Pro-Tip</b>: you can also drag-n-drop tarball-file to this area
               </small>
-          </div>
+            </section>
 
+            <section>
               <h2>Installed Extensions</h2>
               <div className="installed-extensions flex column gaps">
                 <SearchInput
+                  theme="round-black"
                   placeholder="Search installed extensions by name or description"
                   value={this.search}
                   onChange={(value) => this.search = value}
                 />
                 {extensionDiscovery.isLoaded ? this.renderExtensions() : <div className="spinner-wrapper"><Spinner/></div>}
               </div>
+            </section>
+          </section>
         </PageLayout>
       </DropFileInput>
     );