From 658f2883d38fbfe314c4fffca1f1dc28f545fe34 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 26 Apr 2021 16:01:25 +0300
Subject: [PATCH] Moving kind icon top the top left corner

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/common/hotbar-store.ts                      |  2 +-
 src/renderer/components/hotbar/hotbar-icon.scss | 15 +++------------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts
index fc7bf3bc0a..6a01b3101e 100644
--- a/src/common/hotbar-store.ts
+++ b/src/common/hotbar-store.ts
@@ -2,9 +2,9 @@ import { action, comparer, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
 import * as uuid from "uuid";
-import { CatalogEntity } from "./catalog-entity";
 import { CatalogEntityItem } from "../renderer/components/+catalog/catalog-entity.store";
 import isNull from "lodash/isNull";
+import { CatalogEntity } from "./catalog/catalog-entity";
 
 export interface HotbarItem {
   entity: {
diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index dd83604950..7760c0af68 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -12,25 +12,16 @@
       border-radius: 6px;
     }
 
-    div.active {
-      background-color: var(--primary);
-    }
-
     &.interactive {
       margin-left: -3px;
       border: 3px solid var(--clusterMenuBackground);
     }
 
     &.active {
-      box-shadow: 0 0 0 3px var(--clusterMenuBackground), 0px 0px 0 6px white;
+      box-shadow: 0 0 0 1px var(--clusterMenuBackground), 0px 0px 0 4px white;
     }
 
     &.active, &.interactive:hover {
-
-      div {
-        background-color: var(--primary);
-      }
-
       img {
         opacity: 1;
       }
@@ -39,8 +30,8 @@
     .badge {
       color: $textColorAccent;
       position: absolute;
-      right: 0;
-      bottom: 0;
+      left: 0;
+      top: 0;
       margin: -$padding;
       font-size: $font-size-small;
       background: $clusterMenuBackground;