Change style comment background

apps/app/src/components/PageComment/Comment.module.scss

@@ -84,3 +84,27 @@
     }
   }
 }
+
+// Light mode color
+@include bs.color-mode(light) {
+  .comment-styles :global {
+    // == Colors
+    .bg-comment {
+      background-color: rgba( bs.$gray-200, 0.5 );
+      border: 1px solid bs.$gray-200;
+      backdrop-filter: blur(35px);
+    }
+  }
+}
+
+// dark mode color
+@include bs.color-mode(dark) {
+  .comment-styles :global {
+    // == Colors
+    .bg-comment {
+      background-color: rgba( bs.$gray-200, 0.5 );
+      border: 1px solid bs.$gray-200;
+      backdrop-filter: blur(35px);
+    }
+  }
+}

apps/app/src/components/PageComment/Comment.tsx

@@ -147,7 +147,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
         />
       ) : (
         <div id={commentId} className={rootClassName}>
-          <div className="page-comment-main bg-secondary rounded mb-2">
+          <div className="page-comment-main bg-comment rounded mb-2">
             <div className="d-flex align-items-center">
               <UserPicture user={creator} additionalClassName="me-2" />
               <div className="small fw-bold me-3">

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -242,14 +242,13 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           <NotAvailableForReadOnlyUser>
             <button
               type="button"
-              className="btn btn-secondary w-100 text-start py-3"
+              className="btn btn-outline-primary w-100 text-start py-3"
               onClick={() => setIsReadyToUse(true)}
               data-testid="open-comment-editor-button"
             >
-              <span className="me-2">
-                <UserPicture user={currentUser} noLink noTooltip />
-              </span>
-              Add Comment in markdown...
+              <UserPicture user={currentUser} noLink noTooltip additionalClassName="me-3" />
+              <span className="material-symbols-outlined me-1 fs-5">add_comment</span>
+              <small>Add Comment in markdown...</small>
             </button>
           </NotAvailableForReadOnlyUser>
         </NotAvailableForGuest>
@@ -385,7 +384,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   return (
     <div className={`${styles['comment-editor-styles']} form page-comment-form`}>
       <div className="comment-form">
-        <div className="comment-form-main bg-secondary rounded">
+        <div className="comment-form-main bg-comment rounded">
           {isReadyToUse
             ? renderReady()
             : renderBeforeReady()

apps/app/src/components/PageComment/ReplyComments.module.scss

@@ -1,9 +1,3 @@
-/*
-* reply
-*/
-.page-comment-reply :global {
-  margin-top: 1em;
-}
 
 // remove margin after hidden replies
 .page-comments-hidden-replies + .page-comment-reply :global {

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -205,7 +205,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
+    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden rounded`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />