From 8fba4ee33121723be440d8cfbfeb2d27006f6bb4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Sun, 16 May 2021 06:51:17 +0300
Subject: [PATCH] Fine-tuning page view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+extensions/extensions.tsx  |  6 +++---
 .../components/+extensions/install.module.css       |  7 +++++++
 src/renderer/components/+extensions/install.tsx     | 13 +++++++------
 .../+extensions/installed-extensions.module.css     |  4 ++++
 .../components/+extensions/installed-extensions.tsx |  1 +
 src/renderer/components/layout/page-layout.scss     |  7 +++++++
 src/renderer/components/list/list.tsx               |  2 +-
 7 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 src/renderer/components/+extensions/install.module.css

diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index ca2fa30f94..a06222f596 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/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}
diff --git a/src/renderer/components/+extensions/install.module.css b/src/renderer/components/+extensions/install.module.css
new file mode 100644
index 0000000000..3ccef6d2a0
--- /dev/null
+++ b/src/renderer/components/+extensions/install.module.css
@@ -0,0 +1,7 @@
+.icon {
+  @apply h-5 w-5 cursor-pointer;
+}
+
+.icon:hover {
+  color: var(--textColorAccent);
+}
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/install.tsx b/src/renderer/components/+extensions/install.tsx
index 943fe6a9dc..0f87fb8d83 100644
--- a/src/renderer/components/+extensions/install.tsx
+++ b/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>
diff --git a/src/renderer/components/+extensions/installed-extensions.module.css b/src/renderer/components/+extensions/installed-extensions.module.css
index 820849b0d5..e46d852487 100644
--- a/src/renderer/components/+extensions/installed-extensions.module.css
+++ b/src/renderer/components/+extensions/installed-extensions.module.css
@@ -10,3 +10,7 @@
 .enabled {
   color: var(--colorOk);
 }
+
+.title {
+  margin-bottom: 6px!important;
+}
\ No newline at end of file
diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx
index e86c397e28..f8657b0295 100644
--- a/src/renderer/components/+extensions/installed-extensions.tsx
+++ b/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}
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index 29696c775e..bd0acf316a 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/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;
diff --git a/src/renderer/components/list/list.tsx b/src/renderer/components/list/list.tsx
index 6fae6036c7..1b01a60707 100644
--- a/src/renderer/components/list/list.tsx
+++ b/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>