fixed editor buttons appearance

src/components/node/NodeEditMenu/index.tsx

@@ -0,0 +1,53 @@
+import React, { VFC } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '~/components/input/Icon';
+
+import styles from './styles.module.scss';
+
+interface NodeEditMenuProps {
+  canStar: boolean;
+
+  isHeroic: boolean;
+  isLocked: boolean;
+
+  onStar: () => void;
+  onLock: () => void;
+  onEdit: () => void;
+}
+
+const NodeEditMenu: VFC<NodeEditMenuProps> = ({
+  canStar,
+  isHeroic,
+  isLocked,
+  onStar,
+  onLock,
+  onEdit,
+}) => (
+  <div className={styles.editor_menu}>
+    <div className={styles.editor_menu_button}>
+      <Icon icon="dots-vertical" size={24} />
+    </div>
+
+    <div className={styles.editor_buttons}>
+      {canStar && (
+        <div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
+          {isHeroic ? (
+            <Icon icon="star_full" size={24} onClick={onStar} />
+          ) : (
+            <Icon icon="star" size={24} onClick={onStar} />
+          )}
+        </div>
+      )}
+
+      <div>
+        <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+      </div>
+
+      <Icon icon="edit" size={24} onClick={onEdit} />
+    </div>
+  </div>
+);
+
+export { NodeEditMenu };