Fine-tune styles of Extensions page (#5921)

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 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * 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 {
-  @apply h-5 w-5 mr-3 cursor-pointer;
-  background-color: transparent!important;
+  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="flex-1">
+    <div className={styles.inputs}>
+      <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>