clean scss code

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

@@ -1,61 +1,28 @@
 @use '~/styles/bootstrap/init' as bs;
 
-.page-comments :global {
-  .page-comments-list-toggle-older {
-    display: inline-block;
-    font-size: 0.9em;
-  }
-  .page-comment {
-    padding-top: 50px;
-    margin-top: -50px;
-    pointer-events: none;
-  }
-
-  .page-comment {
-    // older comments
-    &.page-comment-older {
-    }
-    // newer comments
-    &.page-comment-newer {
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
-
-      font-size: 0.9em;
-      color: bs.$gray-400;
-    }
-
-    .page-comment-revision svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .page-comment-main {
-    pointer-events: auto;
-
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-    }
-
-    &:hover > .page-comment-control {
-      visibility: visible;
+// .page-comments :global {
+//   // TODO: Never use this selector in PageComment.tsx
+//   .page-comments-list-toggle-older {
+//     display: inline-block;
+//     font-size: 0.9em;
+//   }
+//   // TODO: Never use this selector in PageComment.tsx
+//   .page-comment {
+//     padding-top: 50px;
+//     margin-top: -50px;
+//     pointer-events: none;
+//   }
+// }
+
+.growi {
+  .page-comments :global {
+    h4 {
+      margin-bottom: 1em;
     }
   }
 
   // reply button
-  .btn-comment-reply {
+  .btn-comment-reply :global {
     margin-top: 0.5em;
     border: none;
   }

packages/app/src/components/PageComment.tsx

@@ -127,6 +127,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
     return (
       <>
         <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
+          {/* TODO: container-lg expected global import, _override.scss */}
           <div className="container-lg">
             <div className={`${styles['page-comments']} page-comments`}>
               <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
@@ -169,6 +170,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
   return (
     <>
       <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
+        {/* TODO: container-lg expected global import, _override.scss */}
         <div className="container-lg">
           <div className={`${styles['page-comments']} page-comments`}>
             <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
@@ -194,7 +196,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
                           outline
                           color="secondary"
                           size="sm"
-                          className="btn-comment-reply"
+                          className={`${styles['btn-comment-reply']} btn-comment-reply`}
                           onClick={() => {
                             setShowEditorIds(previousState => new Set(previousState.add(comment._id)));
                           }}

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

@@ -1,77 +1,94 @@
 @use '../../styles/bootstrap/init' as bs;
 
-%comment-section {
-  position: relative;
-  padding: 1em;
-
-  // speech balloon
-  &:before {
-    position: absolute;
-    top: 1.5em;
-    left: -1em;
-    display: block;
-    width: 0;
-    content: '';
-    border: 1em solid transparent;
-    border-left-width: 0;
-
-    @include bs.media-breakpoint-down(xs) {
-      top: 1em;
+// TODO: From _comment_growi.scss
+.growi {
+  %comment-section {
+    position: relative;
+    padding: 1em;
+
+    // speech balloon
+    &:before {
+      position: absolute;
+      top: 1.5em;
+      left: -1em;
+      display: block;
+      width: 0;
+      content: '';
+      border: 1em solid transparent;
+      border-left-width: 0;
+
+      @include bs.media-breakpoint-down(xs) {
+        top: 1em;
+      }
     }
   }
-}
 
-%picture {
-  float: left;
-  width: 3em;
-  height: 3em;
-  margin-top: 0.8em;
+  %picture {
+    float: left;
+    width: 3em;
+    height: 3em;
+    margin-top: 0.8em;
 
-  @include bs.media-breakpoint-down(xs) {
-    width: 2em;
-    height: 2em;
+    @include bs.media-breakpoint-down(xs) {
+      width: 2em;
+      height: 2em;
+    }
   }
-}
 
-.page-comment-writer :global {
-  @include bs.media-breakpoint-down(xs) {
-    height: 3.5em;
+  .page-comment-writer :global {
+    @include bs.media-breakpoint-down(xs) {
+      height: 3.5em;
+    }
   }
-}
 
-.page-comment :global {
-  h4 {
-    margin-bottom: 1em;
-  }
+  .page-comment :global {
+    position: relative;
+    padding-top: 70px;
+    margin-top: -70px;
 
-  position: relative;
-  padding-top: 70px;
-  margin-top: -70px;
-  pointer-events: none;
+    // ユーザー名
+    .page-comment-creator {
+      margin-top: -0.5em;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+    }
 
-  // ユーザー名
-  .page-comment-creator {
-    margin-top: -0.5em;
-    margin-bottom: 0.5em;
-    font-weight: bold;
+    // ユーザーアイコン
+    .picture {
+      @extend %picture;
+    }
+
+    // コメントセクション
+    .page-comment-main {
+      @extend %comment-section;
+      @include bs.media-breakpoint-up(sm) {
+        margin-left: 4.5em;
+      }
+      @include bs.media-breakpoint-down(xs) {
+        &:before {
+          content: none;
+        }
+      }
+    }
+
+    // コメント本文
+    .page-comment-body {
+      margin-bottom: 0.5em;
+      word-wrap: break-word;
+    }
   }
+}
 
-  // ユーザーアイコン
-  .picture {
-    @extend %picture;
+.page-comments {
+  .page-comments-list-toggle-older :global {
+    display: inline-block;
+    font-size: 0.9em;
   }
 
-  // コメントセクション
-  .page-comment-main {
-    @extend %comment-section;
-    @include bs.media-breakpoint-up(sm) {
-      margin-left: 4.5em;
-    }
-    @include bs.media-breakpoint-down(xs) {
-      &:before {
-        content: none;
-      }
-    }
+  .page-comment {
+    padding-top: 50px;
+    margin-top: -50px;
+    pointer-events: none;
 
     // older comments
     &.page-comment-older {
@@ -99,9 +116,19 @@
     }
   }
 
-  // コメント本文
-  .page-comment-body {
-    margin-bottom: 0.5em;
-    word-wrap: break-word;
+  .page-comment-main {
+    pointer-events: auto;
+
+    // delete button
+    .page-comment-control {
+      position: absolute;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+    }
+
+    &:hover > .page-comment-control {
+      visibility: visible;
+    }
   }
 }

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

@@ -136,7 +136,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
           <div className={`${styles['page-comment-writer']} page-comment-writer`}>
             <UserPicture user={creator} noLink noTooltip />
           </div>
-          <div className="page-comment-main">
+          <div className={`${styles['page-comment-main']} page-comment-main`}>
             <div className="page-comment-creator">
               <Username user={creator} />
             </div>

packages/app/src/components/PageComment/ReplayComment.module.scss

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