Headers; Search input

src/js/components/Header.js

@@ -44,21 +44,21 @@ export default class Header extends React.Component{
 	}
 
 	render(){
-		if (this.props.search){
+		if (typeof(this.props.search) !== 'undefined'){
 			return (
 				<header className={(this.props.className ? this.props.className : null)}>
 					<Icon name="search" />
 					<SidebarToggleButton />
-					<SearchForm />
+					<SearchForm query={this.props.search} />
 					{this.renderOptions()}
 				</header>
 			)
 		} else {
 			return (
 				<header className={(this.props.className ? this.props.className : null)}>
-					<Icon name={this.props.icon} />
+					{this.props.icon ? <Icon name={this.props.icon} /> : null}
 					<SidebarToggleButton />
-					<h2>{ this.props.title }</h2>
+					<h1>{ this.props.title }</h1>
 					{this.renderOptions()}
 				</header>
 			)

src/js/components/Modal/AddToPlaylistModal.js

@@ -26,7 +26,7 @@ export default class AddToPlaylistModal extends React.Component{
 
 		return (
 			<div>
-				<h4>Add to playlist</h4>
+				<h1>Add to playlist</h1>
 				<div className="list small playlists">
 					{
 						playlists.map( playlist => {

src/js/components/Modal/AddToQueueModal.js

@@ -25,7 +25,7 @@ export default class AddToQueueModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4>Add URI(s) to queue</h4>
+				<h1>Add URI(s) to queue</h1>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
 					<div className="field text">

src/js/components/Modal/AuthorizationModal_Receive.js

@@ -30,8 +30,8 @@ export default class extends React.Component{
 
 		return (
 			<div>
-				<h4 className="no-bottom-padding">Spotify authorization received</h4>
-				<h3 className="grey-text">{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.</h3>
+				<h1>Spotify authorization received</h1>
+				<h2 className="grey-text">{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.</h2>
 				
 				<div className="user-view">
 					<div className="intro">

src/js/components/Modal/AuthorizationModal_Send.js

@@ -32,8 +32,8 @@ class AuthorizationModal_Send extends React.Component{
 
 		return (
 			<div>
-				<h4 className="no-bottom-padding">Share Spotify authentication</h4>
-				<h3 className="grey-text">Send your authentication tokens to another client. When the recipient client imports this, their Iris will have full access to your Spotify account ({this.props.me.id}).</h3>
+				<h1>Share Spotify authentication</h1>
+				<h2 className="grey-text">Send your authentication tokens to another client. When the recipient client imports this, their Iris will have full access to your Spotify account ({this.props.me.id}).</h2>
 				<div className="list small pusher-connection-list">
 					{
 						connections.map( (connection, index) => {

src/js/components/Modal/CreatePlaylistModal.js

@@ -35,7 +35,7 @@ export default class CreatePlaylistModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4>Create playlist</h4>
+				<h1>Create playlist</h1>
 				<form onSubmit={(e) => this.createPlaylist(e)}>
 					<div className="field">
 						<input 

src/js/components/Modal/EditPlaylistModal.js

@@ -34,7 +34,7 @@ export default class EditPlaylistModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4>Edit playlist</h4>
+				<h1>Edit playlist</h1>
 				<form onSubmit={(e) => this.savePlaylist(e)}>
 					<div className="field">
 						<input 

src/js/components/Modal/EditRadioModal.js

@@ -146,7 +146,7 @@ export default class EditRadioModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4>Manage radio</h4>
+				<h1>Manage radio</h1>
 
 				<form>
 					{this.renderSeeds()}

src/js/components/Modal/SearchSettingsModal.js

@@ -49,8 +49,8 @@ export default class SearchSettingsModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4 className="no-bottom-padding">Search sourced</h4>
-				<h3 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h3>
+				<h1 className="no-bottom-padding">Search sources</h1>
+				<h2 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h2>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
 					<div className="list small">

src/js/components/SearchForm.js

@@ -18,6 +18,16 @@ class SearchForm extends React.Component{
 		}
 	}
 
+	componentDidMount(){
+		this.setState({query: this.props.query})
+	}
+
+	componentWillReceiveProps(newProps){
+		if (newProps.query && newProps.query != this.state.query){
+			this.setState({query: newProps.query})
+		}
+	}
+
 	handleSubmit(e){
 		e.preventDefault()
 

src/js/views/Album.js

@@ -128,15 +128,16 @@ class Album extends React.Component{
 				</div>
 
 				<div className="title">
-					<div className="source grey-text">
-						<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />&nbsp;
-						{helpers.uriSource( this.props.params.uri )}&nbsp;
-						{this.props.album.album_type ? this.props.album.album_type : 'album'}
-					</div>
 
 					<h1>{ this.props.album.name }</h1>
 
 					<ul className="details">
+						<li className="has-tooltip">
+							<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
+							<span className="tooltip">
+								{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}
+							</span>
+						</li>
 						{ artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
 						{ this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null }
 						<li>

src/js/views/Playlist.js

@@ -168,19 +168,19 @@ class Playlist extends React.Component{
 					</div>
 
 					<div className="title">
-						<div className="source grey-text">
-							<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist
-						</div>
 						<h1>{ this.props.playlist.name }</h1>
-						{ this.props.playlist.description ? <div className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></div> : null }
+						{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
 
 						<ul className="details">
+							<li className="has-tooltip">
+								<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
+								<span className="tooltip">
+									{helpers.uriSource( this.props.params.uri )} playlist
+								</span>
+							</li>
 							{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
-
 							{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
-
 							{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
-
 							<li>
 								{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,&nbsp;
 								{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : '0 mins' }

src/js/views/Search.js

@@ -23,7 +23,7 @@ import * as spotifyActions from '../services/spotify/actions'
 class Search extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
 	}
 
 	componentDidMount(){
@@ -243,7 +243,7 @@ class Search extends React.Component{
 
 		return (
 			<div className="view search-view">			
-				<Header search options={options} uiActions={this.props.uiActions} />
+				<Header search={(this.props.params && this.props.params.query ? this.props.params.query : null)} options={options} uiActions={this.props.uiActions} />
 				<div className="content-wrapper">
 					{ this.renderResults() }
 				</div>

src/scss/components/_header.scss

@@ -2,18 +2,19 @@
 main {
 	header {
 		box-sizing: border-box;
-		padding: 20px 40px;
+		padding: 40px;
+		margin-bottom: -40px;
 
-		h2 {
+		h1 {
 			display: inline-block;
 		}
 
 		.icon {
 			display: inline-block;
 			padding-right: 14px;
-			height: 2.5rem;
+			height: 3rem;
 			vertical-align: bottom;
-			margin-bottom: 5px;
+			margin-bottom: 10px;
 		}
 
 		.options {

src/scss/components/_modal.scss

@@ -75,19 +75,19 @@
 				box-sizing: border-box;
 				display: block;
 				padding: 16px 18px;
-				border-bottom: 1px solid $mid_grey;
-				border-top: 0;
 				position: relative;
-
-				&:nth-child(1){
-					border-top: 1px solid $mid_grey;
-				}
+				border: 0;
 
 				.source {
 					position: absolute;
 					top: 18px;
 					left: 10px;
 				}
+
+				&:hover {
+					background: transparent !important;
+					opacity: 0.75;
+				}
 			}
 
 			&.playlists {
@@ -102,10 +102,6 @@
 				width: 49%;
 				float: left;
 
-				&:nth-child(2){
-					border-top: 1px solid $mid_grey;
-				}
-
 				&:nth-child(2n){
 					margin-left: 2%;
 				}

src/scss/global/_core.scss

@@ -80,14 +80,16 @@ main {
 
 h1 {
 	@include feature_font();
-	font-weight: 700;
-	font-size: 2.8rem;
+	font-weight: 800;
+	font-size: 4rem;
+	line-height: 4rem;
 }
 
 h2 {
 	@include feature_font();
-	font-size: 2rem;
-	font-weight: 700;
+	font-size: 1.8rem;
+	font-weight: 400;
+	line-height: 2rem;
 }
 
 h3 {

src/scss/views/_album.scss

@@ -4,29 +4,21 @@ main .album-view {
 	position: relative;
 
 	.title {
-		padding-bottom: 30px;
-
-		h3 {
-			color: $mid_grey;
+		h2 {
 			a:hover {
 				color: darken($mid_grey, 20%);
 			}
 		}
-	}
 
-	.source {
-		text-transform: uppercase;
-		padding-bottom: 15px;
+		.details {
+			padding: 25px 0 30px;
+		}
 	}
 
 	.actions {
 		padding-bottom: 30px;
 	}
 
-	.description {
-		padding-bottom: 5px;
-	}
-
 	.thumbnail-wrapper {
 		position: absolute;
 		padding: 40px;

src/scss/views/_playlist.scss

@@ -4,29 +4,21 @@ main .playlist-view {
 	position: relative;
 
 	.title {
-		padding-bottom: 30px;
-
-		h3 {
-			color: $mid_grey;
+		h2 {
 			a:hover {
 				color: darken($mid_grey, 20%);
 			}
 		}
-	}
 
-	.source {
-		text-transform: uppercase;
-		padding-bottom: 15px;
+		.details {
+			padding: 25px 0 30px;
+		}
 	}
 
 	.actions {
 		padding-bottom: 30px;
 	}
 
-	.description {
-		padding-bottom: 5px;
-	}
-
 	.thumbnail-wrapper {
 		position: absolute;
 		padding: 40px;

src/scss/views/_search.scss

@@ -7,8 +7,9 @@
 		input {
 			@include feature_font();
 			padding: 0;
-			font-size: 2rem;
+			font-size: 4rem;
 			font-weight: 700;
+			height: 4rem;
 			background: transparent;
 		}
 	}