more theme stuff

app/components/BookBuilder/Chapter.jsx

@@ -228,7 +228,8 @@ export class Chapter extends React.Component {
   _myHandler (evt) {
     if (evt.target.id === 'dropbutton' ||
         evt.target.parentElement.id === 'dropbutton' ||
-        evt.target.classList.contains('caret')) {
+        evt.target.classList.contains('caret') ||
+        evt.target.classList.contains('drop-input')) {
       return
     }
     this.setState({
@@ -402,7 +403,7 @@ export class Chapter extends React.Component {
             <div className={styles.dropDownInputContairer}>
               <TextInput
                 ref='dropDownInput'
-                className={styles.dropDownInput}
+                className={'drop-input ' + styles.dropDownInput}
                 onSave={this._onClickCustomTitle}
                 placeholder='Type a custom title'
               />

app/components/BookBuilder/styles/bookBuilder.local.scss

@@ -97,11 +97,12 @@ $white: #fff;
     padding: 10px;
 
     .dropDownInput {
-      border-left: none !important;
-      border-right: none !important;
-      border-top: none !important;
-      width: 100% !important;
+      border-left: 0;
+      border-right: 0;
+      border-top: 0;
       outline: none;
+      width: 100%;
+
     }
   }
 
@@ -171,7 +172,7 @@ $white: #fff;
     .chapterContainer {
       font-style: italic;
       margin-top: 2%;
-      padding: 0px !important;
+      padding: 0;
     }
 
     .grabIcon {
@@ -186,8 +187,10 @@ $white: #fff;
 
     .grabIconBody {
       position: relative;
-      bottom: 5px !important;
-      top: 0 !important;
+      bottom: 5px;
+      top: 0;
+      font-size: 20px;
+      padding-bottom: 3px;
     }
 
     .tooltip {
@@ -264,34 +267,28 @@ $white: #fff;
 
     .isPart {
       h3 {
-        // color: $dark-grey;
         font-size: 20px !important;
-        // font-style:
       }
 
       .leftBorderBody {
         border: 0 !important;
       }
-
-      .grabIconBody {
-        font-size: 20px;
-        padding-bottom: 3px !important;
-      }
     }
 
     .chapterTitle {
       h3 {
-        font-family: Fira Sans !important;
-        font-style: italic;
-        margin: 0px !important;
         color: #333 !important;
-        padding-bottom: 0px;
-        font-size: 18px;
         float: left;
+        font-size: 18px;
+        font-style: italic;
+        margin: 0;
+        max-width: 80%;
+        padding-bottom: 0;
         padding-right: 1%;
-        max-width:80%;
+
       }
     }
+
     .chapterActions {
       a {
         bottom: 24px;
@@ -301,13 +298,13 @@ $white: #fff;
         text-decoration: none;
 
         &:hover {
-          cursor: pointer;
           color: $dark-grey;
+          cursor: pointer;
           transition: .25s ease-in-out 0s;
         }
       }
+
       .lEditing {
-        font-family: Fira Sans!important;
         background: $dark-grey;
         color: white;
         padding:5px;
@@ -370,7 +367,6 @@ $white: #fff;
         position:relative;
         top:4px;
         li {
-          //color:$light-grey;
           float:left;
           padding-right:2%;
         }
@@ -396,31 +392,34 @@ $white: #fff;
           text-align: center;
         }
         .leftBox {
-          border-right:0px!important;
+          border-right: 0;
         }
         .rightBox {
-          border-left:0px!important;
+          border-left: 0;
         }
+
         .boxDiver {
-          border-right:1px solid $dark-grey;
+          border-right: 1px solid $dark-grey;
+          bottom: 5px;
           height: 31px;
           position: relative;
-          bottom: 5px;
           right: 23px;
         }
+
         .boxActive {
-          height:16px;
-          width: 16px;
-          margin:2px 0px 0px 2px;
           background-color: $dark-grey;
-          cursor:pointer;
+          cursor: pointer;
+          height: 16px;
+          margin: 2px 0 0 2px;
+          width: 16px;
         }
         .boxInactiveHover {
-          height:16px;
-          width: 16px;
-          margin:2px 0px 0px 2px;
           background-color: #fff;
           cursor: pointer;
+          height: 16px;
+          margin: 2px 0 0 2px;
+          width: 16px;
+
           &:hover {
             background-color: $light-grey;
             transition: .25s ease-in-out 0s;
@@ -432,7 +431,7 @@ $white: #fff;
 
   .leftBorderComponent {
     border-left: 2px solid $light-grey;
-    width:2px;
+    width: 2px;
     height: 68px;
     position: relative;
     top: 30px;