Change style header and new comment button

apps/app/public/static/locales/en_US/translation.json

@@ -14,6 +14,7 @@
   "desktop": "Desktop",
   "phone": "Smartphone",
   "tablet": "Tablet",
+  "comments": "Commments",
   "Click to copy": "Click to copy",
   "Rename": "Rename",
   "Move/Rename": "Move/Rename",

apps/app/public/static/locales/ja_JP/translation.json

@@ -14,6 +14,7 @@
   "desktop": "パソコン",
   "phone": "スマホ",
   "tablet": "タブレット",
+  "comments": "コメント",
   "Click to copy": "クリックでコピー",
   "Rename": "名前変更",
   "Move/Rename": "移動/名前変更",

apps/app/public/static/locales/zh_CN/translation.json

@@ -14,6 +14,7 @@
   "desktop": "电脑",
   "phone": "手机",
   "tablet": "平板",
+  "comments": "评论",
   "Login": "登录",
   "Click to copy": "点击复制",
   "Rename": "重命名",

apps/app/src/components/Comments.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 
 import type { IRevisionHasId } from '@growi/core';
 import { pagePathUtils } from '@growi/core/dist/utils';
+import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { debounce } from 'throttle-debounce';
 
@@ -33,6 +34,8 @@ export const Comments = (props: CommentsProps): JSX.Element => {
     pageId, pagePath, revision, onLoaded,
   } = props;
 
+  const { t } = useTranslation('');
+
   const { mutate } = useSWRxPageComment(pageId);
   const { trigger: mutatePageInfo } = useSWRMUTxPageInfo(pageId);
   const { data: isDeleted } = useIsTrashPage();
@@ -69,7 +72,8 @@ export const Comments = (props: CommentsProps): JSX.Element => {
   };
 
   return (
-    <div className="page-comments-row mt-5 py-4 border-top border-3 d-edit-none d-print-none">
+    <div className="page-comments-row mt-5 py-4 border-top d-edit-none d-print-none">
+      <h4 className="mb-3">{t('comments')}</h4>
       <div id="page-comments-list" className="page-comments-list" ref={pageCommentParentRef}>
         <PageComment
           pageId={pageId}

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

@@ -31,14 +31,6 @@
     // comment section
     .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;
-        }
-      }
 
       pointer-events: auto;
 

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

@@ -10,22 +10,12 @@
 
   .comment-form {
     position: relative;
-    margin-top: 1em;
 
     // user icon
     .picture {
       @extend %picture;
     }
 
-    // seciton
-    .comment-form-main {
-      @extend %comment-section;
-      margin-left: 4.5em;
-      @include bs.media-breakpoint-down(xs) {
-        margin-left: 3.5em;
-      }
-    }
-
     // textarea
     .comment-write {
       margin-bottom: 0.5em;

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

@@ -255,16 +255,19 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const renderBeforeReady = useCallback((): JSX.Element => {
     return (
-      <div className="text-center">
+      <div>
         <NotAvailableForGuest>
           <NotAvailableForReadOnlyUser>
             <button
               type="button"
-              className="btn btn-lg btn-link"
+              className="btn btn-secondary w-100 text-start py-3"
               onClick={() => setIsReadyToUse(true)}
               data-testid="open-comment-editor-button"
             >
-              <span className="material-symbols-outlined">comment</span> Add Comment
+              <span className="me-2">
+                <UserPicture user={currentUser} noLink noTooltip />
+              </span>
+              Add Comment in markdown...
             </button>
           </NotAvailableForReadOnlyUser>
         </NotAvailableForGuest>
@@ -398,9 +401,6 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   return (
     <div className={`${styles['comment-editor-styles']} form page-comment-form`}>
       <div className="comment-form">
-        <div className="comment-form-user">
-          <UserPicture user={currentUser} noLink noTooltip />
-        </div>
         <div className="comment-form-main">
           {isReadyToUse
             ? renderReady()

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

@@ -22,15 +22,8 @@
 }
 
 %picture {
-  float: left;
-  width: 3em;
-  height: 3em;
-  margin-top: 0.8em;
-
-  @include bs.media-breakpoint-down(xs) {
-    width: 2em;
-    height: 2em;
-  }
+  width: 1.2em;
+  height: 1.2em;
 }
 
 $codemirror-default-height: 300px;