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