adjust layout

src/client/js/components/SearchPage/DeletePageListModal.jsx

@@ -41,7 +41,7 @@ export default class DeletePageListModal extends React.Component {
           <div className="d-flex justify-content-between">
             <span className="text-danger">{this.props.errorMessage}</span>
             <span className="d-flex align-items-center">
-              <div className="custom-control custom-checkbox">
+              <div className="custom-control custom-checkbox custom-checkbox-danger">
                 <input type="checkbox" className="custom-control-input" id="customCheck-delete-completely" />
                 <label
                   className="custom-control-label text-danger"

src/client/js/components/SearchPage/SearchResult.jsx

@@ -260,7 +260,7 @@ class SearchResult extends React.Component {
                 <label className="custom-control-label" htmlFor="page-delete-check"></label>
               </div>
             )
-            }
+          }
           <div className="page-list-option">
             <a href={page.path}><i className="icon-login" /></a>
           </div>
@@ -277,26 +277,23 @@ class SearchResult extends React.Component {
         <div className="search-result row" id="search-result">
           <div className="col-lg-4 d-none d-lg-block page-list search-result-list" id="search-result-list">
             <nav>
-              <div className="float-right">
-                {deletionModeButtons}
-                {allSelectCheck}
-              </div>
-              <div className="search-result-meta">
-                <i className="icon-magnifier" /> Found {this.props.searchResultMeta.total} pages with &quot;{this.props.searchingKeyword}&quot;
+              <div className="d-flex align-items-start justify-content-between mt-1">
+                <div className="search-result-meta">
+                  <i className="icon-magnifier" /> Found {this.props.searchResultMeta.total} pages with &quot;{this.props.searchingKeyword}&quot;
+                </div>
+                <div className="text-nowrap">
+                  {deletionModeButtons}
+                  {allSelectCheck}
+                </div>
               </div>
-              <div className="clearfix"></div>
+
               <div className="page-list">
-                <ul className="page-list-ul page-list-ul-flat nav">
-                  {listView}
-                </ul>
+                <ul className="page-list-ul page-list-ul-flat nav">{listView}</ul>
               </div>
             </nav>
           </div>
           <div className="col-lg-8 search-result-content" id="search-result-content">
-            <SearchResultList
-              pages={this.props.pages}
-              searchingKeyword={this.props.searchingKeyword}
-            />
+            <SearchResultList pages={this.props.pages} searchingKeyword={this.props.searchingKeyword} />
           </div>
         </div>
         <DeletePageListModal
@@ -307,8 +304,7 @@ class SearchResult extends React.Component {
           confirmedToDelete={this.deleteSelectedPages}
           toggleDeleteCompletely={this.toggleDeleteCompletely}
         />
-
-      </div>// content-main
+      </div> // content-main
     );
   }
 

src/client/styles/scss/_page_list.scss

@@ -21,6 +21,11 @@
         display: inline;
         padding: 0 4px;
         color: inherit;
+
+        &:hover {
+          color: inherit;
+          text-decoration: none;
+        }
       }
 
       > span.page-list-meta {