Merge pull request #4529 from weseek/feat/78863-79625-include-user-children-pages

Feat/78863 79625 modify design and position of include buttons

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

@@ -64,7 +64,7 @@
   "Include Attachment File": "添付ファイルも含める",
   "Include Comment": "コメントも含める",
   "Include Subordinated Page": "配下ページも含める",
-  "Include Subordinated Target Page": "{{target}}下を含む",
+  "Include Subordinated Target Page": "{{target}} 下を含む",
   "All Subordinated Page": "全ての配下ページ",
   "Specify Hierarchy": "階層の深さを指定",
   "Submitted the request to create the archive": "アーカイブ作成のリクエストを正常に送信しました",

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -40,29 +40,25 @@ const SearchControl: FC <Props> = (props: Props) => {
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
       <div className="d-flex my-4">
-        <div className="form-check border-gray">
+        <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
+          <label className="my-0 mr-2" htmlFor="flexCheckDefault">
+            {t('Include Subordinated Target Page', { target: '/user' })}
+          </label>
           <input
-            className="form-check-input"
             type="checkbox"
-            value=""
             id="flexCheckDefault"
             onClick={() => onExcludeUsersHome()}
           />
-          <label className="form-check-label" htmlFor="flexCheckDefault">
-            {t('Include Subordinated Target Page', { target: '/user' })}
-          </label>
         </div>
-        <div className="form-check">
+        <div className="d-flex align-items-center border rounded border-gray px-2 mr-3">
+          <label className="my-0 mr-2" htmlFor="flexCheckChecked">
+            {t('Include Subordinated Target Page', { target: '/trash' })}
+          </label>
           <input
-            className="form-check-input"
             type="checkbox"
-            value=""
             id="flexCheckChecked"
             onClick={() => onExcludeTrash()}
           />
-          <label className="form-check-label" htmlFor="flexCheckChecked">
-            {t('Include Subordinated Target Page', { target: '/trash' })}
-          </label>
         </div>
       </div>
     </div>