clean code

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

@@ -1,19 +1,5 @@
 @use '~/styles/bootstrap/init' as bs;
 
-// .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;
-//   }
-// }
-
 // TODO: _comment_growi.scss, need to find where using h4 class.
 .page-comment-module :global {
   .page-comments {

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

@@ -1,122 +1,75 @@
 @use '../../styles/bootstrap/init' as bs;
 
-// 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;
-
-    @include bs.media-breakpoint-down(xs) {
-      width: 2em;
-      height: 2em;
-    }
-  }
+%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;
 
-  .page-comment-writer :global {
     @include bs.media-breakpoint-down(xs) {
-      height: 3.5em;
+      top: 1em;
     }
   }
+}
 
-  .page-comment :global {
-    position: relative;
-    padding-top: 70px;
-    margin-top: -70px;
-
-    // ユーザー名
-    .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;
-        }
-      }
-    }
+%picture {
+  float: left;
+  width: 3em;
+  height: 3em;
+  margin-top: 0.8em;
 
-    // コメント本文
-    .page-comment-body {
-      margin-bottom: 0.5em;
-      word-wrap: break-word;
-    }
+  @include bs.media-breakpoint-down(xs) {
+    width: 2em;
+    height: 2em;
   }
 }
 
-.page-comments {
-  .page-comments-list-toggle-older :global {
-    display: inline-block;
-    font-size: 0.9em;
+.page-comment-writer :global {
+  @include bs.media-breakpoint-down(xs) {
+    height: 3.5em;
   }
+}
 
-  .page-comment {
-    padding-top: 50px;
-    margin-top: -50px;
-    pointer-events: none;
-
-    // older comments
-    &.page-comment-older {
-    }
-    // newer comments
-    &.page-comment-newer {
-      opacity: 0.7;
+.page-comment :global {
+  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;
+  }
 
-      &:hover {
-        opacity: 1;
-      }
-    }
+  // ユーザーアイコン
+  .picture {
+    @extend %picture;
+  }
 
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
 
-      font-size: 0.9em;
-      color: bs.$gray-400;
+  // コメントセクション
+  .page-comment-main {
+    @extend %comment-section;
+    @include bs.media-breakpoint-up(sm) {
+      margin-left: 4.5em;
     }
-
-    .page-comment-revision svg {
-      width: 16px;
-      height: 16px;
+    @include bs.media-breakpoint-down(xs) {
+      &:before {
+        content: none;
+      }
     }
-  }
-
-  .page-comment-main {
+    // TODO: from _comment.scss ###
     pointer-events: auto;
 
     // delete button
@@ -130,5 +83,39 @@
     &:hover > .page-comment-control {
       visibility: visible;
     }
+    // ###
+  }
+
+  // コメント本文
+  .page-comment-body {
+    margin-bottom: 0.5em;
+    word-wrap: break-word;
+  }
+
+  // TODO: from _comment.scss ###
+  // 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;
   }
+  // ###
 }

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

@@ -73,10 +73,10 @@ export const Comment = (props: CommentProps): JSX.Element => {
     let className = `${styles['page-comment']} page-comment flex-column`;
 
     if (comment.revision === currentRevisionId) {
-      className += ' page-comment-current';
+      className += ' page-comment-current page-comment flex-column';
     }
     else if (comment.createdAt.getTime() > currentRevisionCreatedAt.getTime()) {
-      className += ' page-comment-newer';
+      className += ' page-comment-newer page-comment flex-column';
     }
     else {
       className += ' page-comment-older';
@@ -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={`${styles['page-comment-main']} page-comment-main`}>
+          <div className="page-comment-main">
             <div className="page-comment-creator">
               <Username user={creator} />
             </div>

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

@@ -1,13 +1,12 @@
-.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;
-  }
+/*
+* reply
+*/
+.page-comment-reply :global {
+  margin-top: 1em;
+}
+
+// remove margin after hidden replies
+.page-comments-hidden-replies + .page-comment-reply :global {
+  margin-top: 0;
 }

packages/app/src/styles/_comment.scss

@@ -21,18 +21,21 @@
   }
 
   .page-comment {
-    // older comments
-    &.page-comment-older {
-    }
-    // newer comments
-    &.page-comment-newer {
-      opacity: 0.7;
+    :global {
+      // older comments
+      &.page-comment-older {
+      }
+      // newer comments
+      &.page-comment-newer {
+        opacity: 0.7;
 
-      &:hover {
-        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
 
+
     .page-comment-meta {
       display: flex;
       justify-content: flex-end;