Move scss style

apps/app/src/components/Comments.tsx

@@ -14,6 +14,7 @@ import { useCurrentUser } from '../stores/context';
 
 import type { CommentEditorProps } from './PageComment/CommentEditor';
 
+import styles from './PageComment.module.scss';
 
 const { isTopPage } = pagePathUtils;
 
@@ -72,7 +73,7 @@ export const Comments = (props: CommentsProps): JSX.Element => {
   };
 
   return (
-    <div className="page-comments-row mt-5 py-4 border-top d-edit-none d-print-none">
+    <div className={`${styles['page-comment-styles']} page-comments-row mt-5 py-4 border-top d-edit-none d-print-none`}>
       <h4 className="mb-3">{t('comments')}</h4>
       <div id="page-comments-list" className="page-comments-list" ref={pageCommentParentRef}>
         <PageComment

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

@@ -21,6 +21,7 @@
   }
 }
 
+// // Light mode color
 @include bs.color-mode(light) {
   .page-comment-styles :global {
     .btn-comment-reply {
@@ -31,9 +32,20 @@
       --bs-btn-border-color: #{( bs.$gray-200 )};
       --bs-btn-hover-border-color: #{( bs.$gray-300 )};
     }
+
+    .bg-comment {
+      background-color: rgba( bs.$gray-200, 0.5 );
+      border: 1px solid bs.$gray-200;
+      backdrop-filter: blur(10px);
+    }
+
+    .comment-timestamp {
+      color: bs.$gray-500;
+    }
   }
 }
 
+// dark mode color
 @include bs.color-mode(dark) {
   .page-comment-styles :global {
     .btn-comment-reply {
@@ -44,5 +56,15 @@
       --bs-btn-border-color: #{( bs.$gray-700 )};
       --bs-btn-hover-border-color: #{( bs.$gray-600 )};
     }
+
+    .bg-comment {
+      background-color: rgba( bs.$gray-800, 0.3 );
+      border: 1px solid bs.$gray-700;
+      backdrop-filter: blur(10px);
+    }
+
+    .comment-timestamp {
+      color: bs.$gray-600;
+    }
   }
 }

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

@@ -84,35 +84,3 @@
     }
   }
 }
-
-// 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(10px);
-    }
-
-    .comment-timestamp {
-      color: bs.$gray-500;
-    }
-  }
-}
-
-// dark mode color
-@include bs.color-mode(dark) {
-  .comment-styles :global {
-    // == Colors
-    .bg-comment {
-      background-color: rgba( bs.$gray-800, 0.3 );
-      border: 1px solid bs.$gray-700;
-      backdrop-filter: blur(10px);
-    }
-
-    .comment-timestamp {
-      color: bs.$gray-600;
-    }
-  }
-}