Fine-tune styles of Extensions page (#5921)

src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -270,7 +270,7 @@ exports[`extensions - navigation using application menu when navigating to exten
                 Extensions
               </h1>
               <div
-                class="notice mb-14 mt-3"
+                class="notice"
               >
                 <p>
                   Add new features via Lens Extensions. Check out the 
@@ -292,9 +292,7 @@ exports[`extensions - navigation using application menu when navigating to exten
                   .
                 </p>
               </div>
-              <section
+              <section>
-                class="mt-2"
-              >
                 <div
                   class="SubTitle"
                 >
@@ -302,16 +300,12 @@ exports[`extensions - navigation using application menu when navigating to exten
                    
                 </div>
                 <div
-                  class="flex"
+                  class="inputs"
-                >
-                  <div
-                    class="flex-1"
-                  />
-                  <div
-                    class="flex-initial"
                 >
+                  <div />
+                  <div>
                     <button
-                      class="Button w-80 h-full primary"
+                      class="Button button primary"
                       type="button"
                     >
                       Install
@@ -319,7 +313,7 @@ exports[`extensions - navigation using application menu when navigating to exten
                   </div>
                 </div>
                 <small
-                  class="mt-3"
+                  class="proTip"
                 >
                   <b>
                     Pro-Tip

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.notice {
+  margin-top: var(--margin);
+  margin-bottom: calc(var(--margin) * 3);
+}

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

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-.PageLayout.Extensions {
-  $spacing: $padding * 2;
-  width: 100%;
-
-  .contentRegion {
-    .content {
-      max-width: 740px;
-
-      > section {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.InstallingExtensionNotification {
-  .remove-folder-warning {
-    font-size: $font-size-small;
-    font-style: italic;
-    opacity: .8;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    code {
-      display: inline;
-      color: inherit;
-    }
-  }
-
-  .Button {
-    background-color: unset;
-    border: 1px solid currentColor;
-    box-shadow: none !important;
-  }
-}

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

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./extensions.scss";
+import styles from "./extensions.module.scss";
 import type {
   IComputedValue } from "mobx";
 import {
@@ -82,7 +82,7 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
           <section>
             <h1>Extensions</h1>
 
-            <Notice className="mb-14 mt-3">
+            <Notice className={styles.notice}>
               <p>
                 {"Add new features via Lens Extensions. Check out the "}
                 <a
@@ -112,8 +112,6 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
               installPath={this.installPath}
             />
 
-            {userExtensions.length > 0 && <hr />}
-
             <InstalledExtensions
               extensions={userExtensions}
               enable={this.props.enableExtension}

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

@@ -1,4 +1,29 @@
-.icon {
+/**
-  @apply h-5 w-5 mr-3 cursor-pointer;
+ * Copyright (c) OpenLens Authors. All rights reserved.
-  background-color: transparent!important;
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.inputs {
+  display: grid;
+  justify-content: space-between;
+  gap: calc(var(--unit) * 2);
+  grid-template-columns: 1fr 220px;
+}
+
+.icon {
+  margin-left: var(--margin);
+}
+
+.proTip {
+  margin-top: calc(var(--margin) / 2);
+  opacity: 0.7;
+}
+
+.button {
+  width: 100%;
+  height: 100%;
+
+  &:focus {
+    box-shadow: none;
+  }
 }

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

@@ -46,16 +46,15 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
   installFromSelectFileDialog,
   extensionInstallationStateStore,
 }) => (
-  <section className="mt-2">
+  <section>
     <SubTitle
       title={`Name or file path or URL to an extension package (${supportedFormats.join(
         ", ",
       )})`}
     />
-    <div className="flex">
+    <div className={styles.inputs}>
-      <div className="flex-1">
+      <div>
         <Input
-          className="box grow mr-6"
           theme="round-black"
           disabled={
             extensionInstallationStateStore.anyPreInstallingOrInstalling
@@ -69,6 +68,7 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
           iconRight={(
             <Icon
               className={styles.icon}
+              smallest
               material="folder_open"
               onClick={prevDefault(installFromSelectFileDialog)}
               tooltip="Browse"
@@ -76,11 +76,11 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
           )}
         />
       </div>
-      <div className="flex-initial">
+      <div>
         <Button
+          className={styles.button}
           primary
           label="Install"
-          className="w-80 h-full"
           disabled={
             extensionInstallationStateStore.anyPreInstallingOrInstalling
           }
@@ -89,7 +89,7 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
         />
       </div>
     </div>
-    <small className="mt-3">
+    <small className={styles.proTip}>
       <b>Pro-Tip</b>
       : you can drag-n-drop tarball-file to this area
     </small>