style-modal

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -13,6 +13,7 @@ import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
@@ -33,7 +34,7 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { useComments } from './comments/useComments';
+import { cssComments, useComments } from './comments/';
 import {
   AccessibleImageBlock,
   CalloutBlock,
@@ -200,7 +201,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     <Box
       $padding={{ top: 'md' }}
       $background="white"
-      $css={cssEditor(readOnly, canSeeComment)}
+      $css={css`
+        ${cssEditor(readOnly)};
+        ${cssComments(canSeeComment)}
+      `}
       className="--docs--editor-container"
     >
       {errorAttachment && (
@@ -255,7 +259,10 @@ export const BlockNoteEditorVersion = ({
 
   return (
     <Box
-      $css={cssEditor(readOnly, canSeeComment)}
+      $css={css`
+        ${cssEditor(readOnly)};
+        ${cssComments(canSeeComment)}
+      `}
       className="--docs--editor-container"
     >
       <BlockNoteView

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './useComments';

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+
+export const cssComments = (canSeeComment: boolean) => css`
+  & .--docs--main-editor,
+  & .--docs--main-editor .ProseMirror {
+    .bn-editor {
+      .bn-thread-mark:not([data-orphan='true']),
+      .bn-thread-mark-selected:not([data-orphan='true']) {
+        background: ${canSeeComment ? '#F4D261' : 'transparent'};
+        color: var(--c--theme--colors--greyscale-700);
+      }
+    }
+
+    .bn-thread {
+      max-width: 400px;
+      width: 100%;
+      padding: 0.4rem;
+
+      .bn-thread-comment {
+        padding: 1rem;
+
+        &:hover,
+        &:hover .bn-editor {
+          background-color: #fafafa;
+        }
+
+        .mantine-Group-root {
+          right: 0.3rem !important;
+          top: 0.3rem !important;
+
+          .bn-comment-actions {
+            background: transparent;
+            border: none;
+
+            .mantine-Button-root {
+              background-color: transparent;
+
+              &:hover {
+                background-color: var(--c--theme--colors--greyscale-100);
+              }
+            }
+          }
+
+          & svg {
+            color: var(--c--theme--colors--info-600);
+          }
+        }
+      }
+    }
+  }
+`;

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-export const cssEditor = (readonly: boolean, canSeeComment: boolean) => css`
+export const cssEditor = (readonly: boolean) => css`
   & {
     height: 100%;
     padding-bottom: 2rem;
@@ -124,15 +124,6 @@ export const cssEditor = (readonly: boolean, canSeeComment: boolean) => css`
       border-left: 4px solid var(--c--theme--colors--greyscale-300);
       font-style: italic;
     }
-
-    /**
-     * Comments
-     */
-    .bn-thread-mark:not([data-orphan='true']),
-    .bn-thread-mark-selected:not([data-orphan='true']) {
-      background: ${canSeeComment ? '#F4D261' : 'transparent'};
-      color: var(--c--theme--colors--greyscale-700);
-    }
   }
 
   & .bn-block-outer:not(:first-child) {