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

@@ -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;
   }
 }
 

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>