Icons in discover

mopidy_iris/static/app.css

@@ -5591,7 +5591,8 @@ main header {
         transition: all 0.2s ease-in-out;
         position: relative;
         padding: 9px 12px 8px 24px;
-        cursor: pointer; }
+        cursor: pointer;
+        color: #000000; }
         .dropdown-field .options > .liner .option:before {
           -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
@@ -6442,7 +6443,7 @@ main .track-view {
   .discover-view .actions .autocomplete-field {
     width: 250px;
     display: inline-block;
-    vertical-align: top;
+    vertical-align: bottom;
     padding: 0;
     margin-right: 1px; }
     .discover-view .actions .autocomplete-field .input {

mopidy_iris/static/app.js

@@ -4041,7 +4041,7 @@ var Thumbnail = function (_React$Component) {
 					{ className: 'zoom', onClick: function onClick(e) {
 							return _this2.zoom(e, image);
 						} },
-					_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'search' })
+					_react2.default.createElement(_Icon2.default, { name: 'search' })
 				);
 			}
 
@@ -71449,7 +71449,7 @@ var Discover = function (_React$Component) {
 							'div',
 							{ className: 'label' },
 							helpers.titleCase(type),
-							_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'close', className: 'remove', onClick: function onClick() {
+							_react2.default.createElement(_Icon2.default, { name: 'close', className: 'remove', onClick: function onClick() {
 									return _this2.removeSeed(index);
 								} })
 						),
@@ -71517,7 +71517,7 @@ var Discover = function (_React$Component) {
 								{ className: 'remove', onClick: function onClick(e) {
 										return _this3.toggleTunability(tunability.name);
 									} },
-								_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'close' })
+								_react2.default.createElement(_Icon2.default, { name: 'close' })
 							)
 						),
 						_react2.default.createElement(
@@ -71713,7 +71713,7 @@ var Discover = function (_React$Component) {
 								{ className: "submit button primary large" + (is_loading ? " working" : ""), onClick: function onClick(e) {
 										return _this5.getRecommendations();
 									} },
-								_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'compass' }),
+								_react2.default.createElement(_Icon2.default, { name: 'explore' }),
 								'\xA0 Find recommendations'
 							)
 						)

mopidy_iris/static/index.html

@@ -77,7 +77,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1527581014";
+	var build = "1527584808";
 	var version = "3.18.0";
 
 	// Construct the script tag

src/js/components/Thumbnail.js

@@ -85,7 +85,7 @@ class Thumbnail extends React.Component{
 		
 		var zoom_icon = null;
 		if (this.props.canZoom){
-			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><Icon type="fontawesome" name="search" /></span>;
+			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><Icon name="search" /></span>;
 		}
 
 		return (

src/js/views/discover/DiscoverRecommendations.js

@@ -312,7 +312,7 @@ class Discover extends React.Component{
 								{seed.images ? <URILink className="thumbnail-wrapper" type={type} uri={seed.uri}><Thumbnail images={seed.images} circle={seed.type == "artist"} size="small" /></URILink> : null}
 								<div className="label">
 									{helpers.titleCase(type)}
-									<Icon type="fontawesome" name="close" className="remove" onClick={() => this.removeSeed(index)} />
+									<Icon name="close" className="remove" onClick={() => this.removeSeed(index)} />
 								</div>
 								<div className="name">{seed.name}</div>
 							</div>
@@ -369,7 +369,7 @@ class Discover extends React.Component{
 								<div className="label">
 									{helpers.titleCase(tunability.name)}
 									<span className="remove" onClick={e => this.toggleTunability(tunability.name)}>
-										<Icon type="fontawesome" name="close" />
+										<Icon name="close" />
 									</span>
 								</div>
 								<div className="input">
@@ -519,7 +519,7 @@ class Discover extends React.Component{
 							<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
 							<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="default" handleChange={val => {this.toggleTunability(val)}} />
 							<span className={"submit button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
-								<Icon type="fontawesome" name="compass" />&nbsp; 
+								<Icon name="explore" />&nbsp; 
 								Find recommendations
 							</span>
 

src/scss/components/_dropdown-field.scss

@@ -95,6 +95,7 @@
 				position: relative;
 				padding: 9px 12px 8px 24px;
 				cursor: pointer;
+				color: $black;
 				
 				&:before {
 					@include animate();

src/scss/views/_discover.scss

@@ -123,7 +123,7 @@
 		.autocomplete-field {
 			width: 250px;
 			display: inline-block;
-			vertical-align: top;
+			vertical-align: bottom;
 			padding: 0;
 			margin-right: 1px;