use custom imput

packages/app/src/components/PageList/PageListItemL.tsx

@@ -3,6 +3,8 @@ import React, {
   ForwardRefRenderFunction, memo, useCallback, useImperativeHandle, useRef,
 } from 'react';
 
+import { CustomInput } from 'reactstrap';
+
 import Clamp from 'react-multiline-clamp';
 import { format } from 'date-fns';
 
@@ -93,12 +95,11 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
         <div className="d-flex">
           {/* checkbox */}
           {onClickCheckbox != null && (
-            <div className="form-check d-flex align-items-center justify-content-center px-md-2 pl-3 pr-2">
-              <input
-                className="form-check-input position-relative m-0"
+            <div className="d-flex align-items-center justify-content-center pl-md-2 pl-3">
+              <CustomInput
                 type="checkbox"
-                id="flexCheckDefault"
-                ref={inputRef}
+                id={`cbDelete-${pageData._id}`}
+                innerRef={inputRef}
                 onChange={() => { onClickCheckbox(pageData._id) }}
               />
             </div>

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

@@ -1,6 +1,7 @@
 import React, {
   ChangeEvent, FC, useEffect, useMemo, useRef, useState,
 } from 'react';
+import { CustomInput } from 'reactstrap';
 import { IndeterminateInputElement } from '~/interfaces/indeterminate-input-elm';
 import { CheckboxType } from '~/interfaces/search';
 
@@ -79,12 +80,10 @@ export const OperateAllControl :FC<Props> = React.memo((props: Props) => {
   return (
 
     <div className="d-flex align-items-center">
-      <input
-        id="check-all-pages"
+      <CustomInput
         type="checkbox"
-        name="check-all-pages"
-        className="grw-indeterminate-checkbox"
-        ref={selectAllCheckboxElm}
+        id="cb-check-all"
+        innerRef={selectAllCheckboxElm}
         disabled={isCheckboxDisabled}
         onChange={checkboxChangedHandler}
       />

packages/app/src/styles/_search.scss

@@ -171,14 +171,14 @@
         max-width: 8rem;
       }
     }
-    .search-result-list-delete-checkbox {
-      margin: 0 10px 0 0;
-      vertical-align: middle;
-    }
-    // not show top label in search result list
-    .page-list-meta {
-      .top-label {
-        display: none;
+
+    // list group
+    .page-list {
+      // not show top label in search result list
+      .page-list-meta {
+        .top-label {
+          display: none;
+        }
       }
     }
   }

packages/app/src/styles/atoms/_custom_control.scss

@@ -1,3 +1,7 @@
+.custom-checkbox .custom-control-label::before {
+  border-radius: $border-radius !important;
+}
+
 label.custom-control-label {
   font-weight: normal;
 }