Allowing any item for StatusBarRegistration (#1143)

* Adding extension's label text next to Icon

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

* Removing unused registerStatusBarItem()

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

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

@@ -1,13 +1,27 @@
 .BottomBar {
   $spacing: $padding / 2;
+  --flex-gap: #{$spacing};
 
   font-size: $font-size-small;
   background-color: #3d90ce;
-  padding: $padding / 4 $padding;
+  padding: 0 $padding;
   color: white;
 
   #current-workspace {
-    --flex-gap: #{$spacing};
+    padding: $padding / 4 $padding / 2;
     cursor: pointer;
   }
+
+  .hover-highlight {
+    &:hover {
+      background-color: #ffffff33;
+      cursor: pointer;
+    }
+  }
+
+  .extensions {
+    > * {
+      padding: $padding / 4 $padding / 2;
+    }
+  }
 }

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

@@ -13,7 +13,7 @@ export class BottomBar extends React.Component {
     const { currentWorkspace } = workspaceStore;
     return (
       <div className="BottomBar flex gaps">
-        <div id="current-workspace" className="flex gaps align-center">
+        <div id="current-workspace" className="flex gaps align-center hover-highlight">
           <Icon small material="layers"/>
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
@@ -21,9 +21,9 @@ export class BottomBar extends React.Component {
           htmlFor="current-workspace"
         />
         <div className="extensions box grow flex gaps justify-flex-end">
-          {statusBarRegistry.getItems().map(({ icon }, index) => {
-            if (!icon) return;
-            return <React.Fragment key={index}>{icon}</React.Fragment>
+          {statusBarRegistry.getItems().map(({ item }, index) => {
+            if (!item) return;
+            return <React.Fragment key={index}>{item}</React.Fragment>
           })}
         </div>
       </div>