apis / clusters-menu refactoring

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+cluster-settings/cluster-icon.scss

@@ -1,7 +1,19 @@
 .ClusterIcon {
-  position: relative;
   --size: 40px;
 
+  position: relative;
+  opacity: .75;
+  border-radius: $radius;
+  cursor: pointer;
+
+  &.interactive {
+    &:hover {
+      opacity: 1;
+      background-color: #fff;
+      box-shadow: 0 0 0 $radius #fff;
+    }
+  }
+
   > img {
     width: var(--size);
     height: var(--size);

src/renderer/components/+cluster-settings/cluster-icon.tsx

@@ -2,7 +2,8 @@ import "./cluster-icon.scss"
 
 import React, { DOMAttributes } from "react";
 import { observer } from "mobx-react";
-import { Hashicon, HashiconProps } from "@emeraldpay/hashicon-react";
+import { Params as HashiconParams } from "@emeraldpay/hashicon";
+import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Cluster } from "../../../main/cluster";
 import { cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
@@ -11,12 +12,13 @@ interface Props extends DOMAttributes<HTMLElement> {
   cluster: Cluster;
   className?: IClassName;
   errorClass?: IClassName;
-  showErrorCount?: boolean;
-  options?: HashiconProps["options"]
+  showErrors?: boolean;
+  interactive?: boolean;
+  options?: HashiconParams;
 }
 
 const defaultProps: Partial<Props> = {
-  showErrorCount: true,
+  showErrors: true,
 };
 
 @observer
@@ -24,14 +26,17 @@ export class ClusterIcon extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
   render() {
-    const { className, cluster, showErrorCount, errorClass, options, children, ...elemProps } = this.props;
+    const { className: cName, cluster, showErrors, errorClass, options, interactive, children, ...elemProps } = this.props;
     const { isAdmin, eventCount, preferences } = cluster;
     const { clusterName, icon } = preferences;
+    const className = cssNames("ClusterIcon flex inline", cName, {
+      interactive: interactive || !!this.props.onClick,
+    });
     return (
-      <div className={cssNames("ClusterIcon flex inline", className)} {...elemProps}>
+      <div {...elemProps} className={className}>
         {icon && <img src={icon} alt={clusterName}/>}
         {!icon && <Hashicon value={clusterName} options={options}/>}
-        {showErrorCount && isAdmin && eventCount > 0 && (
+        {showErrors && isAdmin && eventCount > 0 && (
           <Badge
             className={cssNames("events-count", errorClass)}
             label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) * 1000 + "+" : eventCount}

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -1,13 +1,11 @@
 .ClustersMenu {
   @include hidden-scrollbar;
-  $menuBgc: #252729;
+
+  --flex-gap: #{$padding * 2};
+  --menu-bgc: #252729;
 
   padding: $padding * 1.5;
-  background: $menuBgc;
-
-  > * {
-    cursor: pointer;
-  }
+  background: var(--menu-bgc);
 
   .add-cluster {
     position: relative;
@@ -15,7 +13,7 @@
     .Icon.add {
       border-radius: $radius;
       padding: $padding / 3;
-      color: $menuBgc !important;
+      color: var(--menu-bgc) !important;
       background: white !important;
       font-weight: bold;
       cursor: pointer;

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

@@ -63,8 +63,8 @@ export class ClustersMenu extends React.Component<Props> {
           return (
             <ClusterIcon
               key={cluster.id}
+              showErrors={true}
               cluster={cluster}
-              showErrorCount={true}
               className={cssNames({ active: isActive })}
               onClick={() => this.selectCluster(cluster)}
               onContextMenu={() => this.showContextMenu(cluster)}