images_alternative for artists; Larger kiosk text

src/js/services/ui/reducer.js

@@ -298,9 +298,14 @@ export default function reducer(ui = {}, action){
             var artists = Object.assign([], ui.artists)
 
             if (artists[action.key]){
-                // if we've already got images, delete our new ones
+
+                // if we've already got images, remove and add as additional_images
                 // this is to prevent LastFM overwriting Spotify images
-                if (artists[action.key].images) delete action.artist.images
+                if (artists[action.key].images){
+                    action.artist.images_additional = action.artist.images
+                    delete action.artist.images
+                }
+
                 var artist = Object.assign({}, artists[action.key], action.artist)
             }else{
                 var artist = Object.assign({}, action.artist)

src/js/views/Artist.js

@@ -150,6 +150,7 @@ class Artist extends React.Component{
 				<div className="body about">
 
 					<div className="col w40 tiles">
+						{this.props.artist.images_additional ? <div className="tile thumbnail-wrapper"><Thumbnail size="large" images={this.props.artist.images_additional} /></div> : null}
 						{this.props.artist.followers ? <div className="tile"><span className="text"><FontAwesome name="users" />{this.props.artist.followers.total.toLocaleString() } followers</span></div> : null}
 						{this.props.artist.popularity ? <div className="tile"><span className="text"><FontAwesome name="fire" />{this.props.artist.popularity }% popularity</span></div> : null}
 						{this.props.artist.listeners ? <div className="tile"><span className="text"><FontAwesome name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</span></div> : null }
@@ -214,7 +215,7 @@ class Artist extends React.Component{
 						<Parallax image={image} />
 
 						<div className="liner">
-							<Thumbnail image={image} circle />
+							<Thumbnail image={image} canZoom circle />
 							<h1>{this.props.artist ? this.props.artist.name : null}</h1>
 							<div className="actions">
 								{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : null}

src/scss/components/_images.scss

@@ -40,7 +40,14 @@
 	}
 
 	&.circle {
-		border-radius: 50%;
+		.image {
+			border-radius: 50%;
+		}
+
+		.zoom {
+			bottom: 0;
+			right: 0;
+		}
 	}
 
 	&:hover {
@@ -112,6 +119,11 @@
 			z-index: -2;
 		}
 
+		&.thumbnail-wrapper {
+			&:before {
+				display: none;
+			}
+		}
 	}
 
 	@include responsive( null, $bp_medium ){

src/scss/components/_lists.scss

@@ -168,6 +168,7 @@
 
 			.thumbnail {
 				@include animate();
+				border-radius: 50%;
 				width: 50px;
 				margin-right: 15px;
 				float: left;

src/scss/components/_modal.scss

@@ -189,7 +189,8 @@
 			}
 
 			.current-track {
-				padding-top: 30px;
+				padding-top: 50px;
+				font-size: 30px;
 			}
 		}
 	}

src/scss/views/_artist.scss

@@ -18,14 +18,14 @@
 		.liner {
 			position: relative;
 			z-index: 1;
-			padding: 20vh 40px 0 220px;
+			padding: 20vh 40px 0 260px;
 
 			.thumbnail {
 				position: absolute;
 				z-index: 2;
 				left: 40px;
 				bottom: 20px;
-				max-width: 144px;
+				max-width: 184px;
 
 				.image {
 					background-color: $darkest_grey;