update PageContentFooter

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

@@ -1,29 +1,6 @@
 @use '~/styles/bootstrap/init' as bs;
 
-$bgcolor-global: white;
-
 .page-comments :global {
-  /*
-  * GROWI comment form
-  */
-  .page-comment .page-comment-main,
-  .page-comment-form .comment-form-main {
-    background-color: $bgcolor-global;
-
-    &:before {
-      border-right-color: $bgcolor-global;
-    }
-
-    .nav.nav-tabs {
-      > li > a.active {
-        background: transparent;
-        border-bottom: solid 1px darken($bgcolor-global, 4%);
-        border-bottom-color: darken($bgcolor-global, 4%);
-      }
-    }
-  }
-
-
   .page-comments-list-toggle-older {
     display: inline-block;
     font-size: 0.9em;

packages/app/src/components/PageComment.tsx

@@ -128,7 +128,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
       <>
         <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
           <div className="container-lg">
-            <div className={`${styles['page-comments']}`}>
+            <div className={`${styles['page-comments']} page-comments`}>
               <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
               <div className="text-muted text-center mt-3">
                 <i className="fa fa-lg fa-spinner fa-pulse mr-1"></i>
@@ -170,7 +170,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
     <>
       <div className="page-comments-row comment-list mt-5 py-4 d-edit-none d-print-none">
         <div className="container-lg">
-          <div className={`${styles['page-comments']}`}>
+          <div className={`${styles['page-comments']} page-comments`}>
             <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>
             <div className="page-comments-list" id="page-comments-list">
               { commentsExceptReply.map((comment) => {

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

@@ -1,7 +1,5 @@
 @use '../../styles/bootstrap/init' as bs;
 
-$bgcolor-global: white;
-
 %comment-section {
   position: relative;
   padding: 1em;
@@ -99,23 +97,6 @@ $bgcolor-global: white;
       width: 16px;
       height: 16px;
     }
-
-    /*
-      * GROWI comment form
-    */
-    background-color: $bgcolor-global;
-
-    &:before {
-      border-right-color: $bgcolor-global;
-    }
-
-    .nav.nav-tabs {
-      > li > a.active {
-        background: transparent;
-        border-bottom: solid 1px darken($bgcolor-global, 4%);
-        border-bottom-color: darken($bgcolor-global, 4%);
-      }
-    }
   }
 
   // コメント本文

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

@@ -70,7 +70,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
   };
 
   const getRootClassName = (comment) => {
-    let className = `${styles['page-comment']} flex-column`;
+    let className = `${styles['page-comment']} page-comment flex-column`;
 
     if (comment.revision === currentRevisionId) {
       className += ' page-comment-current';
@@ -133,7 +133,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
         />
       ) : (
         <div id={commentId} className={rootClassName}>
-          <div className={`${styles['page-comment-writer']}`}>
+          <div className={`${styles['page-comment-writer']} page-comment-writer`}>
             <UserPicture user={creator} noLink noTooltip />
           </div>
           <div className="page-comment-main">

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

@@ -334,7 +334,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
   return (
     <div className="form page-comment-form">
-      <div className={`${styles['comment-form']}`}>
+      <div className={`${styles['comment-form']} comment-form`}>
         <div className="comment-form-user">
           <UserPicture user={currentUser} noLink noTooltip />
         </div>

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

@@ -1,6 +1,6 @@
 /*
-  * reply
-  */
+* reply
+*/
 .page-comment-reply :global {
   margin-top: 1em;
 }

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

@@ -36,7 +36,7 @@ export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
 
   const renderReply = (reply: ICommentHasId) => {
     return (
-      <div key={reply._id} className={`${styles['page-comment-reply']} ml-4 ml-sm-5 mr-3`}>
+      <div key={reply._id} className={`${styles['page-comment-reply']} page-comment-reply ml-4 ml-sm-5 mr-3`}>
         <Comment
           rendererOptions={rendererOptions}
           deleteBtnClicked={deleteBtnClicked}
@@ -79,7 +79,7 @@ export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
   return (
     <>
       {areThereHiddenReplies && (
-        <div className={`${styles['page-comments-hidden-replies']}`}>
+        <div className={`${styles['page-comments-hidden-replies']} page-comments-hidden-replies`}>
           <Collapse isOpen={isOlderRepliesShown}>
             <div>{hiddenElements}</div>
           </Collapse>

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

@@ -1,16 +1,8 @@
 @use '~/styles/bootstrap/init' as bs;
 
-$bgcolor-global: white;
-$border-color-theme: bs.$gray-400;
-
+// TODO: This selectors from "/workspace/growi/packages/app/src/styles/_page-content-footer.scss"
 .page-content-footer :global {
-  /*
-  * GROWI page content footer
-  */
-  background-color: darken($bgcolor-global, 2%);
   border-top: solid 1px transparent;
-  border-top-color: $border-color-theme;
-
   .page-meta {
     font-size: 0.95em;
   }

packages/app/src/components/PageContentFooter.tsx

@@ -10,17 +10,20 @@ import styles from './PageContentFooter.module.scss';
 
 export const PageContentFooter = memo((): JSX.Element => {
 
+  // TODO: update Skelton props
   const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'),
     { ssr: false, loading: () => <Skelton width={300} height={20} additionalClass={'mb-3'} /> });
 
   const { data: page } = useSWRxCurrentPage();
 
+  // TODO: update Skelton props
   if (page == null) {
-    return <></>;
+    return <Skelton width={300} height={20} additionalClass={'mb-3'} />;
   }
 
   return (
-    <div className={`${styles['page-content-footer']} py-4 d-edit-none d-print-none}`}>
+    // TODO: page-content-footer, scss module import and global import.
+    <div className={`${styles['page-content-footer']} page-content-footer py-4 d-edit-none d-print-none}`}>
       <div className="grw-container-convertible">
         <div className="page-meta">
           <AuthorInfo user={page.creator} date={page.createdAt} mode="create" locate="footer" />