more polish (codesandbox#3833)

* more polish

* more polish

* Added text align left

First Commit woot

Co-authored-by: Danny Ruchtie <[email protected]>

Author: SaraVieira

packages/app/src/app/overmind/namespaces/comments/actions.ts

@@ -142,7 +142,7 @@ export const closeMultiCommentsSelector: Action = ({ state }) => {
 
 export const selectComment: AsyncAction<{
   commentId: string;
-  bounds: {
+  bounds?: {
     left: number;
     top: number;
     right: number;
@@ -161,6 +161,11 @@ export const selectComment: AsyncAction<{
 
   actions.comments.getComments(commentId);
 
+  if (!bounds) {
+    state.comments.currentCommentId = commentId;
+    return;
+  }
+
   if (
     comment &&
     comment.references.length &&

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { useOvermind } from 'app/overmind';
+import Modal from 'react-modal';
+import { Text, Element, Button, IconButton } from '@codesandbox/components';
+import css from '@styled-system/css';
+
+export const Image = props => {
+  const { state } = useOvermind();
+  const [modalOpen, setModalOpen] = useState(false);
+  const privateSandbox =
+    state.editor.currentSandbox.privacy === 1 ||
+    state.editor.currentSandbox.privacy === 2;
+  return privateSandbox ? (
+    <>
+      <Button
+        padding={0}
+        margin={0}
+        marginTop={2}
+        variant="link"
+        onClick={() => setModalOpen(true)}
+        css={css({
+          maxWidth: '100%',
+          border: 'none',
+        })}
+      >
+        <img
+          {...props}
+          alt={props.alt}
+          css={css({
+            maxWidth: '100%',
+            borderRadius: 'small',
+          })}
+        />
+      </Button>
+      <Modal
+        isOpen={modalOpen}
+        style={{
+          content: {
+            border: 'none',
+            padding: 0,
+            background: 'transparent',
+            top: '50%',
+            left: '50%',
+            right: 'auto',
+            bottom: 'auto',
+            marginRight: '-50%',
+            transform: 'translate(-50%, -50%)',
+          },
+          overlay: {
+            zIndex: 10,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          },
+        }}
+        contentLabel={props.alt}
+        onRequestClose={() => setModalOpen(false)}
+      >
+        <IconButton
+          name="cross"
+          size={10}
+          title="Close Modal"
+          onClick={() => setModalOpen(false)}
+          css={{
+            position: 'absolute',
+            right: 4,
+            top: 4,
+            color: 'white',
+          }}
+        />
+        <img
+          {...props}
+          alt={props.alt}
+          css={css({
+            maxWidth: '100%',
+            borderRadius: 'small',
+            maxHeight: '80vh',
+          })}
+        />
+      </Modal>
+    </>
+  ) : (
+    <Element
+      paddingY={4}
+      marginY={2}
+      css={css({
+        backgroundColor: 'sideBar.border',
+        borderRadius: 'small',
+      })}
+    >
+      <Text size={3} variant="muted" block align="center">
+        Images are not shown in public sandboxes
+      </Text>
+    </Element>
+  );
+};

…rkspace/screens/Comments/Dialog/Code.tsx …creens/Comments/Dialog/Markdown/Code.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/Code.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/Code.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, Element } from '@codesandbox/components';
+import css from '@styled-system/css';
+
+export const InlineCode = props => (
+  <Element
+    as="span"
+    css={css({
+      backgroundColor: 'grays.200',
+      paddingX: '2px',
+      borderRadius: 'small',
+    })}
+  >
+    <Text
+      css={css({
+        color: 'reds.500',
+      })}
+      size={3}
+      as="code"
+    >
+      {props.children}
+    </Text>
+  </Element>
+);

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+import { Link, Button } from '@codesandbox/components';
+import css from '@styled-system/css';
+
+export const LinkElement = ({ href, children, ...props }) => {
+  const { state, actions } = useOvermind();
+  const { id, alias } = state.editor.currentSandbox;
+  const commentId = new URLSearchParams(new URL(href).search).get('comment');
+  if (
+    href.includes(window.location.href) &&
+    (href.includes(id) || href.includes(alias)) &&
+    commentId
+  ) {
+    return (
+      <Button
+        variant="link"
+        css={css({
+          display: 'inline',
+          width: 'auto',
+          padding: 0,
+          textAlign: 'left',
+        })}
+        onClick={() => actions.comments.selectComment({ commentId })}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  if (!href.includes('codesandbox')) {
+    return (
+      <Link target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </Link>
+    );
+  }
+
+  return <Link {...props}>{children}</Link>;
+};