From 3e645db3245cac5ce015c23a8564898a519360c2 Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Thu, 27 Dec 2018 21:36:20 +0800
Subject: [PATCH 1/7] add feature: colored tags

---
 browser/components/ColorPicker.js             | 63 +++++++++++++
 browser/components/ColorPicker.styl           | 25 ++++++
 browser/components/NoteItem.js                | 14 +--
 browser/components/TagListItem.js             |  8 +-
 browser/main/Detail/MarkdownNoteDetail.js     |  1 +
 browser/main/Detail/SnippetNoteDetail.js      |  1 +
 browser/main/Detail/TagSelect.js              |  6 +-
 browser/main/NoteList/index.js                |  1 +
 browser/main/SideNav/index.js                 | 88 +++++++++++++++++++
 browser/main/lib/ConfigManager.js             |  3 +-
 package.json                                  |  1 +
 tests/components/TagListItem.snapshot.test.js |  2 +-
 .../TagListItem.snapshot.test.js.snap         |  5 ++
 13 files changed, 205 insertions(+), 13 deletions(-)
 create mode 100644 browser/components/ColorPicker.js
 create mode 100644 browser/components/ColorPicker.styl

diff --git a/browser/components/ColorPicker.js b/browser/components/ColorPicker.js
new file mode 100644
index 00000000..f68aa8ec
--- /dev/null
+++ b/browser/components/ColorPicker.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SketchPicker } from 'react-color'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ColorPicker.styl'
+
+const componentHeight = 333
+
+class ColorPicker extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      color: this.props.color || '#888888'
+    }
+
+    this.onColorChange = this.onColorChange.bind(this)
+    this.handleConfirm = this.handleConfirm.bind(this)
+  }
+
+  onColorChange (color) {
+    this.setState({
+      color
+    })
+  }
+
+  handleConfirm () {
+    this.props.onConfirm(this.state.color)
+  }
+
+  render () {
+    const { onReset, onCancel, targetRect } = this.props
+    const { color } = this.state
+
+    const clientHeight = document.body.clientHeight
+    const alignX = targetRect.right + 4
+    let alignY = targetRect.top
+    if (targetRect.top + componentHeight > clientHeight) {
+      alignY = targetRect.bottom - componentHeight
+    }
+
+    return (
+      <div styleName='colorPicker' style={{top: `${alignY}px`, left: `${alignX}px`}}>
+        <SketchPicker color={color} onChange={this.onColorChange} />
+        <div styleName='footer'>
+          <button styleName='btn-reset' onClick={onReset}>Reset</button>
+          <button styleName='btn-cancel' onClick={onCancel}>Cancel</button>
+          <button styleName='btn-confirm' onClick={this.handleConfirm}>Confirm</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ColorPicker.propTypes = {
+  color: PropTypes.string,
+  targetRect: PropTypes.object,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired
+}
+
+export default CSSModules(ColorPicker, styles)
diff --git a/browser/components/ColorPicker.styl b/browser/components/ColorPicker.styl
new file mode 100644
index 00000000..4c5a269c
--- /dev/null
+++ b/browser/components/ColorPicker.styl
@@ -0,0 +1,25 @@
+.colorPicker
+  position fixed
+  z-index 10000
+  display flex
+  flex-direction column
+.footer
+  display flex
+  justify-content center
+  align-items center
+  padding 5px
+  & > button + button
+    margin-left 10px
+
+.btn-cancel,
+.btn-confirm,
+.btn-reset
+  height 1.6em
+  border 1px solid #888888
+  background-color #fff
+  font-size 16px
+  border-radius 4px
+.btn-confirm
+  background-color $ui-button-default--active-backgroundColor
+
+
diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 2fc70a39..cd97527c 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -15,8 +15,8 @@ import i18n from 'browser/lib/i18n'
  * @param {string} tagName
  * @return {React.Component}
  */
-const TagElement = ({ tagName }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName}>
+const TagElement = ({ tagName, color }) => (
+  <span styleName='item-bottom-tagList-item' key={tagName} style={{backgroundColor: color}}>
     #{tagName}
   </span>
 )
@@ -27,7 +27,7 @@ const TagElement = ({ tagName }) => (
  * @param {boolean} showTagsAlphabetically
  * @return {React.Component}
  */
-const TagElementList = (tags, showTagsAlphabetically) => {
+const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
   if (!isArray(tags)) {
     return []
   }
@@ -35,7 +35,7 @@ const TagElementList = (tags, showTagsAlphabetically) => {
   if (showTagsAlphabetically) {
     return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
   } else {
-    return tags.map(tag => TagElement({ tagName: tag }))
+    return tags.map(tag => TagElement({ tagName: tag, color: tagConfig[tag] }))
   }
 }
 
@@ -59,7 +59,8 @@ const NoteItem = ({
   storageName,
   folderName,
   viewType,
-  showTagsAlphabetically
+  showTagsAlphabetically,
+  tagConfig
 }) => (
   <div
     styleName={isActive ? 'item--active' : 'item'}
@@ -97,7 +98,7 @@ const NoteItem = ({
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags, showTagsAlphabetically)
+            ? TagElementList(note.tags, showTagsAlphabetically, tagConfig)
             : <span
               style={{ fontStyle: 'italic', opacity: 0.5 }}
               styleName='item-bottom-tagList-empty'
@@ -127,6 +128,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
   dateDisplay: PropTypes.string.isRequired,
+  tagConfig: PropTypes.object,
   note: PropTypes.shape({
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index eec8ab14..64a74d63 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,9 +12,10 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {Function} handleClickNarrowToTag
 * @param {bool} isActive
 * @param {bool} isRelated
+* @param {string} bgColor tab backgroundColor
 */
 
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count, color}) => (
   <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
     {isRelated
       ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
@@ -23,7 +24,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
       : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
     }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-      <span styleName='tagList-item-name'>
+      <span styleName='tagList-item-name' style={{color}}>
         {`# ${name}`}
         <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
       </span>
@@ -33,7 +34,8 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
 
 TagListItem.propTypes = {
   name: PropTypes.string.isRequired,
-  handleClickTagListItem: PropTypes.func.isRequired
+  handleClickTagListItem: PropTypes.func.isRequired,
+  color: PropTypes.string
 }
 
 export default CSSModules(TagListItem, styles)
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index bc6cd499..024f6424 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -437,6 +437,7 @@ class MarkdownNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={this.handleUpdateTag.bind(this)}
+          tagConfig={config.tag}
         />
         <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index d8b5798d..96ea0941 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -788,6 +788,7 @@ class SnippetNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={(e) => this.handleChange(e)}
+          tagConfig={config.tag}
         />
       </div>
       <div styleName='info-right'>
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index 6ced475b..d4411af9 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -179,13 +179,14 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className, showTagsAlphabetically } = this.props
+    const { value, className, showTagsAlphabetically, tagConfig } = this.props
 
     const tagList = _.isArray(value)
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
         return (
           <span styleName='tag'
             key={tag}
+            style={{backgroundColor: tagConfig[tag]}}
           >
             <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
@@ -240,7 +241,8 @@ TagSelect.contextTypes = {
 TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  tagConfig: PropTypes.object
 }
 
 export default CSSModules(TagSelect, styles)
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index dbc9cfd3..8131c0e2 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1047,6 +1047,7 @@ class NoteList extends React.Component {
               storageName={this.getNoteStorage(note).name}
               viewType={viewType}
               showTagsAlphabetically={config.ui.showTagsAlphabetically}
+              tagConfig={config.tag}
             />
           )
         }
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index b98d859d..d53568e0 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -20,6 +20,7 @@ import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
 import { remote } from 'electron'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import ColorPicker from 'browser/components/ColorPicker'
 
 function matchActiveTags (tags, activeTags) {
   return _.every(activeTags, v => tags.indexOf(v) >= 0)
@@ -27,6 +28,22 @@ function matchActiveTags (tags, activeTags) {
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      colorPickerState: {
+        show: false,
+        color: null,
+        tagName: null,
+        targetRect: null
+      }
+    }
+
+    this.dismissColorPicker = this.dismissColorPicker.bind(this)
+    this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this)
+    this.handleColorPickerReset = this.handleColorPickerReset.bind(this)
+  }
 
   componentDidMount () {
     EventEmitter.on('side:preferences', this.handleMenuButtonClick)
@@ -104,9 +121,63 @@ class SideNav extends React.Component {
       click: this.deleteTag.bind(this, tag)
     })
 
+    menu.push({
+      label: i18n.__('Customize Color'),
+      click: this.displayColorPicker.bind(this, tag, e.target.getBoundingClientRect())
+    })
+
     context.popup(menu)
   }
 
+  dismissColorPicker () {
+    this.setState({
+      colorPickerState: {
+        show: false
+      }
+    })
+  }
+
+  displayColorPicker (tagName, rect) {
+    const { config } = this.props
+    this.setState({
+      colorPickerState: {
+        show: true,
+        color: config.tag && config.tag[tagName],
+        tagName,
+        targetRect: rect
+      }
+    })
+  }
+
+  handleColorPickerConfirm (color) {
+    const { dispatch, config: {tag} } = this.props
+    const { colorPickerState: { tagName } } = this.state
+    const tagConfig = Object.assign({}, tag, {[tagName]: color.hex})
+
+    const config = {tag: tagConfig}
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
+  handleColorPickerReset () {
+    const { dispatch, config: {tag} } = this.props
+    const { colorPickerState: { tagName } } = this.state
+    const tagConfig = Object.assign({}, tag)
+    delete tagConfig[tagName]
+
+    const config = {tag: tagConfig}
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
   handleToggleButtonClick (e) {
     const { dispatch, config } = this.props
 
@@ -241,6 +312,7 @@ class SideNav extends React.Component {
             isRelated={tag.related}
             key={tag.name}
             count={tag.size}
+            color={config.tag[tag.name]}
           />
         )
       })
@@ -333,6 +405,7 @@ class SideNav extends React.Component {
 
   render () {
     const { data, location, config, dispatch } = this.props
+    const { colorPickerState } = this.state
 
     const isFolded = config.isSideNavFolded
 
@@ -349,6 +422,20 @@ class SideNav extends React.Component {
         useDragHandle
       />
     })
+
+    let colorPicker
+    if (colorPickerState.show) {
+      colorPicker = (
+        <ColorPicker
+          color={colorPickerState.color}
+          targetRect={colorPickerState.targetRect}
+          onConfirm={this.handleColorPickerConfirm}
+          onCancel={this.dismissColorPicker}
+          onReset={this.handleColorPickerReset}
+        />
+      )
+    }
+
     const style = {}
     if (!isFolded) style.width = this.props.width
     const isTagActive = location.pathname.match(/tag/)
@@ -368,6 +455,7 @@ class SideNav extends React.Component {
           </div>
         </div>
         {this.SideNavComponent(isFolded, storageList)}
+        {colorPicker}
       </div>
     )
   }
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 81165777..c70978f7 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -86,7 +86,8 @@ export const DEFAULT_CONFIG = {
     token: '',
     username: '',
     password: ''
-  }
+  },
+  tag: {}
 }
 
 function validate (config) {
diff --git a/package.json b/package.json
index f12360a0..9b0c1d31 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "react": "^15.5.4",
     "react-autosuggest": "^9.4.0",
     "react-codemirror": "^0.3.0",
+    "react-color": "^2.17.0",
     "react-debounce-render": "^4.0.1",
     "react-dom": "^15.0.2",
     "react-image-carousel": "^2.0.18",
diff --git a/tests/components/TagListItem.snapshot.test.js b/tests/components/TagListItem.snapshot.test.js
index 8bea2ccb..637844e6 100644
--- a/tests/components/TagListItem.snapshot.test.js
+++ b/tests/components/TagListItem.snapshot.test.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer'
 import TagListItem from 'browser/components/TagListItem'
 
 it('TagListItem renders correctly', () => {
-  const tagListItem = renderer.create(<TagListItem name='Test' handleClickTagListItem={jest.fn()} />)
+  const tagListItem = renderer.create(<TagListItem name='Test' handleClickTagListItem={jest.fn()} color='#000' />)
 
   expect(tagListItem.toJSON()).toMatchSnapshot()
 })
diff --git a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
index ad883222..d6939ec2 100644
--- a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
+++ b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
@@ -14,6 +14,11 @@ exports[`TagListItem renders correctly 1`] = `
   >
     <span
       className="tagList-item-name"
+      style={
+        Object {
+          "color": "#000",
+        }
+      }
     >
       # Test
       <span

From 6367be213f1d7760637d57ba1b44bb1a59c23e9e Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Fri, 28 Dec 2018 11:13:05 +0800
Subject: [PATCH 2/7] rename config.tag to config.coloredTags

---
 browser/components/ColorPicker.styl       |  6 ++--
 browser/components/NoteItem.js            | 13 +++++----
 browser/main/Detail/MarkdownNoteDetail.js |  2 +-
 browser/main/Detail/SnippetNoteDetail.js  |  2 +-
 browser/main/Detail/TagSelect.js          |  6 ++--
 browser/main/NoteList/index.js            |  2 +-
 browser/main/SideNav/index.js             | 34 ++++++++++++-----------
 browser/main/lib/ConfigManager.js         |  2 +-
 package.json                              |  3 +-
 9 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/browser/components/ColorPicker.styl b/browser/components/ColorPicker.styl
index 4c5a269c..927a0da2 100644
--- a/browser/components/ColorPicker.styl
+++ b/browser/components/ColorPicker.styl
@@ -17,9 +17,9 @@
   height 1.6em
   border 1px solid #888888
   background-color #fff
-  font-size 16px
-  border-radius 4px
+  font-size 15px
+  border-radius 2px
 .btn-confirm
-  background-color $ui-button-default--active-backgroundColor
+  background-color #1EC38B
 
 
diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index cd97527c..70708223 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -13,6 +13,7 @@ import i18n from 'browser/lib/i18n'
 /**
  * @description Tag element component.
  * @param {string} tagName
+ * @param {string} color
  * @return {React.Component}
  */
 const TagElement = ({ tagName, color }) => (
@@ -25,9 +26,10 @@ const TagElement = ({ tagName, color }) => (
  * @description Tag element list component.
  * @param {Array|null} tags
  * @param {boolean} showTagsAlphabetically
+ * @param {Object} coloredTags
  * @return {React.Component}
  */
-const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
+const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
   if (!isArray(tags)) {
     return []
   }
@@ -35,7 +37,7 @@ const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
   if (showTagsAlphabetically) {
     return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
   } else {
-    return tags.map(tag => TagElement({ tagName: tag, color: tagConfig[tag] }))
+    return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
   }
 }
 
@@ -46,6 +48,7 @@ const TagElementList = (tags, showTagsAlphabetically, tagConfig) => {
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
+ * @param {Object} coloredTags
  * @param {string} dateDisplay
  */
 const NoteItem = ({
@@ -60,7 +63,7 @@ const NoteItem = ({
   folderName,
   viewType,
   showTagsAlphabetically,
-  tagConfig
+  coloredTags
 }) => (
   <div
     styleName={isActive ? 'item--active' : 'item'}
@@ -98,7 +101,7 @@ const NoteItem = ({
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags, showTagsAlphabetically, tagConfig)
+            ? TagElementList(note.tags, showTagsAlphabetically, coloredTags)
             : <span
               style={{ fontStyle: 'italic', opacity: 0.5 }}
               styleName='item-bottom-tagList-empty'
@@ -128,7 +131,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
   dateDisplay: PropTypes.string.isRequired,
-  tagConfig: PropTypes.object,
+  coloredTags: PropTypes.object,
   note: PropTypes.shape({
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 024f6424..ad7eb590 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -437,7 +437,7 @@ class MarkdownNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={this.handleUpdateTag.bind(this)}
-          tagConfig={config.tag}
+          coloredTags={config.coloredTags}
         />
         <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 96ea0941..237efb3c 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -788,7 +788,7 @@ class SnippetNoteDetail extends React.Component {
           showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={(e) => this.handleChange(e)}
-          tagConfig={config.tag}
+          coloredTags={config.coloredTags}
         />
       </div>
       <div styleName='info-right'>
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index d4411af9..caf0cf39 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -179,14 +179,14 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className, showTagsAlphabetically, tagConfig } = this.props
+    const { value, className, showTagsAlphabetically, coloredTags } = this.props
 
     const tagList = _.isArray(value)
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
         return (
           <span styleName='tag'
             key={tag}
-            style={{backgroundColor: tagConfig[tag]}}
+            style={{backgroundColor: coloredTags[tag]}}
           >
             <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
@@ -242,7 +242,7 @@ TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func,
-  tagConfig: PropTypes.object
+  coloredTags: PropTypes.object
 }
 
 export default CSSModules(TagSelect, styles)
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 8131c0e2..ca513c04 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1047,7 +1047,7 @@ class NoteList extends React.Component {
               storageName={this.getNoteStorage(note).name}
               viewType={viewType}
               showTagsAlphabetically={config.ui.showTagsAlphabetically}
-              tagConfig={config.tag}
+              coloredTags={config.coloredTags}
             />
           )
         }
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index d53568e0..640bedbf 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -32,7 +32,7 @@ class SideNav extends React.Component {
     super(props)
 
     this.state = {
-      colorPickerState: {
+      colorPicker: {
         show: false,
         color: null,
         tagName: null,
@@ -131,7 +131,7 @@ class SideNav extends React.Component {
 
   dismissColorPicker () {
     this.setState({
-      colorPickerState: {
+      colorPicker: {
         show: false
       }
     })
@@ -140,9 +140,9 @@ class SideNav extends React.Component {
   displayColorPicker (tagName, rect) {
     const { config } = this.props
     this.setState({
-      colorPickerState: {
+      colorPicker: {
         show: true,
-        color: config.tag && config.tag[tagName],
+        color: config.coloredTags[tagName],
         tagName,
         targetRect: rect
       }
@@ -150,11 +150,11 @@ class SideNav extends React.Component {
   }
 
   handleColorPickerConfirm (color) {
-    const { dispatch, config: {tag} } = this.props
-    const { colorPickerState: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag, {[tagName]: color.hex})
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags, {[tagName]: color.hex})
 
-    const config = {tag: tagConfig}
+    const config = { coloredTags: newColoredTags }
     ConfigManager.set(config)
     dispatch({
       type: 'SET_CONFIG',
@@ -164,12 +164,13 @@ class SideNav extends React.Component {
   }
 
   handleColorPickerReset () {
-    const { dispatch, config: {tag} } = this.props
-    const { colorPickerState: { tagName } } = this.state
-    const tagConfig = Object.assign({}, tag)
-    delete tagConfig[tagName]
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags)
 
-    const config = {tag: tagConfig}
+    delete newColoredTags[tagName]
+
+    const config = { coloredTags: newColoredTags }
     ConfigManager.set(config)
     dispatch({
       type: 'SET_CONFIG',
@@ -278,6 +279,7 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location, config } = this.props
+    const { colorPicker } = this.state
     const activeTags = this.getActiveTags(location.pathname)
     const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
     let tagList = _.sortBy(data.tagNoteMap.map(
@@ -308,11 +310,11 @@ class SideNav extends React.Component {
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
             handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
             handleContextMenu={this.handleTagContextMenu.bind(this)}
-            isActive={this.getTagActive(location.pathname, tag.name)}
+            isActive={this.getTagActive(location.pathname, tag.name) || (colorPicker.tagName === tag.name)}
             isRelated={tag.related}
             key={tag.name}
             count={tag.size}
-            color={config.tag[tag.name]}
+            color={config.coloredTags[tag.name]}
           />
         )
       })
@@ -405,7 +407,7 @@ class SideNav extends React.Component {
 
   render () {
     const { data, location, config, dispatch } = this.props
-    const { colorPickerState } = this.state
+    const { colorPicker: colorPickerState } = this.state
 
     const isFolded = config.isSideNavFolded
 
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index c70978f7..b8cfa1ef 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -87,7 +87,7 @@ export const DEFAULT_CONFIG = {
     username: '',
     password: ''
   },
-  tag: {}
+  coloredTags: {}
 }
 
 function validate (config) {
diff --git a/package.json b/package.json
index 9b0c1d31..af266309 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "react": "^15.5.4",
     "react-autosuggest": "^9.4.0",
     "react-codemirror": "^0.3.0",
-    "react-color": "^2.17.0",
+    "react-color": "^2.2.2",
     "react-debounce-render": "^4.0.1",
     "react-dom": "^15.0.2",
     "react-image-carousel": "^2.0.18",
@@ -154,7 +154,6 @@
     "merge-stream": "^1.0.0",
     "mock-require": "^3.0.1",
     "nib": "^1.1.0",
-    "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
     "react-input-autosize": "^1.1.0",
     "react-router": "^2.4.0",

From 699006a3e93ebf8e1651fbac75fc9e29ea6d9bf4 Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Fri, 28 Dec 2018 12:05:59 +0800
Subject: [PATCH 3/7] Improve ui of colored tags

---
 browser/components/ColorPicker.js             |  9 +++++--
 browser/components/ColorPicker.styl           | 24 ++++++++++++++-----
 browser/components/TagListItem.js             |  7 +++---
 browser/components/TagListItem.styl           |  5 ++++
 .../modals/PreferencesModal/FolderItem.styl   |  2 +-
 .../TagListItem.snapshot.test.js.snap         |  7 ++++--
 6 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/browser/components/ColorPicker.js b/browser/components/ColorPicker.js
index f68aa8ec..9e0199c2 100644
--- a/browser/components/ColorPicker.js
+++ b/browser/components/ColorPicker.js
@@ -4,20 +4,24 @@ import { SketchPicker } from 'react-color'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ColorPicker.styl'
 
-const componentHeight = 333
+const componentHeight = 330
 
 class ColorPicker extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      color: this.props.color || '#888888'
+      color: this.props.color || '#939395'
     }
 
     this.onColorChange = this.onColorChange.bind(this)
     this.handleConfirm = this.handleConfirm.bind(this)
   }
 
+  componentWillReceiveProps (nextProps) {
+    this.onColorChange(nextProps.color)
+  }
+
   onColorChange (color) {
     this.setState({
       color
@@ -41,6 +45,7 @@ class ColorPicker extends React.Component {
 
     return (
       <div styleName='colorPicker' style={{top: `${alignY}px`, left: `${alignX}px`}}>
+        <div styleName='cover' onClick={onCancel} />
         <SketchPicker color={color} onChange={this.onColorChange} />
         <div styleName='footer'>
           <button styleName='btn-reset' onClick={onReset}>Reset</button>
diff --git a/browser/components/ColorPicker.styl b/browser/components/ColorPicker.styl
index 927a0da2..6e4aceb8 100644
--- a/browser/components/ColorPicker.styl
+++ b/browser/components/ColorPicker.styl
@@ -1,25 +1,37 @@
 .colorPicker
   position fixed
-  z-index 10000
+  z-index 2
   display flex
   flex-direction column
+
+.cover
+  position fixed
+  top 0
+  right 0
+  bottom 0
+  left 0
+
 .footer
   display flex
   justify-content center
+  z-index 2
   align-items center
-  padding 5px
   & > button + button
     margin-left 10px
 
 .btn-cancel,
 .btn-confirm,
 .btn-reset
-  height 1.6em
-  border 1px solid #888888
-  background-color #fff
-  font-size 15px
+  vertical-align middle
+  height 25px
+  margin-top 2.5px
+  colorDefaultButton()
   border-radius 2px
+  border $ui-border
+  padding 0 5px
 .btn-confirm
   background-color #1EC38B
+  &:hover
+    background-color darken(#1EC38B, 25%)
 
 
diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 64a74d63..9aa00a1d 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -10,8 +10,8 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {string} name
 * @param {Function} handleClickTagListItem
 * @param {Function} handleClickNarrowToTag
-* @param {bool} isActive
-* @param {bool} isRelated
+* @param {boolean} isActive
+* @param {boolean} isRelated
 * @param {string} bgColor tab backgroundColor
 */
 
@@ -24,7 +24,8 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
       : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
     }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-      <span styleName='tagList-item-name' style={{color}}>
+      <span styleName='tagList-item-color' style={{backgroundColor: color || 'transparent'}} />
+      <span styleName='tagList-item-name'>
         {`# ${name}`}
         <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
       </span>
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 555520b0..9f407a17 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -71,6 +71,11 @@
   padding-right 15px
   font-size 13px
 
+.tagList-item-color
+  height 26px
+  width 3px
+  display inline-block
+
 body[data-theme="white"]
   .tagList-item
     color $ui-inactive-text-color
diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl
index 2ded3ada..618e9bc4 100644
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -62,7 +62,7 @@
 .folderItem-right-button
   vertical-align middle
   height 25px
-  margin-top 2.5px
+  margin-top 2px
   colorDefaultButton()
   border-radius 2px
   border $ui-border
diff --git a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
index d6939ec2..e3798130 100644
--- a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
+++ b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
@@ -13,12 +13,15 @@ exports[`TagListItem renders correctly 1`] = `
     onClick={[Function]}
   >
     <span
-      className="tagList-item-name"
+      className="tagList-item-color"
       style={
         Object {
-          "color": "#000",
+          "backgroundColor": "#000",
         }
       }
+    />
+    <span
+      className="tagList-item-name"
     >
       # Test
       <span

From 0cf6487cad923092a61a9e8440f4706fc31e0513 Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Fri, 28 Dec 2018 22:12:51 +0800
Subject: [PATCH 4/7] invert text color in colored tags

---
 browser/components/NoteItem.js   | 18 +++++++++++++-----
 browser/main/Detail/TagSelect.js | 12 ++++++++++--
 package.json                     |  1 +
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 70708223..5e8d009f 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isArray } from 'lodash'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
@@ -16,11 +17,18 @@ import i18n from 'browser/lib/i18n'
  * @param {string} color
  * @return {React.Component}
  */
-const TagElement = ({ tagName, color }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName} style={{backgroundColor: color}}>
-    #{tagName}
-  </span>
-)
+const TagElement = ({ tagName, color }) => {
+  const style = {}
+  if (color) {
+    style.backgroundColor = color
+    style.color = invertColor(color, { black: '#222', white: '#f1f1f1', threshold: 0.3 })
+  }
+  return (
+    <span styleName='item-bottom-tagList-item' key={tagName} style={style}>
+      #{tagName}
+    </span>
+  )
+}
 
 /**
  * @description Tag element list component.
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index caf0cf39..511ecf1a 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -183,12 +184,19 @@ class TagSelect extends React.Component {
 
     const tagList = _.isArray(value)
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
+        const wrapperStyle = {}
+        const textStyle = {}
+        const color = coloredTags[tag]
+        if (color) {
+          wrapperStyle.backgroundColor = color
+          textStyle.color = invertColor(color, { black: '#222', white: '#f1f1f1' })
+        }
         return (
           <span styleName='tag'
             key={tag}
-            style={{backgroundColor: coloredTags[tag]}}
+            style={wrapperStyle}
           >
-            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
+            <span styleName='tag-label' style={textStyle} onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
diff --git a/package.json b/package.json
index af266309..57ab674d 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "i18n-2": "^0.7.2",
     "iconv-lite": "^0.4.19",
     "immutable": "^3.8.1",
+    "invert-color": "^2.0.0",
     "js-sequence-diagrams": "^1000000.0.6",
     "js-yaml": "^3.12.0",
     "katex": "^0.9.0",

From 39442bcafe8bf2e8c1d7029b20011b9908dc6633 Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Sat, 29 Dec 2018 22:23:48 +0800
Subject: [PATCH 5/7] invert icon-x color when tag text color is inverted

---
 browser/main/Detail/TagSelect.js | 11 +++++++++--
 resources/icon/icon-x-light.svg  | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 resources/icon/icon-x-light.svg

diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index 511ecf1a..4b924aa3 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -186,10 +186,17 @@ class TagSelect extends React.Component {
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
         const wrapperStyle = {}
         const textStyle = {}
+        const BLACK = '#333333'
+        const WHITE = '#f1f1f1'
         const color = coloredTags[tag]
+        const invertedColor = color && invertColor(color, { black: BLACK, white: WHITE })
+        let iconRemove = '../resources/icon/icon-x.svg'
         if (color) {
           wrapperStyle.backgroundColor = color
-          textStyle.color = invertColor(color, { black: '#222', white: '#f1f1f1' })
+          textStyle.color = invertedColor
+        }
+        if (invertedColor === WHITE) {
+          iconRemove = '../resources/icon/icon-x-light.svg'
         }
         return (
           <span styleName='tag'
@@ -200,7 +207,7 @@ class TagSelect extends React.Component {
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
-              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
+              <img className='tag-removeButton-icon' src={iconRemove} width='8px' />
             </button>
           </span>
         )
diff --git a/resources/icon/icon-x-light.svg b/resources/icon/icon-x-light.svg
new file mode 100644
index 00000000..39828f0b
--- /dev/null
+++ b/resources/icon/icon-x-light.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Feather" transform="translate(-1910.000000, -644.000000)" stroke="#c1c1c1" stroke-width="2">
+            <g id="Group" transform="translate(175.000000, 332.000000)">
+                <g id="x" transform="translate(1736.000000, 313.000000)">
+                    <path d="M12,0 L0,12" id="Shape"></path>
+                    <path d="M0,0 L12,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From a9feddf6f69fdde9b0f5eb450678b5e4a017354c Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Sun, 30 Dec 2018 19:23:43 +0800
Subject: [PATCH 6/7] fix bug missing param colored tags in sorted list

---
 browser/components/NoteItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 5e8d009f..625bb38d 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -43,7 +43,7 @@ const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
   }
 
   if (showTagsAlphabetically) {
-    return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
+    return _.sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
   } else {
     return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
   }

From b4e4d7055fbefe44c0321220144013fdd6d54419 Mon Sep 17 00:00:00 2001
From: HarlanLuo <luoxwen@gmail.com>
Date: Sun, 30 Dec 2018 20:49:26 +0800
Subject: [PATCH 7/7] improve style of color-picker

---
 browser/components/ColorPicker.styl | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/browser/components/ColorPicker.styl b/browser/components/ColorPicker.styl
index 6e4aceb8..fbc1212a 100644
--- a/browser/components/ColorPicker.styl
+++ b/browser/components/ColorPicker.styl
@@ -25,10 +25,12 @@
   vertical-align middle
   height 25px
   margin-top 2.5px
-  colorDefaultButton()
   border-radius 2px
-  border $ui-border
+  border none
   padding 0 5px
+  background-color $default-button-background
+  &:hover
+    background-color $default-button-background--hover
 .btn-confirm
   background-color #1EC38B
   &:hover