文案与界面

src/UserAction.css

@@ -35,11 +35,17 @@
 .post-form-bar {
     line-height: 2em;
     display: flex;
+    flex-wrap: wrap;
     margin-bottom: .5em;
 }
 
-.post-form-bar label {
-    flex: 1;
+.post-form-bar .checkbox-bar {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.post-form-bar .checkbox-bar label {
+    flex: 0 0 auto;
     margin: 0 0.5rem;
 }
 
@@ -142,4 +148,9 @@
 
 .reply-form-buttons {
   display: flex;
+  flex: 0 0 2.5rem;
+}
+
+.update-title-btn {
+  margin-top: 6px;
 }

src/UserAction.js

@@ -152,7 +152,7 @@ export class LoginForm extends Component {
       .then((json) => {
         if (json.code === 0) {
           window.TITLE = title
-          alert('自定义头衔设置成功');
+          alert('专属头衔设置成功');
         }
       });
   }
@@ -206,7 +206,7 @@ export class LoginForm extends Component {
                     User Token仅用于开发bot，切勿告知他人。若怀疑被盗号请刷新Token(刷新功能即将上线)。
                   </p>
                   <p>
-                    自定义头衔： 
+                    专属头衔： 
                     <input
                       value={this.state.custom_title} 
                       onChange={(e) => {
@@ -215,11 +215,12 @@ export class LoginForm extends Component {
                       maxLength={10}
                     />
                     <button
+                      className="update-title-btn"
                       type="button"
                       onClick={(e) => {this.update_title(this.state.custom_title, token.value)}}
                     >提交</button>
                     <br />
-                    设置自定义头衔后，可在发言时选择使用。重置后需重新设置。临时用户如需保持头衔请使用相同后缀。
+                    设置专属头衔后，可在发言时选择使用。重置后需重新设置。临时用户如需保持头衔请使用相同后缀。
                   </p>
                 </div>
               ) : (
@@ -705,6 +706,7 @@ export class PostForm extends Component {
     return (
       <form onSubmit={this.on_submit.bind(this)} className="post-form box">
         <div className="post-form-bar">
+          <div>
             {preview ? (
               <button
                 type="button"
@@ -739,7 +741,8 @@ export class PostForm extends Component {
                 &nbsp;发表
               </button>
             )}
-
+          </div>
+          <div className="checkbox-bar">
             <label>
               <input
                 type="checkbox"
@@ -758,7 +761,7 @@ export class PostForm extends Component {
                 {' '}使用头衔
               </label>
             )}
-
+          </div>
         </div>
         {!!this.state.img_tip && (
           <p className="post-form-img-tip">