From 5c8e443334763846bf8d1d039919c95ce34592fb Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 22 Nov 2021 11:28:34 +0300
Subject: [PATCH] Style Extensions page

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+extensions/extensions.scss        | 15 ---------------
 .../components/+extensions/extensions.tsx         |  6 +++---
 src/renderer/components/+extensions/install.tsx   |  2 +-
 .../+extensions/installed-extensions.tsx          |  2 +-
 4 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 0369eb4798..77994272ba 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -19,21 +19,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.PageLayout.Extensions {
-  $spacing: $padding * 2;
-  width: 100%;
-
-  .contentRegion {
-    .content {
-      max-width: 740px;
-
-      > section {
-        height: 100%;
-      }
-    }
-  }
-}
-
 .InstallingExtensionNotification {
   .remove-folder-warning {
     font-size: $font-size-small;
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 71a15056b7..3f9bc1e438 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -512,9 +512,9 @@ export class Extensions extends React.Component<Props> {
 
     return (
       <DropFileInput onDropFiles={installOnDrop}>
-        <SettingLayout className="Extensions">
+        <SettingLayout>
           <section>
-            <h1>Extensions</h1>
+            <h2>Extensions</h2>
 
             <Notice className="mb-14 mt-3">
               <p>
@@ -532,7 +532,7 @@ export class Extensions extends React.Component<Props> {
               installPath={this.installPath}
             />
 
-            {extensions.length > 0 && <hr/>}
+            {extensions.length > 0 && <hr className="mb-12"/>}
 
             <InstalledExtensions
               extensions={extensions}
diff --git a/src/renderer/components/+extensions/install.tsx b/src/renderer/components/+extensions/install.tsx
index 36ec5be2f9..0cf523394c 100644
--- a/src/renderer/components/+extensions/install.tsx
+++ b/src/renderer/components/+extensions/install.tsx
@@ -55,7 +55,7 @@ export const Install = observer((props: Props) => {
   const { installPath, supportedFormats, onChange, installFromInput, installFromSelectFileDialog } = props;
 
   return (
-    <section className="mt-2">
+    <section className="mt-2 mb-12">
       <SubTitle title={`Name or file path or URL to an extension package (${supportedFormats.join(", ")})`}/>
       <div className="flex">
         <div className="flex-1">
diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx
index 14e490bed5..06a5a473e9 100644
--- a/src/renderer/components/+extensions/installed-extensions.tsx
+++ b/src/renderer/components/+extensions/installed-extensions.tsx
@@ -167,7 +167,7 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di
   return (
     <section data-testid="extensions-table">
       <List
-        title={<h2 className={styles.title}>Installed extensions</h2>}
+        title={<h2 className={styles.title}>Installed</h2>}
         columns={columns}
         data={data}
         items={extensions}