From 2b81fd419a0f5415069d45c9c38f6a4f89f31a1b Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Mon, 30 Nov 2020 16:45:50 +0200
Subject: [PATCH] fix extension status-bar item default styles

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../components/cluster-manager/bottom-bar.scss        | 11 +++++++++++
 .../components/cluster-manager/bottom-bar.tsx         |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index 0a73bbacbb..0970c55fc5 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -17,4 +17,15 @@
       cursor: pointer;
     }
   }
+
+  .extensions {
+    font-size: var(--font-size-small);
+    color: white;
+    .item {
+      &:hover {
+        background-color: #ffffff33;
+        cursor: pointer;
+      }
+    }
+  }
 }
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index 55a5aba81c..cc79de800e 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -23,7 +23,7 @@ export class BottomBar extends React.Component {
         <div className="extensions box grow flex gaps justify-flex-end">
           {statusBarRegistry.getItems().map(({ item }, index) => {
             if (!item) return;
-            return <React.Fragment key={index}>{item}</React.Fragment>;
+            return <div className="flex align-center gaps item" key={index}>{item}</div>;
           })}
         </div>
       </div>