diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss index 6ac4580877..f75867d96c 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/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; } diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index db2bf6a0dd..87699d2cfc 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -67,7 +67,7 @@ export class HotbarIcon extends React.Component { } 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 { } } + get ledIcon() { + const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic + + return
; + } + toggleMenu() { this.menuOpen = !this.menuOpen; } @@ -142,6 +148,7 @@ export class HotbarIcon extends React.Component { > {this.iconString} + { this.ledIcon } { this.kindIcon }