adjust left pane except search box

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

@@ -30,17 +30,28 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   return (
-    <div className="">
-      <div className="search-page-input sps sps--abv">
-        <SearchPageFormTypeAny
-          keyword={props.searchingKeyword}
-          appContainer={props.appContainer}
-          onSearchFormChanged={props.onSearchInvoked}
-        />
+    <>
+      <div className="search-page-nav row py-3 align-items-center">
+        <div className="col-8">
+          <SearchPageFormTypeAny
+            keyword={props.searchingKeyword}
+            appContainer={props.appContainer}
+            onSearchFormChanged={props.onSearchInvoked}
+          />
+        </div>
+        <div className="col-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="d-flex my-4">
-        <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
+      <div className="row py-3 border-bottom border-gray">
+        <div className="col-3">
+          {/* TODO: replace the following button */}
+          <button type="button">delete button</button>
+        </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>
@@ -50,7 +61,7 @@ const SearchControl: FC <Props> = (props: Props) => {
             onClick={() => onExcludeUsersHome()}
           />
         </div>
-        <div className="d-flex align-items-center border rounded border-gray px-2 mr-3">
+        <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>
@@ -61,7 +72,7 @@ const SearchControl: FC <Props> = (props: Props) => {
           />
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

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

@@ -51,7 +51,6 @@ class SearchPageForm extends React.Component {
         </div>
         <div className="input-group-append">
           <button
-            className="btn btn-secondary"
             type="button"
             id="button-addon2"
             onClick={() => {

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

packages/app/src/server/views/search.html

@@ -17,7 +17,7 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div id="main" class="main col-lg-12 search-page">
+    <div id="main" class="main col-lg-12 search-page mt-0">
       <div class="" id="search-page"></div>
     </div>
   </div>

packages/app/src/styles/_search.scss

@@ -1,3 +1,7 @@
+.search-page-nav {
+  background-color: #f7f7f7;
+}
+
 .search-listpage-icon {
   font-size: 16px;
   color: $gray-400;
@@ -158,9 +162,17 @@
 .search-result {
   .search-result-list {
     position: sticky;
-    top: 64px;
+    top: 0px;
     height: 100vh;
     overflow-y: scroll;
+    /* for IE, Edge */
+    -ms-overflow-style: none;
+    /* for Firefox */
+    scrollbar-width: none;
+    /* for chrome and safari */
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     .nav.nav-pills {
       > li {