connect comment bubble

wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js

@@ -2,6 +2,7 @@
 import React, { useLayoutEffect, useContext } from 'react';
 import { Commands, DocumentHelpers } from 'wax-prosemirror-utilities';
 import { WaxContext } from 'wax-prosemirror-core';
+import CommentBubble from '../../ui/comments/CommentBubble';
 
 const CommentBubbleComponent = ({
   setPosition,
@@ -41,13 +42,11 @@ const CommentBubbleComponent = ({
   return (
     !isSelectionComment() &&
     showComment(activeViewId) && (
-      <button
-        onMouseDown={event => {
+      <CommentBubble
+        onClick={event => {
           createComment(event);
         }}
-      >
-        create
-      </button>
+      />
     )
   );
 };

wax-prosemirror-components/src/components/comments/ConnectedComment.js

@@ -9,7 +9,11 @@ import CommentBox from '../../ui/comments/CommentBox';
 
 const ConnectedCommentStyled = styled.div`
   position: absolute;
+  margin-left: ${props => (props.active ? `${-20}px` : `${50}px`)};
   width: 200px;
+  @media (max-width: 600px) {
+    margin-left: 15px;
+  }
 `;
 
 export default ({ comment, top, commentId, recalculateTops }) => {
@@ -114,7 +118,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
   };
 
   return (
-    <ConnectedCommentStyled data-box={commentId} style={styles}>
+    <ConnectedCommentStyled data-box={commentId} style={styles} active={active}>
       <CommentBox
         key={commentId}
         active={active}

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -110,13 +110,14 @@ const WaxSurfaceScroll = styled.div`
 const MainMenuContainer = styled.div`
   background: #fff;
   min-height: 52px;
-  /* line-height: 32px; */
+  line-height: 32px;
   position: relative;
   user-select: none;
   border-bottom: 2px solid #ecedf1;
   @media (max-width: 600px) {
     font-size: 10px;
     min-height: 72px;
+    line-height: 32px;
   }
 `;
 const MainMenuInner = styled.div`