implement tagItem active styleName

browser/components/TagListItem.js

@@ -8,10 +8,11 @@ import CSSModules from 'browser/lib/CSSModules'
 /**
 * @param {string} name
 * @param {Function} handleClickTagListItem
+* @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem}) => (
-  <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
+const TagListItem = ({name, handleClickTagListItem, isActive}) => (
+  <button styleName={isActive? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
     </span>

browser/components/TagListItem.styl

@@ -20,6 +20,18 @@
     color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
+.tagList-item-active
+  background-color $ui-button--active-backgroundColor
+  display flex
+  width 100%
+  height 26px
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+
 .tagList-item-name
   display block
   flex 1
@@ -31,4 +43,3 @@
   border-color transparent
   overflow hidden
   text-overflow ellipsis
-