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 };

src/components/node/NodeEditMenu/styles.module.scss

@@ -0,0 +1,109 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+@mixin button {
+  margin: 0 $gap;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: darken(white, 50%);
+    transition: fill 0.25s;
+  }
+
+  &:hover {
+    svg {
+      fill: $red;
+    }
+  }
+
+  &::after {
+    content: ' ';
+    flex: 0 0 6px;
+    height: $gap;
+    width: 6px;
+    border-radius: 4px;
+    background: transparentize(black, 0.7);
+    margin-left: $gap * 2;
+  }
+}
+
+.editor_buttons {
+  flex: 0;
+  padding-right: $gap;
+  fill: transparentize(white, 0.7);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    @include button;
+  }
+
+  @include tablet {
+    align-self: center;
+    display: none;
+
+    & > * {
+      &:last-child {
+        margin-right: 0;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+
+.star {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  .is_heroic {
+    svg {
+      fill: $orange;
+    }
+  }
+
+  &:hover {
+    fill: $orange;
+  }
+}
+
+.editor_menu_button {
+  display: none !important;
+
+  @include button();
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+.editor_menu {
+  &:hover {
+    .editor_buttons {
+      @include tablet {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        background: darken($content_bg, 4%);
+        padding: $gap * 2;
+        border-radius: $radius;
+        box-shadow: transparentize(black, 0.8) 5px 5px 5px;
+        transform: translate(0, -10px);
+        z-index: 10;
+      }
+    }
+  }
+}