clean code

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

@@ -1,12 +1,9 @@
-@use '~/styles/bootstrap/init' as bs;
-
-// TODO: _comment_growi.scss, need to find where using h4 class.
 .page-comment-module :global {
-  // .page-comments {
-  //   h4 {
-  //     margin-bottom: 1em;
-  //   }
-  // }
+  .page-comments {
+    h4 {
+      margin-bottom: 1em;
+    }
+  }
 
   // reply button
   .btn-comment-reply {

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

@@ -1,39 +1,8 @@
 @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;
-    }
-  }
-}
-
-%picture {
-  float: left;
-  width: 3em;
-  height: 3em;
-  margin-top: 0.8em;
-
-  @include bs.media-breakpoint-down(xs) {
-    width: 2em;
-    height: 2em;
-  }
-}
+@use './_comment-inheritance';
 
 // TODO: Never use this class. From _comment.scss
+// pointer-events moved to .page-commnet
 .page-comments {
   // .page-comments-list-toggle-older {
   //   display: inline-block;
@@ -82,7 +51,7 @@
           content: none;
         }
       }
-      // TODO: from _comment.scss ###
+
       pointer-events: auto;
 
       // delete button
@@ -96,7 +65,6 @@
       &:hover > .page-comment-control {
         visibility: visible;
       }
-      // ###
     }
 
     // コメント本文
@@ -105,7 +73,6 @@
       word-wrap: break-word;
     }
 
-    // TODO: from _comment.scss ###
     // older comments
     &.page-comment-older {
     }
@@ -130,6 +97,5 @@
       width: 16px;
       height: 16px;
     }
-    // ###
   }
 }

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

@@ -118,7 +118,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
     : null;
 
   return (
-    <>
+    <div className={`${styles['comment-styles']}`}>
       {(isReEdit && !isReadOnly) ? (
         <CommentEditor
           rendererOptions={rendererOptions}
@@ -132,7 +132,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
           }}
         />
       ) : (
-        <div id={commentId} className={`${styles['comment-styles']} ${rootClassName}`}>
+        <div id={commentId} className={rootClassName}>
           <div className="page-comment-writer">
             <UserPicture user={creator} noLink noTooltip />
           </div>
@@ -170,6 +170,6 @@ export const Comment = (props: CommentProps): JSX.Element => {
         </div>
       )
       }
