From 981ca3ba3da8fbc3ebb506236d2298eb16afdd46 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 30 Dec 2020 02:47:22 -0500
Subject: [PATCH] add version display to extensions (#1604)

* add version display to extensions

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* use new format

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* fix styling

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/+extensions/extensions.scss |  4 +---
 src/renderer/components/+extensions/extensions.tsx  | 11 ++++-------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index 7352080a45..86f9d7b232 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -31,10 +31,8 @@
         margin-right: $spacing / 2;
       }
 
-      .name {
+      h5, h6 {
         color: var(--textColorSecondary);
-        padding-bottom: var(--padding);
-        font-weight: bold;
       }
     }
 
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index 700c08af32..f30168145a 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -444,18 +444,15 @@ export class Extensions extends React.Component {
 
     return extensions.map(extension => {
       const { id, isEnabled, manifest } = extension;
-      const { name, description } = manifest;
+      const { name, description, version } = manifest;
       const isUninstalling = this.extensionStateStore.extensionState.get(id)?.state === "uninstalling";
 
       return (
         <div key={id} className="extension flex gaps align-center">
           <div className="box grow">
-            <div className="name">
-              {name}
-            </div>
-            <div className="description">
-              {description}
-            </div>
+            <h5>{name}</h5>
+            <h6>{version}</h6>
+            <p>{description}</p>
           </div>
           <div className="actions">
             {!isEnabled && (