invert icon-x color when tag text color is inverted

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

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>