Fix extension status-bar item default styles (#1578)

* fix extension status-bar item default styles

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak padding

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/cluster-manager/bottom-bar.scss

@@ -17,4 +17,16 @@
       cursor: pointer;
     }
   }
+
+  .extensions {
+    font-size: var(--font-size-small);
+    color: white;
+    .item {
+      padding: $padding / 4 $padding / 2;
+      &:hover {
+        background-color: #ffffff33;
+        cursor: pointer;
+      }
+    }
+  }
 }

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>