WIP: reconstruct layouts

* search page

resource/js/components/PageList/Page.js

@@ -14,14 +14,19 @@ export default class Page extends React.Component {
       link = page.path;
     }
 
+    const styleFlex = {
+      flex: 1
+    }
+
     return (
-      <li className="page-list-li">
-        {this.props.children}
+      <li className="page-list-li d-flex align-items-center">
         <UserPicture user={page.revision.author} />
         <a className="page-list-link" href={link}>
           <PagePath page={page} excludePathString={this.props.excludePathString} />
         </a>
         <PageListMeta page={page} />
+        <div style={styleFlex}></div>
+        {this.props.children}
       </li>
     );
   }

resource/js/components/SearchPage/DeletePageListModal.js

@@ -43,10 +43,15 @@ export default class DeletePageListModal extends React.Component {
           </ul>
         </Modal.Body>
         <Modal.Footer>
-          <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
-          <Checkbox onClick={this.props.toggleDeleteCompletely}>Delete completely</Checkbox>
-          <Button onClick={this.props.cancel}>Cancel</Button>
-          <Button onClick={this.props.confirmedToDelete} className="btn-danger">Delete</Button>
+          <div className="d-flex justify-content-between">
+            <span className="text-danger">{this.props.errorMessage}</span>
+            <span className="d-flex">
+              <Checkbox onClick={this.props.toggleDeleteCompletely}>Delete completely</Checkbox>
+              <span className="m-l-10">
+                <Button onClick={this.props.confirmedToDelete}><i className="icon-trash"></i>Delete</Button>
+              </span>
+            </span>
+          </div>
         </Modal.Footer>
       </Modal>
     );

resource/js/components/SearchPage/SearchResult.js

@@ -209,7 +209,7 @@ export default class SearchResult extends React.Component {
     else {
       deletionModeButtons =
       <div className="btn-group">
-        <button type="button" className="btn btn-default btn-outline btn-rounded btn-xs" onClick={() => this.handleDeletionModeChange()}>
+        <button type="button" className="btn btn-default btn-rounded btn-xs" onClick={() => this.handleDeletionModeChange()}>
           <i className="ti-check-box"/> DeletionMode
         </button>
       </div>

resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -97,3 +97,14 @@ input.form-control, textarea.form-control {
     }
   }
 }
+
+/*
+ * GROWI search page
+ */
+.search-page {
+  .input-group-btn {
+    .btn-default {
+      border: 1px solid darken($border, 30%); // fit to input.form-control
+    }
+  }
+}

resource/styles/scss/_page_list.scss

@@ -13,11 +13,6 @@
       margin: 0;
       list-style: none;
 
-      .page-list-option {
-        float: right;
-        margin-left: 4px;
-      }
-
       .picture {
         width: 16px;
         height: 16px;

resource/styles/scss/_search.scss

@@ -27,9 +27,6 @@
     color: #999;
     padding: 0;
   }
-  .rbt-input {
-    border: none;
-  }
   .rbt-menu {
     li a span {
       .page-path {
@@ -68,6 +65,7 @@
   // using react-bootstrap-typeahead
   // see: https://github.com/ericgio/react-bootstrap-typeahead
   .rbt-input.form-control {
+    border: none;
     background-color: rgba(255, 255, 255, 0.9);
     border-radius: 40px;
     border-top-right-radius: 40px;
@@ -119,11 +117,10 @@
       }
       .nav {
         > li {
-          padding: 0px 10px 0 0;
+          padding: 2px 8px;
           &.active {
-            padding-right: 7px;
-            border-right: solid 3px #666;
-            background: $gray-light;
+            padding-right: 5px;
+            border-right: solid 3px transparent;
           }
         }
       }