update PageComment

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

@@ -12,23 +12,23 @@
   }
 }
 
-// TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
-.page-comment-comment-skelton :global {
-  width: 300px;
-  height: 20px;
+.page-comment-comment-body-skelton :global {
+  position: relative;
+  height: 66px;
+  padding: 1em;
+  margin-left: 4.5em;
 }
 
-.page-comment-replycomments-skelton :global {
-  width: 300px;
-  height: 20px;
+.page-comment-replycomments-body-skelton :global{
+  position: relative;
+  height: 66px;
+  padding: 1em;
+  margin-left: 4.5em;
 }
 
 .page-comment-button-skelton :global {
-  width: 300px;
-  height: 20px;
-}
-
-.page-comment-commentlazyeditorrenderer-skelton :global {
-  width: 300px;
-  height: 20px;
+  width: 70.0167px;
+  height: 26.3833px;
+  margin-top: 0.5em;
+  border: none;
 }

packages/app/src/components/PageComment.tsx

@@ -19,6 +19,12 @@ import { CommentEditor } from './PageComment/CommentEditor';
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
+import { Skelton } from './Skelton';
+
+import styles from './PageComment.module.scss';
+import CommentStyles from './PageComment/Comment.module.scss';
+import CommentEditorStyles from './PageComment/CommentEditor.module.scss';
+
 
 type Props = {
   pageId?: Nullable<string>
@@ -131,31 +137,37 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
     return (
       <>
         {/* TODO: Check the comment.html CSS */}
-        <div className="page-comments-row comment-list">
+        <div className={`${styles['page-comment-styles']} page-comments-row comment-list`}>
           <div className="container-lg">
             <div className="page-comments">
               <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
               <div className="page-comments-list" id="page-comments-list">
-                <div className='page-comment-thread pb-5  page-comment-thread-no-replies'>
+                <div className={`${CommentStyles['comment-styles']} page-comment-thread pb-5  page-comment-thread-no-replies`}>
                   <div className='page-comment flex-column'>
                     <div className='page-commnet-writer'>
-                      <Skelton additionalClass='rounded-circle pictur mb-3' />
+                      <Skelton additionalClass='rounded-circle picture' roundedPill />
                     </div>
-                    <Skelton additionalClass="page-comment-main mb-3" />
+                    <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
                   </div>
-                  <div className='page-comment flex-column'>
-                    <div className='page-commnet-writer'>
-                      <Skelton additionalClass='rounded-circle pictur mb-3' />
+                  <div className='page-comment flex-column ml-4 ml-sm-5 mr-3'>
+                    <div className='page-commnet-writer mt-3'>
+                      <Skelton additionalClass='rounded-circle picture' roundedPill />
                     </div>
-                    <Skelton additionalClass="page-comment-main mb-3" />
+                    <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton mt-3`} />
                   </div>
                   <div className="text-right">
-                    <Skelton additionalClass={`${styles['page-comment-button-skelton']}`} />
+                    <Skelton additionalClass={`${styles['page-comment-button-skelton']} btn btn-outline-secondary btn-sm grw-skelton`} />
+                  </div>
+                </div>
+              </div>
+              <div className={`${CommentEditorStyles['comment-editor-styles']} form page-comment-form`}>
+                <div className='comment-form'>
+                  <div className='comment-form-user'>
+                    <Skelton additionalClass='rounded-circle picture' roundedPill />
                   </div>
+                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
                 </div>
               </div>
-              <Skelton additionalClass={`${styles['page-comment-commentlazyeditorrenderer-writer-skelton']}`} />
-              <Skelton additionalClass={`${styles['page-comment-commentlazyeditorrenderer-body-skelton']}`} />
             </div>
           </div>
         </div>

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

@@ -11,33 +11,3 @@
   width: 300px;
   height: 20px;
 }
-
-.page-comment-comment-writer-skelton :global {
-  height: 3.5em;
-}
-
-.page-comment-comment-body-skelton :global {
-  margin-bottom: 0.5em;
-  margin-left: 4.5em;
-  word-wrap: break-word;
-}
-
-.page-comment-replycomments-writer-skelton :global {
-  height: 3.5em;
-}
-
-.page-comment-replycomments-body-skelton :global{
-  margin-bottom: 0.5em;
-  margin-left: 4.5em;
-  word-wrap: break-word;
-}
-
-.page-comment-commentlazyeditorrenderer-writer-skelton :global {
-  height: 3.5em;
-}
-
-.page-comment-commentlazyeditorrenderer-body-skelton :global {
-  margin-bottom: 0.5em;
-  margin-left: 4.5em;
-  word-wrap: break-word;
-}