apply rbt

src/client/js/components/Page/TagEditor.jsx

@@ -47,7 +47,7 @@ export default class TagEditor extends React.Component {
   render() {
     return (
       <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="editTagModal">
-        <ModalHeader closeButton className="bg-primary">
+        <ModalHeader tag="h4" closeButton className="bg-primary">
           <span className="text-white">Edit Tags</span>
         </ModalHeader>
         <ModalBody>

src/client/styles/scss/_override-bootstrap.scss

@@ -91,7 +91,7 @@ h5 {
 
 .dropdown-menu > li > a {
   width: 100%;
-  padding: 9px 20px;
+  padding: 5px 15px;
 }
 
 .dropdown-menu > li > a:focus,

src/client/styles/scss/_override-rbt.scss

@@ -13,3 +13,50 @@
 .rbt-aux {
   display: none;
 }
+
+.rbt-menu {
+  padding-top: 5px;
+  margin-bottom: 2px;
+  .rbt-highlight-text {
+    padding: 0;
+    font-weight: 700;
+    background-color: inherit;
+  }
+}
+
+.rbt-input {
+  padding: 7px 12px;
+  .rbt-input-wrapper {
+    .rbt-token {
+      position: relative;
+      display: inline-block;
+      padding: 4px 7px;
+      margin: 0 3px 3px 0;
+      line-height: 1em;
+      color: #1f8dd6;
+      background-color: #e7f4ff;
+      border: 0;
+      border-radius: 2px;
+      &.rbt-token-removeable {
+        padding-right: 21px;
+        cursor: pointer;
+      }
+      .rbt-token-remove-button {
+        position: absolute;
+        top: -2px;
+        right: 0;
+        bottom: 0;
+        padding: 3px 7px;
+        font-size: inherit;
+        font-weight: 400;
+        color: inherit;
+        text-shadow: none;
+        outline: none;
+        opacity: 1;
+      }
+    }
+    .rbt-input-hint-container {
+      display: inline-block;
+    }
+  }
+}