style multi comments

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { formatDistanceStrict } from 'date-fns';
+import { css } from '@styled-system/css';
+import { useOvermind } from 'app/overmind';
+import { Text, Element } from '@codesandbox/components';
+
+type MultiCommentProps = {
+  x: number;
+  y: number;
+  ids: string[];
+};
+
+export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
+  const {
+    state: {
+      editor,
+      comments,
+    },
+    actions,
+  } = useOvermind();
+
+  const list = css({
+    position: 'fixed',
+    left: x - 10,
+    top: y + 20,
+    backgroundColor: 'sideBar.background',
+    border: '1px solid',
+    borderColor: 'sideBar.border',
+    paddingY: 2,
+    paddingX: 0,
+    zIndex: 999999999999999,
+    listStyle: 'none',
+    borderRadius: 4,
+
+    '&::before': {
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      left: '7px',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+      top: '-11px',
+      borderColor: 'transparent',
+      borderBottomColor: 'sideBar.border',
+
+      borderWidth: '11px',
+      borderTopWidth: 0,
+    },
+
+    '&::after': {
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      left: 2,
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+      top: '-10px',
+      borderColor: 'transparent',
+      borderBottomColor: 'sideBar.background',
+      borderWidth: '10px',
+      borderTopWidth: 0,
+    },
+  });
+
+  const item = css({
+    border: 'none',
+    backgroundColor: 'transparent',
+    padding: 2,
+    width: 200,
+    cursor: 'pointer',
+    position: 'relative',
+    '&:hover': {
+      color: 'list.hoverForeground',
+      backgroundColor: 'list.hoverBackground',
+    },
+  });
+
+  const date = comment =>
+    formatDistanceStrict(new Date(comment.insertedAt), new Date(), {
+      addSuffix: true,
+    });
+
+  return (
+    <Element as="ul" css={list}>
+      {ids.map(id => {
+        const comment = comments.comments[editor.currentSandbox.id][id];
+        return (
+          <Element as="li" key={id}>
+            <Element
+              as="button"
+              type="button"
+              // @ts-ignore
+              onClick={() => actions.comments.selectComment(id)}
+              css={item}
+            >
+              <Text
+                size={2}
+                weight="bold"
+                paddingRight={2}
+                css={css({
+                  color: 'sideBar.foreground',
+                })}
+              >
+                {comment.user.username}
+              </Text>
+              <Text size={2} variant="muted">
+                {date(comment)}
+              </Text>
+            </Element>
+          </Element>
+        );
+      })}
+    </Element>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx

@@ -1,4 +1,5 @@
 import { CommentsFilterOption } from '@codesandbox/common/lib/types';
+
 import {
   Icon,
   List,
@@ -14,6 +15,7 @@ import React from 'react';
 import { AddComment } from './AddComment';
 import { Comment } from './Comment';
 import { CommentDialog } from './Dialog';
+import { MultiComment } from './components/MultiComment';
 
 export const Comments: React.FC = () => {
   const {
@@ -138,28 +140,7 @@ export const Comments: React.FC = () => {
       {currentComments.length ? null : <Empty />}
       <AddComment />
       {currentCommentId && <CommentDialog />}
-      {multiCommentsSelector && (
-        <ul
-          style={{
-            position: 'fixed',
-            left: multiCommentsSelector.x,
-            top: multiCommentsSelector.y,
-            backgroundColor: 'red',
-            zIndex: 999999999999999,
-          }}
-        >
-          {multiCommentsSelector.ids.map(id => (
-            <li key={id}>
-              <button
-                type="button"
-                onClick={() => commentsActions.selectComment(id)}
-              >
-                {id}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      {multiCommentsSelector && <MultiComment {...multiCommentsSelector} />}
     </Stack>
   );
 };