use bootstrap instead of using too many css

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

@@ -47,9 +47,9 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
       >
         <div className="d-flex h-100">
           {/* checkbox */}
-          <div className="form-check d-flex align-items-center justify-content-center pr-2 search-item-checkbox">
+          <div className="form-check d-flex align-items-center justify-content-center px-2 search-item-checkbox">
             <input
-              className="form-check-input item-checkbox-input"
+              className="form-check-input position-relative m-0"
               type="checkbox"
               id="flexCheckDefault"
               onChange={() => {
@@ -62,23 +62,23 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
           </div>
           <div className="search-item-text p-3 flex-grow-1">
             {/* page path */}
-            <div className="item-path">
+            <h6 className="item-path mb-1">
               <i className="icon-fw icon-home"></i>
               {pagePathElem}
-            </div>
+            </h6>
             <div className="d-flex align-items-center mb-2 position-relative">
               {/* Picture */}
               <span className="user-picture mr-2">
                 <UserPicture user={pageData.lastUpdateUser} />
               </span>
               {/* page title */}
-              <span className="item-title mr-2">{dPagePath.latter}</span>
+              <span className="item-title h5 mr-2 mb-0">{dPagePath.latter}</span>
               {/* page meta */}
-              <div className="d-flex item-meta">
+              <div className="d-flex item-meta py-0 px-1">
                 <PageListMeta page={pageData} bookmarkCount={pageMeta.bookmarkCount} />
               </div>
               {/* doropdown icon includes page control buttons */}
-              <div className="position-absolute item-control">
+              <div className="item-control ml-auto">
                 <PageItemControl page={pageData} onClickDeleteButton={props.onClickDeleteButton} isEnableActions={isEnableActions} />
               </div>
             </div>

packages/app/src/styles/_search.scss

@@ -187,7 +187,7 @@
           .search-item-checkbox {
             // subtract 3px from padding left applied by .search-item-checkbox
             // as 3px of border-left is added above
-            padding-left: 4px;
+            padding-left: 4px !important;
           }
         }
         > a {
@@ -214,10 +214,7 @@
       }
     }
     .search-result-item {
-      height: 123px;
-      .form-check-input {
-        margin-top: 0;
-      }
+      height: 129.5px;
     }
 
     .search-result-meta {
@@ -233,18 +230,8 @@
       vertical-align: middle;
     }
   }
-  // checkbox
-  .search-item-checkbox {
-    padding-left: 7px;
-    .item-checkbox-input {
-      position: relative; // to apply padding and margin
-      margin: 0;
-    }
-  }
   .search-item-text {
     .item-path {
-      margin-bottom: 4px;
-      font-size: 12px;
       line-height: 18px;
     }
     .user-picture {
@@ -252,11 +239,9 @@
       height: 20px;
     }
     .item-title {
-      font-size: 17.5px;
       line-height: 26px;
     }
     .item-meta {
-      padding: 0 4px;
       .top-label {
         display: none; // not show top label
       }
@@ -265,7 +250,6 @@
       line-height: 20px;
     }
     .item-control {
-      right: 0;
       .grw-btn-page-management {
         padding: 7px;
       }