Change icons color in icon picker (see #7)

static/imgs/icon_select.svg → static/imgs/icon_select_dark.svg

@@ -2,7 +2,8 @@
 <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 2320 5410" style="enable-background:new 0 0 2320 5410;" xml:space="preserve">
-<style type="text/css">
+  <style type="text/css">
+    *{fill: #2f5188}
 	.st0{opacity:0.64;fill:url(#SVGID_1_);enable-background:new    ;}
 </style>
 <g>
@@ -752,11 +753,7 @@
 	c5.3-11.3-1.1-25.4-14.2-31.6l-599.2-281.3c-13.1-6.2-28.1-2-33.4,9.2l-5.6,11.9c-0.9,1.9-3.1,2.7-5,1.8c-1.9-0.9-2.7-3.1-1.8-5
 	l5.6-11.9c7-15,26.5-20.8,43.4-12.9l599.2,281.3c16.9,7.9,24.9,26.6,17.9,41.6L2830,5422.6z"/>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1984.2842" y1="3438.0569" x2="2136.0818" y2="3427.4424" gradientTransform="matrix(0.8637 -0.504 0.504 0.8637 -3116.2109 3036.4138)">
-	<stop  offset="0" style="stop-color:#FFD201"/>
-	<stop  offset="0" style="stop-color:#000000;stop-opacity:0.76"/>
-	<stop  offset="0.3011" style="stop-color:#000000;stop-opacity:0.53"/>
-	<stop  offset="0.6348" style="stop-color:#000000;stop-opacity:0.28"/>
-	<stop  offset="0.8768" style="stop-color:#000000;stop-opacity:9.000000e-02"/>
+	<stop  offset="0" style="stop-color:#2f5188;stop-opacity:0.76"/>
 	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 </linearGradient>
 <polygon class="st0" points="373.7,5055.9 316.1,4984.8 396.4,4832.4 501.7,5017.5 "/>

static/style.css

@@ -300,7 +300,7 @@ div#step4 > div:nth-of-type(1) {
 
 div#step4 > div:nth-of-type(1) {
   max-height: 500px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .iconpicker {
@@ -310,12 +310,17 @@ div#step4 > div:nth-of-type(1) {
 }
 
 .iconpicker > label {
-  background: #ebf3ff url('./imgs/icon_select.svg') no-repeat;
+  background: #ebf3ff url('./imgs/icon_select_dark.svg') no-repeat;
   background-size: 400%;
   height: 100px;
   width: 100px;
 }
 
+.iconpicker > input[type="radio"]:checked + label {
+  background: #2f5188 url('./imgs/icon_select_light.svg') no-repeat;
+  background-size: 400%;
+}
+
 div#step3 > div:nth-of-type(1) > input[type="radio"],
 div#step4 input[type="radio"] {
   display: none;
@@ -329,8 +334,7 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
   padding-right: 20px;
 }
 
-div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label,
-div#step4 input[type="radio"]:checked + label {
+div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label {
   color: #ebf3ff;
   background-color: #497ed5;
 }