hotbar icon status led (#2651)

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

src/renderer/components/hotbar/hotbar-icon.scss

@@ -24,6 +24,23 @@
       }
     }
 
+    > .led {
+      position: absolute;
+      left: 3px;
+      top: 3px;
+      background-color: var(--layoutBackground);
+      border: 1px solid var(--clusterMenuBackground);
+      border-radius: 50%;
+      padding: 0px;
+      width: 8px;
+      height: 8px;
+
+      &.online {
+        background-color: var(--primary);
+        box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
+      }
+    }
+
     .badge {
       position: absolute;
       right: -2px;
@@ -34,14 +51,10 @@
       color: white;
       padding: 0px;
       border-radius: 50%;
-      border: 3px solid var(--clusterMenuBackground);
+      border: 2px solid var(--clusterMenuBackground);
       width: 15px;
       height: 15px;
 
-      &.online {
-        background-color: #44b700;
-      }
-
       svg {
         width: 13px;
       }

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -67,7 +67,7 @@ export class HotbarIcon extends React.Component<Props> {
   }
 
   get kindIcon() {
-    const className = cssNames("badge", { online: this.props.entity.status.phase == "connected"});
+    const className = "badge";
     const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
 
     if (!category) {
@@ -81,6 +81,12 @@ export class HotbarIcon extends React.Component<Props> {
     }
   }
 
+  get ledIcon() {
+    const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
+
+    return <div className={className} />;
+  }
+
   toggleMenu() {
     this.menuOpen = !this.menuOpen;
   }
@@ -142,6 +148,7 @@ export class HotbarIcon extends React.Component<Props> {
         >
           {this.iconString}
         </Avatar>
+        { this.ledIcon }
         { this.kindIcon }
         <Menu
           usePortal