Hotbar visual improvements (#2638)

* Adding hotbar cells

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

* Add/remove empty cells

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

* Increase cell corner radius

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

* Styling hotbar selector

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

* Generating 12 cells by default

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

* Adding custom scrollbar on hover

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

* Reset active cluster when leaving dashboard

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

* Moving kind icon top the top left corner

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

* Highlighting kind icon

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

* Add hotbar cell animations

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

* Adding small hover effect

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

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -28,6 +28,7 @@ export class ClusterManager extends React.Component {
       reaction(getMatchedClusterId, initView, {
         fireImmediately: true
       }),
+      reaction(() => !getMatchedClusterId(), () => ClusterStore.getInstance().setActive(null)),
       reaction(() => [
         getMatchedClusterId(), // refresh when active cluster-view changed
         hasLoadedView(getMatchedClusterId()), // refresh when cluster's webview loaded