Dropdown styles; Search form outside of Header

src/js/components/Header.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import FontAwesome from 'react-fontawesome'
 
 import Icon from './Icon'
-import SearchForm from './SearchForm'
 import SidebarToggleButton from './SidebarToggleButton'
 import ContextMenuTrigger from './ContextMenuTrigger'
 
@@ -44,24 +43,13 @@ export default class Header extends React.Component{
 	}
 
 	render(){
-		if (typeof(this.props.search) !== 'undefined'){
-			return (
-				<header className={(this.props.className ? this.props.className : null)}>
-					<Icon name="search" />
-					<SidebarToggleButton />
-					<SearchForm query={this.props.search} />
-					{this.renderOptions()}
-				</header>
-			)
-		} else {
-			return (
-				<header className={(this.props.className ? this.props.className : null)}>
-					{this.props.icon ? <Icon name={this.props.icon} /> : null}
-					<SidebarToggleButton />
-					<h1>{ this.props.title }</h1>
-					{this.renderOptions()}
-				</header>
-			)
-		}
+		return (
+			<header className={(this.props.className ? this.props.className : null)}>
+				{this.props.icon ? <Icon name={this.props.icon} /> : null}
+				<SidebarToggleButton />
+				{this.props.title ? <h1>{ this.props.title }</h1> : null}
+				{this.renderOptions()}
+			</header>
+		)
 	}
 }

src/js/components/SearchForm.js

@@ -14,7 +14,8 @@ class SearchForm extends React.Component{
 		super(props);
 
 		this.state = {
-			query: ''
+			query: '',
+			in_focus: false
 		}
 	}
 
@@ -25,7 +26,8 @@ class SearchForm extends React.Component{
 	}
 
 	componentWillReceiveProps(newProps){
-		if (newProps.query && newProps.query != this.state.query){
+		if (newProps.query && newProps.query != this.state.query && newProps.query != this.props.query && !this.state.in_focus){
+			console.log('changing',newProps.query,this.props.query)
 			this.setState({query: newProps.query})
 		}
 	}
@@ -58,12 +60,16 @@ class SearchForm extends React.Component{
 
 	render(){
 		return (
-			<form className={this.props.context+' search-form'} onSubmit={ e => this.handleSubmit(e) }>
-				<input					
-					type="text"
-					placeholder="Start typing..."
-					onChange={ e => this.setState({ query: e.target.value }) } 
-					value={ this.state.query } />
+			<form className="search-form" onSubmit={e => this.handleSubmit(e)}>
+				<label>
+					<input					
+						type="text"
+						placeholder="Search..."
+						onChange={ e => this.setState({ query: e.target.value }) }
+						onFocus={e => this.setState({in_focus: true})}
+						onBlur={e => this.setState({in_focus: false})}
+						value={ this.state.query } />
+					</label>
 			</form>
 		)
 	}

src/js/views/Search.js

@@ -32,6 +32,9 @@ class Search extends React.Component{
 		if (this.props.params && this.props.params.type && this.props.params.query){
 			this.props.uiActions.startSearch(this.props.params.type, this.props.params.query)
 		}
+
+		// Auto-focus on the input field
+		$(document).find('.search-form input').focus();
 	}
 
 	componentWillReceiveProps(newProps){
@@ -243,7 +246,8 @@ class Search extends React.Component{
 
 		return (
 			<div className="view search-view">			
-				<Header search={(this.props.params && this.props.params.query ? this.props.params.query : null)} options={options} uiActions={this.props.uiActions} />
+				<Header icon="search" options={options} uiActions={this.props.uiActions} />
+				<SearchForm query={this.props.params.query} />
 				<div className="content-wrapper">
 					{ this.renderResults() }
 				</div>

src/js/views/library/LibraryAlbums.js

@@ -111,9 +111,9 @@ class LibraryAlbums extends React.Component{
 									</Link>
 									<div className="detail">
 										<Link to={global.baseURL+'album/'+album.uri}>
-											<h3>{ album.name }</h3>
+											<h2>{ album.name }</h2>
 										</Link>
-										<h4><ArtistSentence className="grey-text" artists={album.artists} /></h4>
+										<h3><ArtistSentence className="grey-text" artists={album.artists} /></h3>
 									</div>
 									<div className="list-wrapper">
 										<TrackList tracks={album.tracks} />