style forbidden images and add modal (codesandbox#3809)

Author: SaraVieira

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

@@ -1,29 +1,104 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { useOvermind } from 'app/overmind';
-import { Text, Element, Link } from '@codesandbox/components';
+import Modal from 'react-modal';
+import {
+  Text,
+  Element,
+  Link,
+  Button,
+  IconButton,
+} from '@codesandbox/components';
 import css from '@styled-system/css';
 import { Code } from './Code';
 
 export const Markdown = ({ source }) => {
   const { state } = useOvermind();
+  const [modalOpen, setModalOpen] = useState(false);
   const privateSandbox =
     state.editor.currentSandbox.privacy === 1 ||
     state.editor.currentSandbox.privacy === 2;
 
   const image = props =>
     privateSandbox ? (
-      <img
-        {...props}
-        alt={props.alt}
+      <>
+        <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({
-          maxWidth: '100%',
+          backgroundColor: 'sideBar.border',
         })}
-      />
-    ) : (
-      <Text marginY={4} variant="muted" block align="center">
-        You cannot use images in comments on public sandboxes.
-      </Text>
+      >
+        <Text size={3} variant="muted" block align="center">
+          Images are not shown in public sandboxes
+        </Text>
+      </Element>
     );
 
   return (