WIP Simplify style

Author: bimlas

browser/components/TagListItem.js

@@ -17,10 +17,10 @@ import CSSModules from 'browser/lib/CSSModules'
 const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
   <div styleName='tagList-itemContainer'>
     {isRelated
-      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
-          <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
-        </button>
-      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div>
+      ? <button styleName={isActive ? 'tagList-item-narrow-active' : 'tagList-item-narrow'} onClick={() => handleClickNarrowToTag(name)}>
+        <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
+      </button>
+      : <div styleName={isActive ? 'tagList-item-narrow-active' : 'tagList-item-narrow'} />
     }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
       <span styleName='tagList-item-name'>

browser/components/TagListItem.styl

@@ -1,7 +1,7 @@
 .tagList-itemContainer
   display flex
 
-.tagList-item, .tagList-itemNarrow
+.tagList-item
   height 26px
   background-color transparent
   color $ui-inactive-text-color
@@ -26,10 +26,11 @@
   width 100%
   padding 0
 
-.tagList-itemNarrow
+.tagList-item-narrow
+  composes tagList-item
   padding 0 4px
 
-.tagList-item-active, .tagList-itemNarrow-active
+.tagList-item-active
   background-color $ui-button-default--active-backgroundColor
   height 26px
   margin-bottom 5px
@@ -48,7 +49,8 @@
   width 100%
   padding 0
 
-.tagList-itemNarrow-active
+.tagList-item-narrow-active
+  composes tagList-item-active
   padding 0 4px
 
 .tagList-item-name
@@ -67,7 +69,7 @@
   padding 0 3px
 
 body[data-theme="white"]
-  .tagList-item, .tagList-itemNarrow
+  .tagList-item
     color $ui-inactive-text-color
     &:hover
       color $ui-text-color
@@ -76,7 +78,7 @@ body[data-theme="white"]
       color $ui-text-color
       background-color $ui-button--active-backgroundColor
 
-  .tagList-item-active, .tagList-itemNarrow-active
+  .tagList-item-active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
     &:hover
@@ -85,7 +87,7 @@ body[data-theme="white"]
     color $ui-text-color
 
 body[data-theme="dark"]
-  .tagList-item, .tagList-itemNarrow
+  .tagList-item
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
@@ -94,7 +96,7 @@ body[data-theme="dark"]
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
 
-  .tagList-item-active, .tagList-itemNarrow-active
+  .tagList-item-active
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-text-color
     &:active