diff --git a/src/js/components/Header.js b/src/js/components/Header.js index 5f4c2dec..83178401 100755 --- a/src/js/components/Header.js +++ b/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 (
- + {this.renderOptions()}
) } else { return (
- + {this.props.icon ? : null} -

{ this.props.title }

+

{ this.props.title }

{this.renderOptions()}
) diff --git a/src/js/components/Modal/AddToPlaylistModal.js b/src/js/components/Modal/AddToPlaylistModal.js index 0eb131a2..76fef06d 100755 --- a/src/js/components/Modal/AddToPlaylistModal.js +++ b/src/js/components/Modal/AddToPlaylistModal.js @@ -26,7 +26,7 @@ export default class AddToPlaylistModal extends React.Component{ return (
-

Add to playlist

+

Add to playlist

{ playlists.map( playlist => { diff --git a/src/js/components/Modal/AddToQueueModal.js b/src/js/components/Modal/AddToQueueModal.js index 2bf88b1e..94bf33ed 100755 --- a/src/js/components/Modal/AddToQueueModal.js +++ b/src/js/components/Modal/AddToQueueModal.js @@ -25,7 +25,7 @@ export default class AddToQueueModal extends React.Component{ render(){ return (
-

Add URI(s) to queue

+

Add URI(s) to queue

this.handleSubmit(e)}>
diff --git a/src/js/components/Modal/AuthorizationModal_Receive.js b/src/js/components/Modal/AuthorizationModal_Receive.js index 9d5b3554..1d077dcb 100755 --- a/src/js/components/Modal/AuthorizationModal_Receive.js +++ b/src/js/components/Modal/AuthorizationModal_Receive.js @@ -30,8 +30,8 @@ export default class extends React.Component{ return (
-

Spotify authorization received

-

{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.

+

Spotify authorization received

+

{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.

diff --git a/src/js/components/Modal/AuthorizationModal_Send.js b/src/js/components/Modal/AuthorizationModal_Send.js index cf1ddfc7..173c5219 100755 --- a/src/js/components/Modal/AuthorizationModal_Send.js +++ b/src/js/components/Modal/AuthorizationModal_Send.js @@ -32,8 +32,8 @@ class AuthorizationModal_Send extends React.Component{ return (
-

Share Spotify authentication

-

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}).

+

Share Spotify authentication

+

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}).

{ connections.map( (connection, index) => { diff --git a/src/js/components/Modal/CreatePlaylistModal.js b/src/js/components/Modal/CreatePlaylistModal.js index bf009fe0..0d72408a 100755 --- a/src/js/components/Modal/CreatePlaylistModal.js +++ b/src/js/components/Modal/CreatePlaylistModal.js @@ -35,7 +35,7 @@ export default class CreatePlaylistModal extends React.Component{ render(){ return (
-

Create playlist

+

Create playlist

this.createPlaylist(e)}>
-

Edit playlist

+

Edit playlist

this.savePlaylist(e)}>
-

Manage radio

+

Manage radio

{this.renderSeeds()} diff --git a/src/js/components/Modal/SearchSettingsModal.js b/src/js/components/Modal/SearchSettingsModal.js index 1319ffa9..335be76c 100755 --- a/src/js/components/Modal/SearchSettingsModal.js +++ b/src/js/components/Modal/SearchSettingsModal.js @@ -49,8 +49,8 @@ export default class SearchSettingsModal extends React.Component{ render(){ return (
-

Search sourced

-

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.

+

Search sources

+

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.

this.handleSubmit(e)}>
diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js index 54502a54..446c0bdb 100755 --- a/src/js/components/SearchForm.js +++ b/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() diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 24f71931..e3738c51 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -128,15 +128,16 @@ class Album extends React.Component{
-
-   - {helpers.uriSource( this.props.params.uri )}  - {this.props.album.album_type ? this.props.album.album_type : 'album'} -

{ this.props.album.name }

    +
  • + + + {helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'} + +
  • { artists.length > 0 ?
  • : null } { this.props.album.release_date ?
  • : null }
  • diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index af431cac..3f6fb33e 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -168,19 +168,19 @@ class Playlist extends React.Component{
-
- {helpers.uriSource( this.props.params.uri )} playlist -

{ this.props.playlist.name }

- { this.props.playlist.description ?
: null } + { this.props.playlist.description ?

: null }
    +
  • + + + {helpers.uriSource( this.props.params.uri )} playlist + +
  • { this.props.playlist.owner ?
  • {this.props.playlist.owner.id}
  • : null } - { this.props.playlist.followers ?
  • {this.props.playlist.followers.total.toLocaleString()} followers
  • : null } - { this.props.playlist.last_modified ?
  • : null } -
  • { this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,  { this.props.playlist.tracks ? : '0 mins' } diff --git a/src/js/views/Search.js b/src/js/views/Search.js index b0f55d73..a1c03f4a 100755 --- a/src/js/views/Search.js +++ b/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 (
    -
    +
    { this.renderResults() }
    diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index b1a7d3ed..a0cfb01e 100755 --- a/src/scss/components/_header.scss +++ b/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 { diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 5cef8446..54cada1a 100755 --- a/src/scss/components/_modal.scss +++ b/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%; } diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 819ddf44..8f8baf9b 100755 --- a/src/scss/global/_core.scss +++ b/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 { diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss index 1fae642c..fa3d6345 100755 --- a/src/scss/views/_album.scss +++ b/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; diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss index da21a624..b99cd7bf 100755 --- a/src/scss/views/_playlist.scss +++ b/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; diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss index d35a6cfc..20a33f52 100755 --- a/src/scss/views/_search.scss +++ b/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; } }