From 663041945731c24dbd517b7f5fbb7df3f5fbbc1a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 3 Dec 2020 09:08:50 +0300
Subject: [PATCH] Fine-tuning extensions page view (#1613)

* Replacing pro-tip text

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

* Coloring extension name

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

* Eslint fixes in webpack files

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+extensions/extensions.scss | 8 ++++++++
 src/renderer/components/+extensions/extensions.tsx  | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 888341728a..6060fee61e 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -30,11 +30,19 @@
       .actions > button:not(:last-child) {
         margin-right: $spacing / 2;
       }
+
+      .name {
+        color: var(--textColorSecondary);
+        padding-bottom: var(--padding);
+        font-weight: bold;
+      }
     }
   }
 
   .SearchInput {
     --spacing: 10px;
+
+    max-width: none;
   }
 }
 
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 903d30159f..102909a753 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -451,10 +451,10 @@ export class Extensions extends React.Component {
         <div key={id} className="extension flex gaps align-center">
           <div className="box grow">
             <div className="name">
-              Name: <code className="name">{name}</code>
+              {name}
             </div>
             <div className="description">
-              Description: <span className="text-secondary">{description}</span>
+              {description}
             </div>
           </div>
           <div className="actions">
@@ -529,7 +529,7 @@ export class Extensions extends React.Component {
               onClick={this.installFromUrlOrPath}
             />
             <small className="hint">
-              <Trans><b>Pro-Tip</b>: you can drag & drop extension&apos;s tarball-file to install</Trans>
+              <Trans><b>Pro-Tip</b>: you can also drag-n-drop tarball-file to this area</Trans>
             </small>
           </div>