Adding extension's label text next to Icon

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

extensions/support-page/renderer.tsx

@@ -21,15 +21,17 @@ export default class SupportPageRendererExtension extends LensRendererExtension
     )
   }
 
-  registerStatusBarIcon(registry: Registry.StatusBarRegistry) {
+  registerStatusBarItem(registry: Registry.StatusBarRegistry) {
     this.disposers.push(
       registry.add({
-        icon: (
+        item: (
-          <Component.Icon
+          <div
-            material="support"
+            className="flex align-center gaps hover-highlight"
-            tooltip="Support"
             onClick={() => Navigation.navigate(supportPageURL())}
-          />
+          >
+            <Component.Icon material="help_outline" small />
+            <span>Support</span>
+          </div>
         )
       })
     )

src/extensions/extension-loader.ts

@@ -47,7 +47,7 @@ export class ExtensionLoader {
       instance.registerPages(pageRegistry)
       instance.registerAppPreferences(appPreferenceRegistry)
       instance.registerClusterFeatures(clusterFeatureRegistry)
-      instance.registerStatusBarIcon(statusBarRegistry)
+      instance.registerStatusBarItem(statusBarRegistry)
     })
   }
 

src/extensions/lens-main-extension.ts

@@ -7,7 +7,7 @@ export class LensMainExtension extends LensExtension {
     //
   }
 
-  registerStatusBarIcon(registry: StatusBarRegistry) {
+  registerStatusBarItem(registry: StatusBarRegistry) {
     //
   }
 

src/extensions/lens-renderer-extension.ts

@@ -14,7 +14,7 @@ export class LensRendererExtension extends LensExtension {
     return
   }
 
-  registerStatusBarIcon(registry: StatusBarRegistry) {
+  registerStatusBarItem(registry: StatusBarRegistry) {
     return
   }
 

src/extensions/registries/status-bar-registry.ts

@@ -4,7 +4,7 @@ import React from "react";
 import { BaseRegistry } from "./base-registry";
 
 export interface StatusBarRegistration {
-  icon?: React.ReactNode;
+  item?: React.ReactNode;
 }
 
 export class StatusBarRegistry extends BaseRegistry<StatusBarRegistration> {

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) => {
+          {statusBarRegistry.getItems().map(({ item }, index) => {
-            if (!icon) return;
+            if (!item) return;
-            return <React.Fragment key={index}>{icon}</React.Fragment>
+            return <React.Fragment key={index}>{item}</React.Fragment>
           })}
         </div>
       </div>