Improve ui of colored tags

Author: elfman

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>

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%)
 
 

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>

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

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

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