From 512639df5e69f6f7974618ba9264514cf9e53463 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 26 Apr 2021 19:15:16 +0300
Subject: [PATCH] Highlighting kind icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-icon.scss        | 19 +++++++++++++------
 .../components/hotbar/hotbar-icon.tsx         |  6 +++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index 7760c0af68..b50a628c0c 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -28,16 +28,23 @@
     }
 
     .badge {
-      color: $textColorAccent;
       position: absolute;
-      left: 0;
-      top: 0;
-      margin: -$padding;
-      font-size: $font-size-small;
-      background: $clusterMenuBackground;
+      right: -2px;
+      bottom: -3px;
+      margin: -8px;
+      font-size: var(--font-size-small);
+      background: var(--clusterMenuBackground);
       color: white;
       padding: 0px;
       border-radius: 50%;
+      border: 3px solid var(--clusterMenuBackground);
+      width: 15px;
+      height: 15px;
+
+      &.online {
+        background-color: #44b700;
+      }
+
       svg {
         width: 13px;
       }
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 262985a78d..db2bf6a0dd 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -66,8 +66,8 @@ export class HotbarIcon extends React.Component<Props> {
     ].filter(Boolean).join("");
   }
 
-  get badgeIcon() {
-    const className = "badge";
+  get kindIcon() {
+    const className = cssNames("badge", { online: this.props.entity.status.phase == "connected"});
     const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
 
     if (!category) {
@@ -142,7 +142,7 @@ export class HotbarIcon extends React.Component<Props> {
         >
           {this.iconString}
         </Avatar>
-        { this.badgeIcon }
+        { this.kindIcon }
         <Menu
           usePortal
           htmlFor={entityIconId}