Fine-tuning page view

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

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

@@ -574,11 +574,11 @@ export class Extensions extends React.Component {
       <DropFileInput onDropFiles={installOnDrop}>
         <PageLayout showOnTop className="Extensions" contentGaps={false}>
           <section>
-            <h2>Lens Extensions</h2>
-            <div>
+            <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>
+            </div> */}
 
             <Install
               supportedFormats={supportedFormats}

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

@@ -0,0 +1,7 @@
+.icon {
+  @apply h-5 w-5 cursor-pointer;
+}
+
+.icon:hover {
+  color: var(--textColorAccent);
+}

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

@@ -1,3 +1,4 @@
+import styles from "./install.module.css";
 import React from "react";
 import { prevDefault } from "../../utils";
 import { Button } from "../button";
@@ -32,8 +33,7 @@ export function Install(props: Props) {
   const { installPath, supportedFormats, onChange, installFromInput, installFromSelectFileDialog } = props;
 
   return (
-    <section>
-      <h2>Install</h2>
+    <section className="mt-2">
       <SubTitle title={`Path or URL to an extension package (${supportedFormats.join(", ")})`}/>
       <div className="flex">
         <div className="flex-1">
@@ -49,8 +49,9 @@ export function Install(props: Props) {
             onSubmit={installFromInput}
             iconRight={
               <Icon
-                interactive
-                material="folder"
+                interactive={false}
+                className={styles.icon}
+                material="folder_open"
                 onClick={prevDefault(installFromSelectFileDialog)}
                 tooltip="Browse"
               />
@@ -62,13 +63,13 @@ export function Install(props: Props) {
             primary
             label="Install"
             className="w-80 h-full"
-            disabled={ExtensionInstallationStateStore.anyPreInstallingOrInstalling || !installInputValidator.validate(installPath)}
+            // disabled={ExtensionInstallationStateStore.anyPreInstallingOrInstalling || !installInputValidator.validate(installPath)}
             waiting={ExtensionInstallationStateStore.anyPreInstallingOrInstalling}
             onClick={installFromInput}
           />
         </div>
       </div>
-      <small className="mt-1">
+      <small className="mt-3">
         <b>Pro-Tip</b>: you can drag-n-drop tarball-file to this area
       </small>
     </section>

src/renderer/components/+extensions/installed-extensions.module.css

@@ -10,3 +10,7 @@
 .enabled {
   color: var(--colorOk);
 }
+
+.title {
+  margin-bottom: 6px!important;
+}

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

@@ -120,6 +120,7 @@ export function InstalledExtensions({ extensions, uninstall }: Props) {
 
   return (
     <section>
+      <h2 className={styles.title}>Installed</h2>
       <List
         title="Manage your extensions in here."
         columns={columns}

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

@@ -170,6 +170,13 @@
       color: var(--textColorAccent);
     }
 
+    h1 {
+      color: var(--textColorAccent);
+      font-size: 22px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
     h2 {
       font-size: 18px;
       line-height: 20px;

src/renderer/components/list/list.tsx

@@ -22,7 +22,7 @@ export function List({ columns, data, title, items, filters, }: Props) {
 
   return (
     <>
-      <div className="flex align-center justify-between mb-8">
+      <div className="flex align-center justify-between mb-6">
         <div className="mr-6">
           {title}
         </div>