Softer UI

src/index.html

@@ -14,7 +14,7 @@
 	<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />
 	<link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
 
-	<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Raleway:500,700,900" rel="stylesheet">
+	<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600|Montserrat:400|500|600" rel="stylesheet">
 	<link href="/iris/app.css" rel="stylesheet" />
 
 	<link rel="manifest" href="/iris/assets/manifest.json">

src/js/components/Header.js

@@ -47,7 +47,7 @@ export default class Header extends React.Component{
 			<header className={(this.props.className ? this.props.className : null)}>
 				<Icon name={ this.props.icon } />
 				<SidebarToggleButton />
-				<h1>{ this.props.title }</h1>
+				<h2>{ this.props.title }</h2>
 				{this.renderOptions()}
 			</header>
 		);

src/js/components/Sidebar.js

@@ -21,9 +21,6 @@ class Sidebar extends React.Component{
 	render(){
 		return (
 			<aside>
-					
-				{ this.props.current_track && this.props.current_track.album && this.props.current_track.album.images ? <Thumbnail size="large" images={this.props.current_track.album.images} /> : null }
-
 				<div className="liner">
 
 		        	<SearchForm context="sidebar" />
@@ -32,7 +29,7 @@ class Sidebar extends React.Component{
 
 		        		<section>
 							<Link activeClassName="active" to={global.baseURL+"queue"}>
-								<Icon className="white" name="play" />
+								<Icon name="play" />
 								Now playing
 							</Link>
 						</section>
@@ -40,19 +37,19 @@ class Sidebar extends React.Component{
 						<section>
 							<title>Discover</title>
 							<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
-								<Icon className="white" name="compass" />
+								<Icon name="compass" />
 								Discover
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
-								<Icon className="white" name="grid" />
+								<Icon name="grid" />
 								Genre / Mood
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
-								<Icon className="white" name="star" />
+								<Icon name="star" />
 								Featured playlists
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
-								<Icon className="white" name="leaf" />
+								<Icon name="leaf" />
 								New releases
 							</Link>
 						</section>
@@ -60,30 +57,30 @@ class Sidebar extends React.Component{
 						<section>
 							<title>My Music</title>
 							<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
-								<Icon className="white" name="playlist" />
+								<Icon name="playlist" />
 								Playlists
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
-								<Icon className="white" name="mic" />
+								<Icon name="mic" />
 								Artists
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
-								<Icon className="white" name="cd" />
+								<Icon name="cd" />
 								Albums
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
-								<Icon className="white" name="music" />
+								<Icon name="music" />
 								Tracks
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"library/local"}>
-								<Icon className="white" name="folder" />
+								<Icon name="folder" />
 								Local
 							</Link>
 						</section>
 
 						<section>
 							<Link activeClassName="active" to={global.baseURL+"settings"}>
-								<Icon className="white" name="cog" />
+								<Icon name="cog" />
 								Settings
 								{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
 							</Link>
@@ -94,7 +91,6 @@ class Sidebar extends React.Component{
 			    </div>
 
 		       	<Dropzones />
-
 			</aside>
 		);
 	}
@@ -113,7 +109,6 @@ const mapStateToProps = (state, ownProps) => {
 		pusher_connected: state.pusher.connected,
 		spotify_connected: state.spotify.connected,
 		spotify_authorized: state.spotify.authorized,
-		current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
 		dragger: state.ui.dragger
 	}
 }

src/js/components/VolumeControl.js

@@ -31,8 +31,29 @@ class VolumeControl extends React.Component{
 		this.props.mopidyActions.setVolume( percent )
 	}
 
+	renderMuteButton(){
+		if (this.props.mute){
+			return (
+				<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(false)}>
+					<FontAwesome className="red-text" name="volume-down" />
+					<span className="tooltip">Unmute</span>
+				</a>
+			)
+		} else {
+			return (
+				<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(true)}>
+					<FontAwesome className="muted" name="volume-off" />
+					<span className="tooltip">Mute</span>
+				</a>
+			)
+		}
+	}
+
 	render(){
 		var className = "volume-control"
+		if (this.props.mute){
+			className += " muted"
+		}
 		return (
 			<span className={className}>
 
@@ -41,11 +62,9 @@ class VolumeControl extends React.Component{
 				</a>
 
 				<span className="default">
-					<a className="control" onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
-						{this.props.mute ? <FontAwesome className="muted" name="volume-off" /> : <FontAwesome name="volume-down" />}
-					</a>
+					{this.renderMuteButton()}
 					<div className="slider-wrapper">
-						<div className={this.props.mute ? "slider horizontal disabled" : "slider horizontal"} onClick={ (e) => this.handleClick(e) } >
+						<div className="slider horizontal" onClick={e => this.handleClick(e)}>
 							<div className="track">
 								<div className="progress" style={{ width: this.props.volume+'%' }}></div>
 							</div>

src/js/views/Album.js

@@ -119,7 +119,8 @@ class Album extends React.Component{
 		}
 
 		return (
-			<div className="view album-view">
+			<div className="view album-view content-wrapper">
+
 		        <SidebarToggleButton />
 
 				<Thumbnail size="large" canZoom images={ this.props.album.images } />

src/js/views/Artist.js

@@ -164,7 +164,7 @@ class Artist extends React.Component{
 				return (
 					<div className="body overview">
 						<div className={related_artists.length > 0 ? "col w70" : "col w100"}>
-							<h4 className="left-padding">Top tracks</h4>
+							<h4>Top tracks</h4>
 							<div className="list-wrapper">
 								{ this.props.artist.tracks ? <TrackList className="artist-track-list" uri={this.props.params.uri} tracks={this.props.artist.tracks} /> : null }
 							</div>
@@ -176,7 +176,7 @@ class Artist extends React.Component{
 
 						<div className="cf"></div>
 
-						<h4 className="left-padding">Albums</h4>
+						<h4>Albums</h4>
 						<section className="grid-wrapper no-top-padding">
 							<AlbumGrid albums={albums} />
 							<LazyLoadListener enabled={this.props.artist.albums_more} loadMore={ () => this.loadMore() }/>
@@ -220,7 +220,9 @@ class Artist extends React.Component{
 							{ this.renderSubViewMenu() }
 						</div>
 					</div>
-					{this.renderBody()}
+					<div className="content-wrapper">
+						{this.renderBody()}
+					</div>
 				</div>
 			);
 
@@ -242,7 +244,9 @@ class Artist extends React.Component{
 							{ this.renderSubViewMenu() }
 						</div>
 					</div>
-					{this.renderBody()}
+					<div className="content-wrapper">
+						{this.renderBody()}
+					</div>
 				</div>
 			);
 		}

src/js/views/Debug.js

@@ -54,7 +54,7 @@ class Debug extends React.Component{
 			<div className="view debugger-view">
 				<Header icon="cog" title="Debugger" options={options} uiActions={this.props.uiActions} />
 
-				<section>
+				<div className="content-wrapper">
 
 					<h4 className="underline">User interface</h4>
 					<form>
@@ -190,7 +190,7 @@ class Debug extends React.Component{
 						{ this.props.debug_response ? JSON.stringify(this.props.debug_response, null, 2) : null }
 					</pre>
 					
-		        </section>
+		        </div>
 			</div>
 		);
 	}

src/js/views/Playlist.js

@@ -159,7 +159,7 @@ class Playlist extends React.Component{
 			if (this.props.playlist.can_edit) context = 'editable-playlist'
 
 			return (
-				<div className="view playlist-view">
+				<div className="view playlist-view content-wrapper">
 				
 					<SidebarToggleButton />
 

src/js/views/Queue.js

@@ -112,27 +112,29 @@ class Queue extends React.Component{
 			<div className="view queue-view">			
 				<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
 
-				{ this.renderArtwork() }
-
-				<div className="current-track">
-					<div className="title">
-						{this.props.current_track ? this.props.current_track.name : <span>-</span>}
-					</div>
-					{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
-				</div>
-
-				<section className="list-wrapper">
-					<TrackList
-						show_source_icon={true}
-						context="queue"
-						className="queue-track-list"
-						tracks={this.props.current_tracklist}
-						removeTracks={ tracks => this.removeTracks( tracks ) }
-						playTracks={ tracks => this.playTracks( tracks ) }
-						playTrack={ track => this.playTrack( track ) }
-						reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
-				</section>
+				<div className="content-wrapper">
 				
+					<div className="current-track">
+						{ this.renderArtwork() }
+						<div className="title">
+							{this.props.current_track ? this.props.current_track.name : <span>-</span>}
+						</div>
+						{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
+					</div>
+
+					<section className="list-wrapper">
+						<TrackList
+							show_source_icon={true}
+							context="queue"
+							className="queue-track-list"
+							tracks={this.props.current_tracklist}
+							removeTracks={ tracks => this.removeTracks( tracks ) }
+							playTracks={ tracks => this.playTracks( tracks ) }
+							playTrack={ track => this.playTrack( track ) }
+							reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
+					</section>
+				
+				</div>
 			</div>
 		);
 	}

src/js/views/QueueHistory.js

@@ -50,7 +50,7 @@ class QueueHistory extends React.Component{
 			<div className="view queue-history-view">			
 				<Header icon="play" title="Playback history" options={options} uiActions={this.props.uiActions} />
 
-				<section className="list-wrapper">
+				<section className="content-wrapper list-wrapper">
 					<TrackList
 						className="queue-history-track-list"
 						show_source_icon={true}

src/js/views/Search.js

@@ -235,7 +235,9 @@ class Search extends React.Component{
 		return (
 			<div className="view search-view">			
 				<Header icon="search" title="Search results" options={options} uiActions={this.props.uiActions} />
-				{ this.renderResults() }
+				<div className="content-wrapper">
+					{ this.renderResults() }
+				</div>
 			</div>
 		);
 	}

src/js/views/Settings.js

@@ -180,7 +180,7 @@ class Settings extends React.Component{
 			<div className="view settings-view">
 				<Header icon="cog" title="Settings" options={options} uiActions={this.props.uiActions} />
 
-				<section>
+				<section className="content-wrapper">
 
 					<div className="status">
 					

src/js/views/User.js

@@ -58,29 +58,31 @@ class User extends React.Component{
 				<div className="view user-view">
 				
 					<Header icon="play" title="User" />
+					
+					<div className="content-wrapper">
+						<div className="intro">
+							<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
 
-					<div className="intro">
-						<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
+							<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
 
-						<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
+							<ul className="details">
+								{this.isMe() ? <li>You</li> : null}
+								<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
+								<li>{this.props.user.followers.total.toLocaleString()} followers</li>
+							</ul>
 
-						<ul className="details">
-							{this.isMe() ? <li>You</li> : null}
-							<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
-							<li>{this.props.user.followers.total.toLocaleString()} followers</li>
-						</ul>
-
-						<div className="actions">
-							<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
+							<div className="actions">
+								<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
+							</div>
 						</div>
-					</div>
-					<div className="main">
+						<div className="main">
 
-						<section className="grid-wrapper">
-							<PlaylistGrid playlists={playlists} />
-							<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
-						</section>
-						
+							<section className="grid-wrapper">
+								<PlaylistGrid playlists={playlists} />
+								<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
+							</section>
+							
+						</div>
 					</div>
 				</div>
 			)

src/js/views/discover/DiscoverCategories.js

@@ -43,7 +43,7 @@ class DiscoverCategories extends React.Component{
 		return (
 			<div className="view discover-categories-view">
 				<Header icon="grid" title="Genre / Mood" />
-				<section className="grid-wrapper">
+				<section className="content-wrapper grid-wrapper">
 					<CategoryGrid categories={categories} />
 				</section>
 			</div>

src/js/views/discover/DiscoverCategory.js

@@ -62,10 +62,12 @@ class DiscoverCategory extends React.Component{
 		return (
 			<div className="view discover-categories-view">
 				<Header icon="grid" title={this.props.category.name} />
-				<section className="grid-wrapper">
-					<PlaylistGrid playlists={playlists} />
-				</section>
-				<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
+				<div className="content-wrapper">
+					<section className="grid-wrapper">
+						<PlaylistGrid playlists={playlists} />
+					</section>
+					<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
+				</div>
 			</div>
 		);
 	}

src/js/views/discover/DiscoverFeatured.js

@@ -101,7 +101,7 @@ class DiscoverFeatured extends React.Component{
 			<div className="view discover-featured-view">
 				<Header className="overlay" icon="star" title="Featured playlists" />
 				{this.renderIntro(first_playlist)}
-				<section className="grid-wrapper">
+				<section className="content-wrapper grid-wrapper">
 					{playlists ? <PlaylistGrid playlists={playlists} /> : null }
 				</section>
 			</div>

src/js/views/discover/DiscoverNewReleases.js

@@ -109,7 +109,7 @@ class DiscoverNewReleases extends React.Component{
 			<div className="view discover-new-releases-view">
 				<Header className="overlay" icon="leaf" title="New Releases" />
 				{this.renderIntro(first_album)}
-				<section className="grid-wrapper">
+				<section className="content-wrapper grid-wrapper">
 					<AlbumGrid albums={albums} />
 				</section>
 				<LazyLoadListener enabled={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>

src/js/views/library/LibraryAlbums.js

@@ -82,7 +82,7 @@ class LibraryAlbums extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={albums} 
@@ -93,7 +93,7 @@ class LibraryAlbums extends React.Component{
 			)
 		}else if( this.props.view == 'thumbnails' ){
 			return (
-				<section className="grid-wrapper">
+				<section className="content-wrapper">
 					<AlbumGrid 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						albums={albums} />
@@ -101,7 +101,7 @@ class LibraryAlbums extends React.Component{
 			)
 		}else{
 			return (
-				<section className="grid-wrapper albums-detail-subview">
+				<section className="content-wrapper albums-detail-subview">
 					{
 						albums.map( album => {
 							return (

src/js/views/library/LibraryArtists.js

@@ -69,7 +69,7 @@ class LibraryArtists extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={artists} 
@@ -80,7 +80,7 @@ class LibraryArtists extends React.Component{
 			)
 		}else{
 			return (
-				<section className="grid-wrapper">
+				<section className="content-wrapper">
 					<ArtistGrid 
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						artists={artists} />

src/js/views/library/LibraryLocal.js

@@ -36,7 +36,7 @@ export default class LibraryLocal extends React.Component{
 		return (
 			<div className="view library-local-view">
 				<Header icon="folder" title="Local" />
-				<section className="grid-wrapper">
+				<section className="content-wrapper">
 					<div className="grid category-grid">				
 						{
 							grid_items.map(

src/js/views/library/LibraryLocalAlbums.js

@@ -91,7 +91,7 @@ class LibraryLocalAlbums extends React.Component{
 			]
 
 			return (
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List 
 						columns={columns} 
 						rows={albums} 
@@ -101,7 +101,7 @@ class LibraryLocalAlbums extends React.Component{
 			)
 		}else{
 			return (
-				<section className="grid-wrapper">
+				<section className="content-wrapper">
 					<AlbumGrid albums={albums} />
 				</section>
 			)

src/js/views/library/LibraryLocalArtists.js

@@ -69,7 +69,7 @@ class LibraryLocalArtists extends React.Component{
 		return (
 			<div className="view library-local-view">
 				<Header icon="music" title="Local artists" />
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List 
 						columns={[{ name: 'name', width: '100'}]} 
 						rows={artists} 

src/js/views/library/LibraryLocalDirectory.js

@@ -94,7 +94,7 @@ class LibraryLocalDirectory extends React.Component{
 		return (
 			<div className="view library-local-view">
 				<Header icon="music" title="Local files" options={options} uiActions={this.props.uiActions} />
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List
 						columns={[{ name: 'name', width: '100'}]} 
 						rows={items.folders} 

src/js/views/library/LibraryPlaylists.js

@@ -91,7 +91,7 @@ class LibraryPlaylists extends React.Component{
 				}
 			]
 			return (
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					<List
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						rows={playlists}
@@ -102,7 +102,7 @@ class LibraryPlaylists extends React.Component{
 			)
 		}else{
 			return (
-				<section className="grid-wrapper">
+				<section className="content-wrapper">
 					<PlaylistGrid
 						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
 						playlists={playlists} />

src/js/views/library/LibraryTracks.js

@@ -42,7 +42,7 @@ class LibraryTracks extends React.Component{
 		return (
 			<div className="view library-tracks-view">
 				<Header icon="music" title="My tracks" />
-				<section className="list-wrapper">
+				<section className="content-wrapper">
 					{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
 					<LazyLoadListener enabled={this.props.tracks_more} loadMore={ () => this.loadMore() }/>
 				</section>

src/scss/components/_header.scss

@@ -1,10 +1,10 @@
 
 main {
 	header {
-		padding: 30px 40px;
 		box-sizing: border-box;
+		padding: 20px 40px;
 
-		h1 {
+		h2 {
 			display: inline-block;
 		}
 

src/scss/components/_images.scss

@@ -14,6 +14,7 @@
 		background-color: $light_grey;
 		background-position: 50% 50%;
 		background-size: cover;
+		border-radius: 3px;
 	}
 
 	.zoom {

src/scss/components/_lists.scss

@@ -12,14 +12,16 @@
 
 		display: block;
 		position: relative;
-		padding: 12px 10px 12px 20px;
-		border-top: 1px solid $light_grey;
-		border-bottom: 1px solid $light_grey;
-		margin-bottom: -1px;
+		padding: 12px 10px;
+		margin: 0 -10px -1px -10px;
 		cursor: pointer;
+		border-radius: 3px;
+		border-bottom: 1px solid #FAFAFA;
+		border-top: 1px solid #FAFAFA;
 
 		&.selected {
 			background: $yellow !important;
+			border-color: darken($yellow,10%);
 		}
 
 		&.playing {
@@ -31,6 +33,7 @@
 			top: 0;
 			left: 0;
 			font-size: 10px;
+			display: none;
 
 			.fa {
 				position: absolute;
@@ -73,8 +76,6 @@
 
 	&.track-list {
 		.list-item {
-			padding-left: 40px;
-
 			.col {
 				&.name { 
 					width: 40%;

src/scss/components/_notifications.scss

@@ -2,8 +2,8 @@
 
 .notifications {
 	position: fixed;
-	bottom: 15px;
-	right: 30px;
+	bottom: 55px;
+	right: 15px;
 	z-index: 97;
 	pointer-events: none;
 	width: 300px;

src/scss/components/_playback-controls.scss

@@ -5,18 +5,19 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
-	height: 50px;
+	height: 40px;
 	background: $white;
 	color: $black;
+	border-top: 1px solid $light_grey;
 
 	.current-track {
 		@include animate();
 		cursor: pointer;
 		position: absolute;
-		bottom: 50px;
+		bottom: 41px;
 		width: 220px;
-		font-size: 16px;
-		color: $white;
+		font-size: 14px;
+		color: $black;
 		text-decoration: none;
 
 		.thumbnail {
@@ -25,7 +26,7 @@
 		}
 
 		.title {
-			padding-top: 18px;
+			padding-top: 20px;
 			@include one_line_text;
 		}
 
@@ -42,14 +43,14 @@
 		}
 
 		&:hover {
-			background: rgba(255,255,255,0.1);
+			background: $light_grey;
 		}
 	}
 
 	.control {
 		@include animate();
-		font-size: 16px;
-		color: $dark_grey;
+		font-size: 12px;
+		color: $mid_grey;
 		cursor: pointer;
 		padding: 8px;
 		display: inline-block;
@@ -57,7 +58,7 @@
 
 		&.play {
 			font-size: 24px;
-			margin-top: -4px;
+			margin-top: -6px;
 		}
 
 		&.active {
@@ -65,23 +66,22 @@
 		}
 
 		&:hover {
-			color: $blue;
+			color: $dark_grey;
 		}
 	}
 
 	section {
 		position: absolute;
-		top: 10px;
+		top: 6px;
 
 		&.playback {
 			left: 20px;
-			top: 11px;
 			width: 120px;
 			text-align: center;
 		}
 
 		&.progress {
-			top: 12px;
+			top: 7px;
 			left: 140px;
 			right: 280px;
 			padding-left: 20px;
@@ -96,30 +96,31 @@
 			}
 
 			.current {
+				font-size: 11px;
 				position: absolute;
-				top: 5px;
+				top: 6px;
 				left: 0;
 				width: 45px;
 				text-align: right;
 			}
 
 			.total {
+				font-size: 11px;
 				position: absolute;
-				top: 5px;
+				top: 6px;
 				right: 0;
 				width: 45px;
 			}
 		}
 
 		&.settings {
-			top: 11px;
 			right: 170px;
 			width: 120px;
 			text-align: center;
 		}
 
 		&.volume {
-			top: 12px;
+			top: 7px;
 			right: 20px;
 			width: 150px;
 
@@ -139,6 +140,12 @@
 				right: 0;
 				left: 30px;
 			}
+
+			.muted {
+				.slider .progress {
+					background: $mid_grey;
+				}
+			}
 		}
 	}
 }

src/scss/components/_sidebar.scss

@@ -7,8 +7,8 @@ aside{
 	z-index: 96;
 	width: 220px;
 	overflow: hidden;
-	background: $darkest_grey;
-	color: $white;
+	background: $off_white;
+	color: $darkest_grey;
 
 	.liner {
 		overflow-y: auto;
@@ -69,22 +69,22 @@ aside{
 		z-index: 2;
 		position: relative;
 		padding-top: 8px;
+		font-family: "Overpass";
 
 		a {
-			font-size: 16px;
-			color: $white;
+			font-size: 15px;
+			color: $black;
 			text-decoration: none;
 			display: block;
-			padding: 6px 18px 6px 6px;
+			padding: 4px 18px 4px 14px;
 			border-left: 4px solid transparent;
-			font-family: "Raleway";
-			font-weight: 700;
+			font-weight: 600;
 
 			.icon {
 				height: 14px;
 				padding-right: 8px;
 				vertical-align: top;
-				margin-top: 4px;
+				margin-top: 1px;
 			}
 
 			&.active {
@@ -106,8 +106,8 @@ aside{
 
 			title {
 				display: block;
-				padding: 0 18px 2px 6px;
-				font-size: 11px;
+				padding: 0 18px 2px 14px;
+				font-size: 10px;
 				text-transform: uppercase;
 				opacity: 0.5;
 				color: $mid_grey;

src/scss/components/_slider.scss

@@ -6,12 +6,14 @@
 	.track {
 		position: absolute;
 		background: $light_grey;
+		border-radius: 2px;
 
 		.progress {
 			position: absolute;
 			background: $turquoise;
 			pointer-events: none;
 			left: 0;
+			border-radius: 2px;
 		}
 	}
 

src/scss/global/_core.scss

@@ -2,11 +2,12 @@
 
 body,
 html {
-	background: $off_white;
-	color: $black;
+	background: $white;
+	color: $darkest_grey;
 	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	touch-action: manipulation;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 }
 
 body {
@@ -40,7 +41,10 @@ footer {
 main {
 	position: relative;
 	min-height: 100vh;
-	padding-bottom: 50px;
+
+	.content-wrapper {
+		padding: 40px 40px 50px;
+	}
 
 	a {
 		color: inherit;
@@ -59,15 +63,6 @@ main {
 		white-space: pre-wrap;
 	}
 
-	section.grid-wrapper,
-	section.text-wrapper {
-		padding: 40px;
-	}
-
-	section.list-wrapper {
-		padding: 20px 0;
-	}
-
 	@include responsive( $bp_medium ){
 
 		section.grid-wrapper,
@@ -90,14 +85,14 @@ main {
 
 h1 {
 	font-weight: 700;
-	font-size: 3rem;
-	font-family: "Raleway";
+	font-size: 2.8rem;
+	font-family: "Overpass";
 }
 
 h2 {
-	font-size: 2.5rem;
-	font-weight: 500;
-	font-family: "Raleway";
+	font-size: 2rem;
+	font-weight: 700;
+	font-family: "Overpass";
 }
 
 h3 {
@@ -298,8 +293,8 @@ footer {
 		color: $white;
 		font-size: 11px;
 		line-height: 11px;
-		top: -16px;
-		left: 4px;
+		top: -22px;
+		left: 1px;
 		z-index: 97;
 
 		&::before {

src/scss/global/_forms.scss

@@ -16,8 +16,8 @@ input[type="email"],
 input[type="date"],
 select {
 	padding: 10px 14px;
-	background: #FFFFFF;
-	color: #000000;
+	background: $faint_grey;
+	color: $darkest_grey;
 	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
 	font-size: 14px;
 }

src/scss/views/_artist.scss

@@ -3,7 +3,6 @@
 	.intro {
 		position: relative;
 		@include clearfix();
-		margin-bottom: 40px;
 
 		.parallax {
 			position: absolute;

src/scss/views/_queue.scss

@@ -1,52 +1,43 @@
 
 .queue-view {
 
-	.player {
+	.current-track {
 		text-align: center;
-		padding: 40px 20px 10px;
+		padding-bottom: 40px;
 
-		.artwork,
-		.controls a {
-			border: 0;
-		}
-
-		.artwork,
-		.controls,
-		.progress {
-			display: block;
-			max-width: 400px;
+		.artwork {
+			position: relative;
 			margin: 0 auto;
-		}
 
-		.controls {
-			padding: 20px 0 10px;
-			a {
-				font-size: 18px;
+			.thumbnail {
+				margin: 0 auto;
+			}
+
+			&.radio-enabled {
+				.thumbnail {
+					box-sizing: border-box;
+					padding: 10%;
+				}
+
+				.radio-overlay {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					z-index: 2;
+				}
 			}
 		}
 
-		.thumbnail {
-			max-width: none;
+		.title {
+			font-size: 18px;
+			padding-top: 20px;
 		}
 
-		.current-track {
-			padding: 20px 0 0 0;
-			font-weight: 700;
+		.artist-sentence {
+			display: block;
+			font-size: 18px;
+			opacity: 0.5;
 		}
-
-		.slider {
-			margin-top: 0;
-			.track {
-				background: rgba(0,0,0,0.2);
-			}
-		}
-	}
-
-	.radio {
-		margin: 20px auto 0;
-		padding: 10px 12px;
-		max-width: 400px;
-		background: $faint_grey;
-		box-sizing: border-box;
 	}
 }