Change style comment write

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

@@ -15,6 +15,7 @@
   "phone": "Smartphone",
   "tablet": "Tablet",
   "comments": "Commments",
+  "comment": "Commment",
   "Click to copy": "Click to copy",
   "Rename": "Rename",
   "Move/Rename": "Move/Rename",

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

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

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

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

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

@@ -49,7 +49,6 @@
 
     // comment body
     .page-comment-body {
-      margin-bottom: 0.5em;
       word-wrap: break-word;
     }
 

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

@@ -17,9 +17,6 @@
     }
 
     // textarea
-    .comment-write {
-      margin-bottom: 0.5em;
-    }
     .comment-form-preview {
       padding-top: 0.5em;
     }

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

@@ -6,6 +6,7 @@ import {
   CodeMirrorEditorComment, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
 } from '@growi/editor';
 import { UserPicture } from '@growi/ui/dist/components';
+import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import {
@@ -97,6 +98,8 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const [slackChannels, setSlackChannels] = useState<string>('');
   const [incremented, setIncremented] = useState(false);
 
+  const { t } = useTranslation('');
+
   const editorRef = useRef<IEditorMethods>(null);
 
   const router = useRouter();
@@ -308,30 +311,25 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     const errorMessage = <span className="text-danger text-end me-2">{error}</span>;
     const cancelButton = (
       <Button
-        outline
-        color="danger"
-        size="xs"
-        className="btn btn-outline-danger rounded-pill"
+        className="btn btn-outline-neutral-secondary"
         onClick={cancelButtonClickedHandler}
       >
-        Cancel
+        {t('Cancel')}
       </Button>
     );
     const submitButton = (
       <Button
         data-testid="comment-submit-button"
-        outline
-        color="primary"
-        className="btn btn-outline-primary rounded-pill"
+        className="btn btn-primary"
         onClick={postCommentHandler}
       >
-        Comment
+        {t('comment')}
       </Button>
     );
 
     return (
       <>
-        <div className="comment-write">
+        <div className="comment-write p-3">
           <CustomNavTab activeTab={activeTab} navTabMapping={navTabMapping} onNavSelected={handleSelect} hideBorderBottom />
           <TabContent activeTab={activeTab}>
             <TabPane tabId="comment_editor">
@@ -365,7 +363,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           </TabContent>
         </div>
 
-        <div className="comment-submit">
+        <div className="comment-submit px-3 pb-3">
           <div className="d-flex">
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{errorMessage && errorMessage}</span>
@@ -401,7 +399,7 @@ 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-main">
+        <div className="comment-form-main bg-secondary rounded">
           {isReadyToUse
             ? renderReady()
             : renderBeforeReady()