-    </>
+    </div>
   );
 };

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import styles from './CommentControl.module.scss';
+
 type CommentControlProps = {
   onClickEditBtn: () => void,
   onClickDeleteBtn: () => void,

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

@@ -1,41 +1,10 @@
 @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;
-    }
-  }
-}
-
-%picture {
-  float: left;
-  width: 3em;
-  height: 3em;
-  margin-top: 0.8em;
-
-  @include bs.media-breakpoint-down(xs) {
-    width: 2em;
-    height: 2em;
-  }
-}
+@use './_comment-inheritance';
 
 // display cheatsheet for comment form only
 .comment-editor-styles :global {
   .comment-form {
+    // TODO: Never use this class
     // .editor-cheatsheet {
     //   display: none;
     // }
@@ -61,6 +30,7 @@
     .comment-write {
       margin-bottom: 0.5em;
     }
+    // TODO: Never use this class
     // .comment-form-comment {
     //   height: 80px;
     //   &:focus,

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

@@ -0,0 +1,10 @@
+// modal
+.page-comment-delete-modal :global {
+  .modal-content .modal-body {
+    .comment-body {
+      max-height: 13em;
+      // scrollable
+      overflow-y: auto;
+    }
+  }
+}

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

@@ -9,6 +9,8 @@ import {
 import { ICommentHasId } from '../../interfaces/comment';
 import Username from '../User/Username';
 
+import styles from './DeleteCommentModal.module.scss';
+
 
 type DeleteCommentModalProps = {
   isShown: boolean,
@@ -39,7 +41,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
   const commentBodyElement = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
 
   return (
-    <Modal isOpen={isShown} toggle={cancel} className="page-comment-delete-modal">
+    <Modal isOpen={isShown} toggle={cancel} className={`${styles['page-comment-delete-modal']}`}>
       <ModalHeader tag="h4" toggle={cancel} className="bg-danger text-light">
         <span>
           <i className="icon-fw icon-fire"></i>

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

@@ -1,4 +1,3 @@
-
 /*
 * reply
 */

packages/app/src/components/PageComment/_comment-inheritance.scss

@@ -0,0 +1,34 @@
+@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;
+    }
+  }
+}
+
+%picture {
+  float: left;
+  width: 3em;
+  height: 3em;
+  margin-top: 0.8em;
+
+  @include bs.media-breakpoint-down(xs) {
+    width: 2em;
+    height: 2em;
+  }
+}

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

@@ -1,6 +1,6 @@
 @use '~/styles/bootstrap/init' as bs;
 
-// TODO: This selectors from "/workspace/growi/packages/app/src/styles/_page-content-footer.scss"
+// TODO: This class from "/workspace/growi/packages/app/src/styles/_page-content-footer.scss"
 .page-content-footer :global {
   border-top: solid 1px transparent;
   .page-meta {

packages/app/src/styles/_comment.scss

@@ -8,58 +8,3 @@
     }
   }
 }
-
-// .page-comments {
-//   // .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: $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;
-//     }
-//   }
-// }

packages/app/src/styles/_comment_growi.scss

@@ -1,139 +0,0 @@
-// .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 media-breakpoint-down(xs) {
-//         top: 1em;
-//       }
-//     }
-//   }
-
-//   %picture {
-//     float: left;
-//     width: 3em;
-//     height: 3em;
-//     margin-top: 0.8em;
-
-//     @include media-breakpoint-down(xs) {
-//       width: 2em;
-//       height: 2em;
-//     }
-//   }
-
-//   .page-comments {
-//     h4 {
-//       margin-bottom: 1em;
-//     }
-//   }
-
-  // .page-comment-writer {
-  //   @include media-breakpoint-down(xs) {
-  //     height: 3.5em;
-  //   }
-  // }
-
-  // .page-comment {
-  //   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 media-breakpoint-up(sm) {
-  //       margin-left: 4.5em;
-  //     }
-  //     @include media-breakpoint-down(xs) {
-  //       &:before {
-  //         content: none;
-  //       }
-  //     }
-  //   }
-
-  //   // コメント本文
-  //   .page-comment-body {
-  //     margin-bottom: 0.5em;
-  //     word-wrap: break-word;
-  //   }
-  // }
-
-  // /*
-  //  * reply
-  //  */
-  // .page-comment-reply {
-  //   margin-top: 1em;
-  // }
-  // // remove margin after hidden replies
-  // .page-comments-hidden-replies + .page-comment-reply {
-  //   margin-top: 0;
-  // }
-  // // reply button
-  // .btn.btn-comment-reply {
-  //   margin-top: 0.5em;
-  //   border: none;
-  // }
-
-  // // display cheatsheet for comment form only
-  // .comment-form {
-  //   .editor-cheatsheet {
-  //     display: none;
-  //   }
-
-  //   position: relative;
-  //   margin-top: 1em;
-
-  //   // user icon
-  //   .picture {
-  //     @extend %picture;
-  //   }
-
-  //   // seciton
-  //   .comment-form-main {
-  //     @extend %comment-section;
-  //     margin-left: 4.5em;
-  //     @include media-breakpoint-down(xs) {
-  //       margin-left: 3.5em;
-  //     }
-  //   }
-
-  //   // textarea
-  //   .comment-write {
-  //     margin-bottom: 0.5em;
-  //   }
-  //   .comment-form-comment {
-  //     height: 80px;
-  //     &:focus,
-  //     &:not(:invalid) {
-  //       height: 180px;
-  //       transition: height 0.2s ease-out;
-  //     }
-  //   }
-  //   .comment-form-preview {
-  //     padding-top: 0.5em;
-  //   }
-  // }
-}

packages/app/src/styles/_page-content-footer.scss

@@ -1,6 +0,0 @@
-.page-content-footer {
-  border-top: solid 1px transparent;
-  .page-meta {
-    font-size: 0.95em;
-  }
-}