Add chart type icon and color well to viz settings

resources/frontend_client/app/css/query_builder.css

@@ -415,6 +415,13 @@
     opacity: 0.5;
 }
 
+.ColorWell {
+    width: 18px;
+    height: 18px;
+    margin: 3px;
+    margin-right: 0.3rem;
+}
+
 .RunButton {
     transition: margin-top 0.5s;
     margin-top: -200px;

resources/frontend_client/app/query_builder/visualization_settings.react.js

@@ -105,8 +105,11 @@ export default React.createClass({
             targetAttachment: 'bottom left',
             targetOffset: '5px 25px'
         };
+
+        var iconName = this.visualizationTypeNames[this.props.card.display].iconName;
         var triggerElement = (
-            <span className="px2 py2 text-bold cursor-pointer text-default">
+            <span className="px2 py2 text-bold cursor-pointer text-default flex align-center">
+                <Icon name={iconName} width="24px" height="24px"/>
                 {this.visualizationTypeNames[this.props.card.display].displayName}
                 <Icon className="ml1" name="chevrondown" width="8px" height="8px"/>
             </span>
@@ -163,8 +166,10 @@ export default React.createClass({
                 ));
             }
 
+            var color = this.props.card.visualization_settings.bar && this.props.card.visualization_settings.bar.color || null;
             var triggerElement = (
-                <span className="px2 py2 text-bold cursor-pointer text-default">
+                <span className="px2 py2 text-bold cursor-pointer text-default flex align-center">
+                     <div className="ColorWell rounded bordered" style={{backgroundColor:color}}></div>
                     Color
                     <Icon className="ml1" name="chevrondown" width="8px" height="8px"/>
                 </span>