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} />

src/scss/components/_dropdown-field.scss

@@ -1,7 +1,7 @@
 
 .dropdown-field {
 	font-size: 13px;
-	font-weight: 600;
+	font-weight: 800;
 	font-family: "Overpass";
 	position: relative;
 	display: inline-block;
@@ -9,6 +9,10 @@
 	.label {
 		padding: 14px 10px;		
 		cursor: pointer;
+
+		&:hover {
+			color: $blue;
+		}
 	}
 
 	&.expanded {

src/scss/components/_header.scss

@@ -19,8 +19,8 @@ main {
 
 		.options {
 			position: absolute;
-			top: 10px;
-			right: 10px;
+			top: 2.6rem;
+			right: 40px;
 
 			.context-menu-trigger {
 				display: none;
@@ -31,7 +31,7 @@ main {
 			.button,
 			button {
 				font-size: 13px;
-				font-weight: 600;
+				font-weight: 800;
 				font-family: "Overpass";
 				background: transparent;
 				text-transform: none;
@@ -39,6 +39,15 @@ main {
 				margin: 0;
 				min-width: 0;
 				color: $black;
+
+				&:hover {
+					color: $blue;
+					box-shadow: none;
+
+					&:before {
+						display: none;
+					}
+				}
 			}
 		}
 

src/scss/views/_artist.scss

@@ -17,7 +17,7 @@
 		.liner {
 			position: relative;
 			z-index: 1;
-			padding: 20vh 40px 0 260px;
+			padding: 30vh 40px 0 260px;
 
 			.thumbnail {
 				position: absolute;

src/scss/views/_library.scss

@@ -2,7 +2,7 @@
 .library-albums-view {
 	.albums-detail-subview > .album {
 		position: relative;
-		padding-bottom: 40px;
+		padding-bottom: 60px;
 		min-height: 220px;
 
 		.thumbnail {
@@ -11,19 +11,12 @@
 		}
 
 		.detail {
-			padding-left: 220px;
-
-			h3 {
-				padding: 0 0 0 40px;
-			}
-
-			h4{
-				padding: 0 0 10px 40px;
-			}
+			padding-bottom: 20px;
 		}
 
+		.detail,
 		.track-list {			
-			padding-left: 220px;
+			padding-left: 260px;
 		}
 	}
 

src/scss/views/_search.scss

@@ -2,7 +2,9 @@
 .search-view {
 
 	.search-form {
-		display: inline-block;
+		position: absolute;
+		top: 40px;
+		left: 90px;
 
 		input {
 			@include feature_font();
@@ -11,6 +13,12 @@
 			font-weight: 700;
 			height: 3rem;
 			background: transparent;
+			border-bottom: 2px solid transparent;
+
+			&:focus,
+			&:active {
+				border-color: $turquoise;
+			}
 		}
 	}