Nicer interface; Standardized subheading

src/js/components/Modal/AddToPlaylistModal.js

@@ -1,7 +1,9 @@
 
 import React, { PropTypes } from 'react'
 import FontAwesome from 'react-fontawesome'
+
 import Icon from '../Icon'
+import Thumbnail from '../Thumbnail'
 import * as helpers from '../../helpers'
 
 export default class AddToPlaylistModal extends React.Component{
@@ -27,15 +29,18 @@ export default class AddToPlaylistModal extends React.Component{
 		return (
 			<div>
 				<h1>Add to playlist</h1>
+				<h2 className="grey-text">Select playlist to add {this.props.tracks_uris.length} track{this.props.tracks_uris.length>1?'s':null} to</h2>
 				<div className="list small playlists">
 					{
 						playlists.map( playlist => {
 							return (
 								<div className="list-item" key={playlist.uri} onClick={ () => this.playlistSelected(playlist.uri) }>
-									<FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} />
-									&nbsp;
-									<span className="name">{ playlist.name }</span>
-									{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }
+									<Thumbnail images={playlist.images} size="small" />
+									<h3 className="name">{ playlist.name }</h3>
+									<ul className="details">
+										<li><FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
+										<li>{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
+									</ul>
 								</div>
 							)
 						})

src/scss/components/_modal.scss

@@ -69,7 +69,7 @@
 
 		.list {
 			@include clearfix();
-			padding-top: 30px;
+			padding-top: 50px;
 
 			.list-item {
 				box-sizing: border-box;
@@ -77,6 +77,8 @@
 				padding: 16px 18px;
 				position: relative;
 				border: 0;
+				border-radius: 3px;
+				padding: 5px;
 
 				.source {
 					position: absolute;
@@ -85,16 +87,24 @@
 				}
 
 				&:hover {
-					background: transparent !important;
-					opacity: 0.75;
+					background: rgba(255,255,255,0.1);
 				}
 			}
 
 			&.playlists {
-				padding-top: 0;
-
 				.list-item {
-					padding-left: 30px;
+					margin: 0 0 20px 0;
+
+					.thumbnail {
+						float: left;
+						margin-right: 20px;
+					}
+
+					.source {
+						position: static;
+						top: auto;
+						left: auto;
+					}
 				}
 			}
 
@@ -259,10 +269,7 @@
 					margin-left: 0 !important;
 					border-top: 0;
 					width: auto !important;
-
-					&:nth-child(1){
-						border-top: 1px solid $mid_grey;
-					}
+					margin: 0;
 				}
 			}
 

src/scss/global/_core.scss

@@ -86,20 +86,20 @@ h1 {
 	@include feature_font();
 	font-weight: 800;
 	font-size: 3rem;
-	line-height: 3rem;
+	line-height: 3.2rem;
 }
 
 h2 {
 	@include feature_font();
 	font-size: 1.8rem;
 	font-weight: 400;
-	line-height: 2rem;
+	line-height: 2.2rem;
 }
 
 h3 {
 	font-weight: 100;
-	font-style: italic;
-	font-size: 20px;
+	font-size: 1.4em;
+	line-height: 1.6em;
 
 	&.bottom-padding {
 		padding-bottom: 30px;