Merge branch 'master' into dracula_theme

# Conflicts:
#	browser/components/TodoListPercentage.styl
#	browser/main/Detail/TagSelect.styl

browser/main/Detail/SnippetNoteDetail.js

@@ -759,6 +759,7 @@ class SnippetNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          data={data}
           onChange={(e) => this.handleChange(e)}
         />
       </div>

browser/main/Detail/TagSelect.js

@@ -88,6 +88,11 @@ class TagSelect extends React.Component {
     this.refs.newTag.input.focus()
   }
 
+  handleTagLabelClick (tag) {
+    const { router } = this.context
+    router.push(`/tags/${tag}`)
+  }
+
   handleTagRemoveButtonClick (tag) {
     this.removeTagByCallback((value, tag) => {
       value.splice(value.indexOf(tag), 1)
@@ -182,7 +187,7 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>#{tag}</span>
+            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
@@ -228,6 +233,10 @@ class TagSelect extends React.Component {
   }
 }
 
+TagSelect.contextTypes = {
+  router: PropTypes.shape({})
+}
+
 TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),

browser/main/Detail/TagSelect.styl

@@ -39,8 +39,9 @@
 
 .tag-label
   font-size 13px
-  color: $ui-text-color
+  color $ui-text-color
   padding 4px 16px 4px 8px
+  cursor pointer
 
 body[data-theme="dark"]
   .tag
@@ -67,7 +68,7 @@ body[data-theme="solarized-dark"]
 
 body[data-theme="monokai"]
   .tag
-    background-color $ui-monokai-button-backgroundColor
+    background-color $ui-monokai-tag-backgroundColor
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -85,4 +86,4 @@ body[data-theme="dracula"]
     background-color transparent
 
   .tag-label
-    color $ui-dracula-borderColor
+    color $ui-dracula-borderColor

browser/main/Detail/ToggleModeButton.styl

@@ -59,9 +59,9 @@ body[data-theme="solarized-dark"]
 
 body[data-theme="monokai"]
   .control-toggleModeButton
-      background-color #272822
+      background-color #373831
     .active
-      background-color #1EC38B
+      background-color #f92672
       box-shadow 2px 0px 7px #222222
 
 body[data-theme="dracula"]