update styles for comments (codesandbox#3821)

* update styles for comments

* make api file

Author: SaraVieira

packages/app/src/app/overmind/effects/vscode/icons.css

@@ -1,5 +1,3 @@
-import './icons.css';
-
 import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config';
 import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import getTemplate from '@codesandbox/common/lib/templates';

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -30,8 +30,6 @@ import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
 import { ProjectInfo } from './items/ProjectInfo';
 import { Server } from './items/Server';
 import { Comments } from './screens/Comments';
-import { MultiComment } from './screens/Comments/components/MultiComment';
-import { CommentDialog } from './screens/Comments/Dialog';
 import { ConfigurationFiles as ConfigurationFilesNew } from './screens/ConfigurationFiles';
 import { Deployment as DeploymentNew } from './screens/Deployment/index';
 import { Explorer } from './screens/Explorer';
@@ -114,11 +112,6 @@ export const WorkspaceComponent = ({ theme }) => {
           {NEW_SIDEBAR &&
             !(isPatron || (currentSandbox && currentSandbox.owned)) &&
             !(isLive && roomInfo.chatEnabled) && <Advertisement />}
-
-          {state.comments.currentCommentId && <CommentDialog />}
-          {state.comments.multiCommentsSelector && (
-            <MultiComment {...state.comments.multiCommentsSelector} />
-          )}
         </>
       </WorkspaceWrapper>
 

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

@@ -0,0 +1,22 @@
+// This file imports the necessary files that allow for the comments to be used in the outside world as a plug API
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+import { CommentsGlobalStyles } from './components/GlobalStyles';
+import { MultiComment } from './components/MultiComment';
+import { CommentDialog } from './Dialog';
+
+export const CommentsAPI = () => {
+  const {
+    state: { comments },
+  } = useOvermind();
+
+  return (
+    <>
+      <CommentsGlobalStyles />
+      {comments.currentCommentId && <CommentDialog />}
+      {comments.multiCommentsSelector && (
+        <MultiComment {...comments.multiCommentsSelector} />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,114 @@
+import { createGlobalStyle, css } from 'styled-components';
+
+const POSITION = css`
+  top: 0px;
+  left: ${props => props.theme.space[2] + 1}px;
+`;
+
+const primary = (theme: any) =>
+  '%23' + theme.colors.button.background.split('#')[1];
+
+const makeColor = (color: string) => '%23' + color.split('#')[1];
+
+export const CommentsGlobalStyles = createGlobalStyle`
+${({ theme }: any) => css`
+  .editor-comments-glyph {
+    position: relative;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5C10 7.76142 7.76142 10 5 10H0V5Z' fill='black'/%3E%3C/svg%3E");
+    background-size: ${theme.space[3] + 1}px ${theme.space[3] + 1}px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    opacity: 0.3;
+    transition: all ${theme.speeds[4]}ms ease;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .vs-dark {
+    .editor-comments-glyph {
+      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5C10 7.76142 7.76142 10 5 10H0V5Z' fill='${makeColor(
+        theme.colors.white
+      )}'/%3E%3C/svg%3E");
+    }
+    .editor-comments-multi:before {
+      color: ${theme.colors.grays[600]};
+    }
+  }
+
+  .editor-comments-glyph.active-comment.editor-comments-multi:before {
+    color: ${theme.colors.white};
+  }
+
+  .editor-comments-multi:before {
+    content: '...';
+    color: ${theme.colors.white};
+    position: absolute;
+    top: -2px;
+    left: ${theme.space[2] - 1}px;
+    z-index: 10;
+    font-size: 8px;
+    font-weight: bold;
+    height: ${theme.space[3] + 1}px;
+    font-family: 'Inter', sans-serif;
+  }
+
+  .editor-comments-multi-2:before {
+    content: '2';
+    ${POSITION}
+  }
+
+  .editor-comments-multi-3:before {
+    content: '3';
+    ${POSITION}
+  }
+  .editor-comments-multi-4:before {
+    content: '4';
+    ${POSITION}
+  }
+  .editor-comments-multi-5:before {
+    content: '5';
+    ${POSITION}
+  }
+  .editor-comments-multi-6:before {
+    content: '6';
+    ${POSITION}
+  }
+  .editor-comments-multi-7:before {
+    content: '7';
+    ${POSITION}
+  }
+  .editor-comments-multi-8:before {
+    content: '8';
+    ${POSITION}
+  }
+  .editor-comments-multi-9:before {
+    content: '9';
+    ${POSITION}
+  }
+
+  .editor-comments-glyph.editor-comments-active {
+    opacity: 1;
+    background-image: url('${`data:image/svg+xml,%3Csvg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5Z" fill="${primary(
+      theme
+    )}"/%3E%3Cpath d="M5 5H0V10H5V5Z" fill="${primary(
+      theme
+    )}"/%3E%3C/svg%3E%0A`}');
+
+      &::before {
+        content: '';
+      }
+  }
+
+  .editor-comments-add:before {
+    content: '+';
+    font-size: 10px;
+    font-weight: bold;
+    top: 0;
+    left: ${theme.space[2]}px;
+  }
+`}
+`;

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

@@ -10,7 +10,6 @@ import {
 import { css } from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import React from 'react';
-
 import { AddComment } from './AddComment';
 import { Comment } from './Comment';
 

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

@@ -19,6 +19,7 @@ import { Navigation as NavigationOld } from './NavigationOld';
 import { ContentSkeleton } from './Skeleton';
 import getVSCodeTheme from './utils/get-vscode-theme';
 import { Workspace } from './Workspace';
+import { CommentsAPI } from './Workspace/screens/Comments/API';
 
 const STATUS_BAR_SIZE = 22;
 
@@ -203,6 +204,9 @@ const ContentSplit = () => {
 
         <ForkFrozenSandboxModal />
       </Container>
+      <NewThemeProvider theme={localState.theme.vscodeTheme}>
+        <CommentsAPI />
+      </NewThemeProvider>
     </ThemeProvider>
   );
 };