fixed comment menu icon

src/components/comment/CommentMenu/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC, useCallback, useState } from 'react';
 
+import { MenuDots } from '~/components/common/MenuDots';
+
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -15,7 +17,7 @@ const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
 
   return (
     <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
-      <div className={styles.dot} />
+      <MenuDots onClick={onFocus} />
 
       {is_menu_opened && (
         <div className={styles.menu}>

src/components/comment/CommentMenu/styles.module.scss

@@ -2,8 +2,8 @@
 
 .wrap {
   position: absolute;
-  right: 0;
-  top: 0;
+  right: -3px;
+  top: -3px;
   width: 48px;
   height: 48px;
   z-index: 10;
@@ -17,17 +17,6 @@
   }
 }
 
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  background: transparentize(black, 0.7);
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  transition: background 0.25s;
-}
-
 @keyframes appear {
   0% {
     opacity: 0;

src/components/common/MenuDots/index.tsx

@@ -2,10 +2,11 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
-import styles from '~/components/flow/FlowCell/styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { ButtonProps } from '~/utils/types';
 
+import styles from './styles.module.scss';
+
 interface Props extends ButtonProps {}
 
 const MenuDots: FC<Props> = ({ ...rest }) => (

src/components/common/MenuDots/styles.module.scss

@@ -0,0 +1,39 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.button {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  fill: white;
+  padding: 5px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.dots {
+  @include blur($content_bg, 5px, 0.7);
+
+  padding: 5px 0 0 0;
+  background: $content_bg;
+  border-radius: $radius;
+  width: 18px;
+  height: 30px;
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    opacity: 0.3;
+    transition: opacity 0.25s;
+
+    :hover > & {
+      opacity: 1;
+    }
+  }
+}

src/components/flow/FlowCell/styles.module.scss

@@ -118,40 +118,3 @@
   bottom: 0;
   z-index: 11;
 }
-
-.button {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  fill: white;
-  padding: 7px;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.dots {
-  @include blur($content_bg, 5px, 0.7);
-
-  padding: 5px 0 0 0;
-  background: $content_bg;
-  border-radius: $radius;
-  width: 18px;
-  height: 30px;
-  position: relative;
-
-  svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    opacity: 0.5;
-    transition: opacity 0.25s;
-
-    :hover > & {
-      opacity: 1;
-    }
-  }
-}