refactor design

packages/app/resource/locales/en_US/translation.json

@@ -663,7 +663,8 @@
     },
     "by_path_modal": {
       "title": "Convert to new v5 compatible format",
-      "alert": "This operation cannot be undone. Are you sure?",
+      "alert": "This operation cannot be undone, and pages that the user cannot view are also subject to processing.",
+      "checkbox_label": "Understood",
       "description": "Enter a path and all pages under that path will be converted to v5 compatible format.",
       "button_label": "Convert",
       "success": "Successfully requested conversion.",

packages/app/resource/locales/ja_JP/translation.json

@@ -663,7 +663,8 @@
     },
     "by_path_modal": {
       "title": "新しい v5 互換形式への変換",
-      "alert": "この操作は取り消すことができません。よろしいですか？",
+      "alert": "この操作は取り消すことができず、ユーザーが閲覧できないページも処理の対象になります。",
+      "checkbox_label": "理解しました",
       "description": "パスを入力することで、そのパスの配下のページを全て v5 互換形式に変換します",
       "button_label": "変換",
       "success": "正常に変換を開始しました",

packages/app/resource/locales/zh_CN/translation.json

@@ -950,7 +950,8 @@
     },
     "by_path_modal": {
       "title": "转换为新的v5兼容格式",
-      "alert": "这一操作不能被撤销。 你确定吗？",
+      "alert": "这一操作不能被撤销，用户不能查看的页面也要进行处理。",
+      "checkbox_label": "明白了",
       "description": "输入一个路径，该路径下的所有页面将被转换为v5兼容格式。",
       "button_label": "转换",
       "success": "成功地请求转换。",

packages/app/src/components/PrivateLegacyPages.tsx

@@ -150,15 +150,18 @@ const ConvertByPathModal = React.memo((props: ConvertByPathModalProps): JSX.Elem
       <ModalBody>
         <p>{t('private_legacy_pages.by_path_modal.description')}</p>
         <input type="text" className="form-control" placeholder="/" value={currentInput} onChange={e => setInput(e.target.value)} />
+        <div className="alert alert-danger mt-3" role="alert">
+          { t('private_legacy_pages.by_path_modal.alert') }
+        </div>
       </ModalBody>
-      <ModalFooter className="justify-content-between">
+      <ModalFooter>
         <div className="form-check">
           <input
             className="form-check-input"
             type="checkbox"
             onChange={e => setChecked(e.target.checked)}
           />
-          <label className="form-check-label">{ t('private_legacy_pages.by_path_modal.alert') }</label>
+          <label className="form-check-label">{ t('private_legacy_pages.by_path_modal.checkbox_label') }</label>
         </div>
         <button
           type="button"