change grid to flexbox

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

@@ -32,7 +32,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
 
 
   return (
-    <>
+    <div className="d-flex align-items-center">
       <input
         id="check-all-pages"
         type="checkbox"
@@ -43,7 +43,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
       />
       <button
         type="button"
-        className="btn text-danger font-weight-light p-0 ml-3"
+        className="btn text-danger font-weight-light p-0 ml-2"
         onClick={() => {
           if (onClickInvoked == null) { logger.error('onClickInvoked is null') }
           else { onClickInvoked() }
@@ -52,7 +52,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         <i className="icon-trash"></i>
         {t('search_result.delete_all_selected_page')}
       </button>
-    </>
+    </div>
   );
 
 };

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

@@ -48,22 +48,22 @@ const SearchControl: FC <Props> = (props: Props) => {
 
   return (
     <>
-      <div className="search-page-nav row py-3 align-items-center">
-        <div className="col-8">
+      <div className="search-page-nav d-flex py-3 align-items-center">
+        <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny
             keyword={props.searchingKeyword}
             appContainer={props.appContainer}
             onSearchFormChanged={props.onSearchInvoked}
           />
         </div>
-        <div className="col-4">
+        <div className="mr-4">
           {/* TODO: replace the following button */}
           <button type="button">related pages</button>
         </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
-      <div className="row py-3 border-bottom border-gray">
-        <div className="col-3">
+      <div className="d-flex align-items-cente py-3 border-bottom border-gray">
+        <div className="d-flex mr-auto ml-3">
           {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
           <DeleteSelectedPageGroup
             checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
@@ -71,26 +71,27 @@ const SearchControl: FC <Props> = (props: Props) => {
             onCheckInvoked={onCheckAllPagesInvoked}
           />
         </div>
-        <div className="col-5"></div>
-        <div className="col-2 d-flex align-items-center border border-gray">
-          <label className="my-0 mr-2" htmlFor="flexCheckDefault">
-            {t('Include Subordinated Target Page', { target: '/user' })}
-          </label>
-          <input
-            type="checkbox"
-            id="flexCheckDefault"
-            onClick={() => onExcludeUsersHome()}
-          />
-        </div>
-        <div className="col-2 d-flex align-items-center border border-gray">
-          <label className="my-0 mr-2" htmlFor="flexCheckChecked">
-            {t('Include Subordinated Target Page', { target: '/trash' })}
-          </label>
-          <input
-            type="checkbox"
-            id="flexCheckChecked"
-            onClick={() => onExcludeTrash()}
-          />
+        <div className="d-flex align-items-center mr-3">
+          <div className="border border-gray px-3 py-2 mr-3">
+            <label className="my-0 mr-2" htmlFor="flexCheckDefault">
+              {t('Include Subordinated Target Page', { target: '/user' })}
+            </label>
+            <input
+              type="checkbox"
+              id="flexCheckDefault"
+              onClick={() => onExcludeUsersHome()}
+            />
+          </div>
+          <div className="border border-gray px-3 py-2">
+            <label className="my-0 mr-2" htmlFor="flexCheckChecked">
+              {t('Include Subordinated Target Page', { target: '/trash' })}
+            </label>
+            <input
+              type="checkbox"
+              id="flexCheckChecked"
+              onClick={() => onExcludeTrash()}
+            />
+          </div>
         </div>
       </div>
     </>

packages/app/src/components/SearchPage/SearchPageForm.jsx

@@ -50,7 +50,7 @@ class SearchPageForm extends React.Component {
           />
           <div className="btn-group-submit-search">
             <button
-              className="btn border-0"
+              className="btn border-0 pb-1"
               type="button"
               onClick={() => {
                 try {

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

@@ -19,7 +19,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
-        <div className="col-lg-6  page-list border boder-gray search-result-list pr-0" id="search-result-list">
+        <div className="col-lg-6  page-list border boder-gray search-result-list px-0" id="search-result-list">
 
           <nav><SearchControl></SearchControl></nav>
           <div className="d-flex align-items-start justify-content-between mt-1">
@@ -33,9 +33,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           </div>
         </div>
         <div className="col-lg-6 d-none d-lg-block search-result-content">
-          <div className="row">
-            <SearchResultContent></SearchResultContent>
-          </div>
+          <SearchResultContent></SearchResultContent>
         </div>
       </div>
     </div>

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

@@ -88,7 +88,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={page._id} className={`page-list-li search-page-item w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <li key={page._id} className={`page-list-li search-page-item w-100 border-bottom px-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}

packages/app/src/styles/_search.scss

@@ -2,33 +2,18 @@
   background-color: #f7f7f7;
 }
 
-.grw-search-form-in-search-result-page {
-  .btn-group-submit-search {
-    position: absolute;
-    top: 1px;
-    right: 0;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-  }
-
-  input {
-    border-radius: 16rem !important;
-  }
+.search-group-submit-button {
+  position: absolute;
+  top: 0;
+  right: 0;
 
-  button {
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
-}
+  z-index: 3;
 
-.search-listpage-icon {
-  font-size: 16px;
-  color: $gray-400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
 }
 
 .search-listpage-clear {
@@ -130,18 +115,29 @@
   }
 
   .btn-group-submit-search {
-    position: absolute;
-    top: 0;
-    right: 0;
+    @extend .search-group-submit-button;
+  }
+}
 
-    z-index: 3;
+.grw-search-form-in-search-result-page {
+  .btn-group-submit-search {
+    @extend .search-group-submit-button;
+  }
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
+  input {
+    border-radius: 16rem !important;
   }
+
+  button {
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}
+
+.search-listpage-icon {
+  font-size: 16px;
+  color: $gray-400;
 }
 
 // layout
@@ -189,6 +185,7 @@
     top: 0px;
     height: 100vh;
     overflow-y: scroll;
+    // TODO: remove vendere prefix css
     /* for IE, Edge */
     -ms-overflow-style: none;
     /* for Firefox */