Change no-color icon in color palette

www/drive/app-drive.less

@@ -185,7 +185,6 @@
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
-
         .cp-app-drive-color-picker-color {
             position: relative;
             width: 50px;
@@ -193,38 +192,13 @@
             margin: 5px;
             display: inline-block;
             cursor: pointer;
-            &.cp-app-drive-no-color {
-                position: relative;
-                width: 40px;
-                height: 40px;
-                margin: 10px;
-                border: 1px solid #444;
-                border-radius: 2px;
-                background-color: white;
-                overflow: hidden;
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: -1px; left: 0;
-                    width: 200%;
-                    border: 1px solid #bbb;
-                    transform-origin: top left;
-                    -ms-transform-origin: top left;
-                    transform: rotate(45deg);
-                    -ms-transform: rotate(45deg);
-                    -webkit-transform: rotate(45deg);
-                }
-                &.cp-app-drive-current-color > .fa-check {
-                    top: 35%; left: 35%;
-                    color: black;
-                }
-            }
-
             .cp-app-drive-icon-folder {
                 position: absolute;
                 font-size: 50px;
             }
-
+            .cptools-folder-no-color {
+                color: #999;
+            }
             .fa-check {
                 position: absolute;
                 top: 40%; left: 35%;
@@ -234,6 +208,9 @@
                 color: white;
             }
 
+            &.cp-app-drive-current-color:first-child > .fa-check {
+                color: black;
+            }
         }
     }
 

www/drive/inner.js

@@ -884,46 +884,26 @@ define([
 
 
         var pickFolderColor = function ($element, currentColor, cb) {
-            var colors = ["none", "#f23c38", "#ff0073", "#da0eba", "#9d00ac", "#6c19b3", "#4a42b1", "#3d8af0", "#30a0f1", "#1fb9d1", "#009686", "#45b354", "#84c750", "#c6e144", "#faf147", "#fbc423", "#fc9819", "#fd5227", "#775549", "#9c9c9c", "#607a89"];
+            var colors = ["", "#f23c38", "#ff0073", "#da0eba", "#9d00ac", "#6c19b3", "#4a42b1", "#3d8af0", "#30a0f1", "#1fb9d1", "#009686", "#45b354", "#84c750", "#c6e144", "#faf147", "#fbc423", "#fc9819", "#fd5227", "#775549", "#9c9c9c", "#607a89"];
             var colorsElements = [];
             var currentElement = null;
             colors.forEach(function (color, i) {
-
+                var element = h("span.cp-app-drive-color-picker-color", [
-                var element;
+                    h("span.cptools.cp-app-drive-icon-folder.cp-app-drive-content-icon" + (i === 0 ? ".cptools-folder-no-color" : ".cptools-folder")), // XXX cptools-folder-no-color does not show up
-                if (i === 0) {
+                    h("span.fa.fa-check")
-                    element = h("span.cp-app-drive-color-picker-color.cp-app-drive-no-color", [
+                ]);
-                        h("span.fa.fa-check")
+                $(element).css("color", colors[i]);
-                    ]);
+                if (colors[i] === currentColor) {
-                    if (currentColor === "") {
+                    currentElement = element;
-                        currentElement = element;
+                    $(element).addClass("cp-app-drive-current-color");
-                        $(element).addClass("cp-app-drive-current-color");
+                }
-                    }
+                $(element).on("click", function () {
-                    $(element).on("click", function () {
+                    $(currentElement).removeClass("cp-app-drive-current-color");
-                        $(currentElement).removeClass("cp-app-drive-current-color");
+                    currentElement = element;
-                        currentElement = element;
+                    $(element).addClass("cp-app-drive-current-color");
-                        $(element).addClass("cp-app-drive-current-color");
+                    cb(color);
-                        cb("");
+                });
-                    });
+                colorsElements.push(element);
-                    colorsElements.push(element);
-                }
-                else {
-                    element = h("span.cp-app-drive-color-picker-color", [
-                        h("span.cptools-folder.cptools.cp-app-drive-icon-folder.cp-app-drive-content-icon"),
-                        h("span.fa.fa-check")
-                    ]);
-                    $(element).css("color", colors[i]);
-                    if (colors[i] === currentColor) {
-                        currentElement = element;
-                        $(element).addClass("cp-app-drive-current-color");
-                    }
-                    $(element).on("click", function () {
-                        $(currentElement).removeClass("cp-app-drive-current-color");
-                        currentElement = element;
-                        $(element).addClass("cp-app-drive-current-color");
-                        cb(color);
-                    });
-                    colorsElements.push(element);
-                }
             });
             var content = h("div.cp-app-drive-color-picker", colorsElements);
             UI.alert(content);