refactor

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

@@ -12,39 +12,12 @@
     margin-top: 0.5em;
     border: none;
   }
-}
-
-// TODO: Refacotr Soft-coding
-.page-comment-comment-body-skelton :global {
-  position: relative;
-  height: 66px;
-  padding: 1em;
-  margin-left: 4.5em;
-  @include bs.media-breakpoint-down(xs) {
-    margin-left: 3.5em;
-  }
-}
-
-.page-comment-replycomments-body-skelton :global{
-  position: relative;
-  height: 66px;
-  padding: 1em;
-  margin-left: 4.5em;
-}
-
-.page-comment-button-skelton :global {
-  width: 70.0167px;
-  height: 26.3833px;
-  margin-top: 0.5em;
-  border: none;
-}
 
-.page-comment-commenteditorlazyrenderer-body-skelton :global {
-  position: relative;
-  padding: 2.258rem 2rem;
-  margin-left: 4.5em;
-  line-height: 1.5;
-  @include bs.media-breakpoint-down(xs) {
-    margin-left: 3.5em;
+  // TODO: Refacotr Soft-coding
+  .page-comment-button-skelton {
+    width: 70.0167px;
+    height: 26.3833px;
+    margin-top: 0.5em;
+    border: none;
   }
 }

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

@@ -84,4 +84,15 @@
       height: 16px;
     }
   }
+
+  // TODO: Refacotr Soft-coding
+  .page-comment-comment-body-skelton {
+    position: relative;
+    height: 66px;
+    padding: 1em;
+    margin-left: 4.5em;
+    @include bs.media-breakpoint-down(xs) {
+      margin-left: 3.5em;
+    }
+  }
 }

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

@@ -29,4 +29,15 @@
       padding-top: 0.5em;
     }
   }
+
+  // TODO: Refacotr Soft-coding
+  .page-comment-commenteditorlazyrenderer-body-skelton {
+    position: relative;
+    padding: 2.258rem 2rem;
+    margin-left: 4.5em;
+    line-height: 1.5;
+    @include bs.media-breakpoint-down(xs) {
+      margin-left: 3.5em;
+    }
+  }
 }

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

@@ -20,7 +20,7 @@ const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor'
         <div className='comment-form-user'>
           <Skelton additionalClass='rounded-circle picture' roundedPill />
         </div>
-        <Skelton additionalClass={`${styles['page-comment-commenteditorlazyrenderer-body-skelton']} grw-skelton`} />
+        <Skelton additionalClass="page-comment-commenteditorlazyrenderer-body-skelton grw-skelton" />
       </div>
     </div>,
   });

packages/app/src/components/PageCommentSkelton.tsx

@@ -29,16 +29,16 @@ export const PageCommentSkelton = (props: PageCommentSkeltonProps): JSX.Element
                   <div className='page-commnet-writer'>
                     <Skelton additionalClass='rounded-circle picture' roundedPill />
                   </div>
-                  <Skelton additionalClass={`${styles['page-comment-comment-body-skelton']} grw-skelton`} />
+                  <Skelton additionalClass="page-comment-comment-body-skelton grw-skelton" />
                 </div>
                 <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={`${styles['page-comment-comment-body-skelton']} grw-skelton mt-3`} />
+                  <Skelton additionalClass="page-comment-comment-body-skelton grw-skelton mt-3" />
                 </div>
                 <div className="text-right">
-                  <Skelton additionalClass={`${styles['page-comment-button-skelton']} btn btn-outline-secondary btn-sm grw-skelton`} />
+                  <Skelton additionalClass="page-comment-button-skelton btn btn-outline-secondary btn-sm grw-skelton" />
                 </div>
               </div>
             </div>
@@ -47,7 +47,7 @@ export const PageCommentSkelton = (props: PageCommentSkeltonProps): JSX.Element
                 <div className='comment-form-user'>
                   <Skelton additionalClass='rounded-circle picture' roundedPill />
                 </div>
-                <Skelton additionalClass={`${styles['page-comment-commenteditorlazyrenderer-body-skelton']} grw-skelton`} />
+                <Skelton additionalClass="page-comment-commenteditorlazyrenderer-body-skelton grw-skelton" />
               </div>
             </div>
           </div>