User view

src/js/views/Artist.js

@@ -190,9 +190,10 @@ class Artist extends React.Component{
 
 				<div className="intro">
 
-					<Parallax image={ image } />
+					<Parallax image={image} />
 
 					<div className="liner">
+						<Thumbnail image={image} circle />
 						<h1>{ this.props.artist.name }</h1>
 						<div className="actions">
 							{ scheme == 'spotify' ? <button className="primary rounded" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : null }

src/js/views/User.js

@@ -36,14 +36,9 @@ class User extends React.Component{
 		this.props.spotifyActions.getURL( this.props.user.playlists_more, 'SPOTIFY_USER_PLAYLISTS_LOADED', this.props.params.uri )
 	}
 
-	renderMeFlag(){
+	isMe(){
 		if( !this.props.spotify_authorized ) return null
-
-		if( helpers.getFromUri('userid',this.props.params.uri) == this.props.me.id ){
-			return <span className="flag blue"><FontAwesome name="star" />&nbsp;You</span>
-		}else{
-			return null
-		}
+		return helpers.getFromUri('userid',this.props.params.uri) == this.props.me.id
 	}
 
 	render(){
@@ -67,16 +62,17 @@ class User extends React.Component{
 				<div className="intro">
 					<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
 
-					<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }{ this.renderMeFlag() }</h1>
-
-					<div className="actions">
-						<FollowButton uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
-					</div>
+					<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
 
 					<ul className="details">
-						<li>{ this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0 } playlists</li>
-						<li>{ this.props.user.followers.total.toLocaleString() } followers</li>
+						{this.isMe() ? <li>You</li> : null}
+						<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
+						<li>{this.props.user.followers.total.toLocaleString()} followers</li>
 					</ul>
+
+					<div className="actions">
+						<FollowButton className="rounded outline" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
+					</div>
 				</div>
 				<div className="main">
 

src/scss/global/_forms.scss

@@ -156,6 +156,10 @@ input[type="submit"] {
 		color: $mid_grey !important;
 		cursor: not-allowed !important;
 	}
+
+	&:last-of-type {
+		margin-right: 0;
+	}
 }
 
 .field {

src/scss/views/_artist.scss

@@ -20,6 +20,14 @@
 			z-index: 1;
 			padding: 20vh 40px 0 40px;
 
+			.thumbnail {
+				position: relative;
+				z-index: 2;
+				float: left;
+				margin-right: 35px;
+				max-width: 144px;
+			}
+
 			h1 {
 				color: #FFFFFF;
 				padding-bottom: 20px;
@@ -69,6 +77,13 @@
 				text-align: center;
 				padding-left: 20px;
 				padding-right: 20px;
+				padding-top: 10vh;
+
+				.thumbnail {
+					float: none;
+					margin: 0 auto 20px;
+					max-width: 100px;
+				}
 
 				.sub-views {
 					margin-left: 0;

src/scss/views/_user.scss

@@ -12,12 +12,25 @@
 
 		h1 {
 			padding-top: 80px;
-			padding-bottom: 20px;
 		}
 
 		.actions {
-			float: left;
-			margin-right: 20px;
+			padding-top: 20px;
+		}
+	}
+
+	@include responsive( $bp_medium ){
+		.intro {
+			text-align: center;
+
+			.thumbnail {
+				float: none;
+				margin: 20px auto 20px;
+			}
+
+			h1 {
+				padding-top: 0;
+			}
 		}
 	}
 }