using custom-control-input and label for user page sort

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

@@ -105,21 +105,21 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
           </button>
         </div>
         <div className="d-none d-lg-flex align-items-center ml-auto search-control-include-options">
-          <div className="card mr-3 mb-0">
-            <div className="card-body">
-              <label className="search-include-label mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckDefault">
-                <input
-                  className="mr-2"
-                  type="checkbox"
-                  id="flexCheckDefault"
-                  defaultChecked={includeUserPages}
-                  onChange={e => setIncludeUserPages(e.target.checked)}
-                />
+          <div className="border rounded px-3 py-2 mr-3">
+            <div className="custom-control custom-checkbox custom-checkbox-primary">
+              <input
+                className="custom-control-input mr-2"
+                type="checkbox"
+                id="flexCheckDefault"
+                defaultChecked={includeUserPages}
+                onChange={e => setIncludeUserPages(e.target.checked)}
+              />
+              <label className="custom-control-label mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckDefault">
                 {t('Include Subordinated Target Page', { target: '/user' })}
               </label>
             </div>
           </div>
-          <div className="border rounded py-1 px-2">
+          <div className="border rounded px-3 py-2">
             <div className="custom-control custom-checkbox custom-checkbox-primary">
               <input
                 className="custom-control-input mr-2"
@@ -129,7 +129,7 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
                 onChange={e => setIncludeTrashPages(e.target.checked)}
               />
               <label
-                className="custom-control-label search-include-label
+                className="custom-control-label
               d-flex align-items-center text-secondary with-no-font-weight"
                 htmlFor="flexCheckChecked"
               >