Comments polish - Day 1, v2 (codesandbox#3801)

* sidebar comment shadow yay

* fix shadow on comments top bar

* remove redundant borders

* fix overlap on safari

* missed a spot!

* disable body overflow with drag handle

Author: siddharthkp

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

@@ -28,11 +28,10 @@ export const AddComment: React.FC = () => {
       paddingX={2}
       paddingY={4}
       css={css({
+        zIndex: 2,
         borderTop: '1px solid',
         borderColor: 'sideBar.border',
-        // super custom shadow, TODO: check if this works in other themes
-        boxShadow:
-          '0px -4px 8px rgba(21, 21, 21, 0.4), 0px -8px 8px rgba(21, 21, 21, 0.4)',
+        boxShadow: theme => `0px -32px 32px ${theme.colors.dialog.background}`,
       })}
     >
       <form onSubmit={onSubmit}>

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

@@ -18,7 +18,14 @@ export const Reply = ({ reply }: ReplyProps) => {
   const [editing, setEditing] = useState(false);
 
   return (
-    <>
+    <Element
+      as="li"
+      css={{
+        '&:last-child > div': {
+          border: 'none',
+        },
+      }}
+    >
       <Element key={id} marginLeft={4} marginRight={2} paddingTop={6}>
         <Stack align="flex-start" justify="space-between" marginBottom={4}>
           <AvatarBlock comment={reply} />
@@ -70,7 +77,7 @@ export const Reply = ({ reply }: ReplyProps) => {
           />
         )}
       </Element>
-    </>
+    </Element>
   );
 };
 

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

@@ -8,6 +8,7 @@ import {
   Text,
   Textarea,
 } from '@codesandbox/components';
+import { createGlobalStyle } from 'styled-components';
 import css from '@styled-system/css';
 import { CommentFragment } from 'app/graphql/types';
 import { useOvermind } from 'app/overmind';
@@ -127,23 +128,20 @@ export const Dialog: React.FC = () => {
             <DragHandle onPan={onDragHandlerPan}>
               <DialogHeader comment={comment} hasShadow={scrollTop > 0} />
             </DragHandle>
-            <Stack
-              direction="vertical"
-              css={{ overflow: 'auto' }}
-              ref={listRef}
-            >
+            <Element as="div" css={{ overflow: 'auto' }} ref={listRef}>
               <CommentBody
                 comment={comment}
                 editing={editing}
                 setEditing={setEditing}
+                hasReplies={replies.length}
               />
               {replies.length ? (
                 <Replies
                   replies={replies}
                   repliesRenderedCallback={() => setRepliesRendered(true)}
                 />
               ) : null}
-            </Stack>
+            </Element>
             <AddReply
               comment={comment}
               onSubmit={() => {
@@ -226,15 +224,25 @@ const DialogAddComment: React.FC<{
   );
 };
 
+/** When the dialog is dragged outside the window
+ *  It creates a scrollbar. We want to disable overflow
+ *  when the drag handle is DOM
+ */
+
+const GlobalStyles = createGlobalStyle`
+  body { overflow: hidden; }
+`;
+
 const DragHandle: React.FC<{
   onPan: (deltaX: number, deltaY: number) => void;
 }> = ({ onPan, children }) => (
   <motion.div
     onPan={(_, info) => {
       onPan(info.delta.x, info.delta.y);
     }}
-    style={{ cursor: 'move' }}
+    style={{ cursor: 'move', zIndex: 2 }}
   >
+    <GlobalStyles />
     {children}
   </motion.div>
 );
@@ -252,7 +260,6 @@ const DialogHeader = ({ comment, hasShadow }) => {
       paddingRight={2}
       marginBottom={2}
       css={css({
-        zIndex: 2,
         boxShadow: theme =>
           hasShadow
             ? `0px 32px 32px ${theme.colors.dialog.background}`
@@ -293,7 +300,7 @@ const DialogHeader = ({ comment, hasShadow }) => {
   );
 };
 
-const CommentBody = ({ comment, editing, setEditing }) => {
+const CommentBody = ({ comment, editing, setEditing, hasReplies }) => {
   const { state, actions } = useOvermind();
 
   return (
@@ -333,7 +340,7 @@ const CommentBody = ({ comment, editing, setEditing }) => {
         marginX={4}
         paddingBottom={6}
         css={css({
-          borderBottom: '1px solid',
+          borderBottom: hasReplies ? '1px solid' : 'none',
           borderColor: 'sideBar.border',
         })}
       >
@@ -371,7 +378,7 @@ const Replies = ({ replies, repliesRenderedCallback }) => {
   }, [repliesLoaded, isAnimating, repliesRenderedCallback]);
 
   return (
-    <motion.div
+    <motion.ul
       initial={{ height: repliesLoaded ? 0 : SKELETON_HEIGHT }}
       animate={{ height: 'auto' }}
       transition={{
@@ -381,6 +388,7 @@ const Replies = ({ replies, repliesRenderedCallback }) => {
       style={{
         minHeight: repliesLoaded ? 0 : SKELETON_HEIGHT,
         overflow: 'visible',
+        paddingLeft: 0,
       }}
       onAnimationComplete={() => setAnimating(false)}
     >
@@ -393,7 +401,7 @@ const Replies = ({ replies, repliesRenderedCallback }) => {
       ) : (
         <SkeletonReply />
       )}
-    </motion.div>
+    </motion.ul>
   );
 };
 
@@ -418,7 +426,8 @@ const AddReply = ({ comment, ...props }) => {
         border: 'none',
         borderTop: '1px solid',
         borderColor: 'sideBar.border',
-        paddingX: 4,
+        borderRadius: 0,
+        padding: 4,
       })}
       value={value}
       onChange={e => setValue(e.target.value)}