Moving current track into play bar for nicer consistency

src/js/components/PlaybackControls.js

@@ -264,10 +264,10 @@ class PlaybackControls extends React.Component{
 				</div>
 
 				<section className="playback">
+					{ this.renderPlayButton() }
 					<button className="control previous" onClick={() => this.props.mopidyActions.previous()}>
 						<Icon name="navigate_before" type="material" />
 					</button>
-					{ this.renderPlayButton() }
 					<button className="control next" onClick={() => this.props.mopidyActions.next()}>
 						<Icon name="navigate_next" type="material" />
 					</button>

src/scss/components/_playback-controls.scss

@@ -5,18 +5,18 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
-	height: 50px;
+	height: 60px;
 	background: colour(white);
 	color: colour(darkest_grey);
 	transform-style: preserve-3d;
+	border-left: 230px solid colour(white);
 
 	.current-track {
 		position: absolute;
-		bottom: 50px;
+		bottom: 0;
 		width: 220px;
+		left: -230px;
 		z-index: 1;
-		font-size: 14px;
-		color: colour(white);
 		text-decoration: none;
 
 		@keyframes slide_left {
@@ -66,8 +66,10 @@
 
 		.thumbnail {
 			float: left;
-			margin: 12px;
 			cursor: pointer;
+			width: 44px;
+			margin: 8px;
+			margin-right: 12px;
 
 			&:before {
 				@include animate();
@@ -112,22 +114,24 @@
 
 		.text {
 			opacity: 1;
-		}
+			line-height: 1.1rem;
+			font-size: 0.9rem;
+			padding-top: 1.05rem;
 
-		.title {
-			padding-top: 20px;
-			@include one_line_text;
-		}
-
-		.artist-sentence {
-			opacity: 0.5;
-			display: block;
-			@include one_line_text;
-
-			.artist {
-				color: inherit;
-				text-decoration: none;
-				border-bottom: 1px dotted transparent;
+			.title {
+				@include one_line_text;
+			}
+	
+			.artist-sentence {
+				opacity: 0.5;
+				display: block;
+				@include one_line_text;
+	
+				.artist {
+					color: inherit;
+					text-decoration: none;
+					border-bottom: 1px dotted transparent;
+				}
 			}
 		}
 	}
@@ -160,15 +164,17 @@
 
 	section {
 		position: absolute;
-		bottom: 5px;
+		bottom: 10px;
 
 		&.playback {
-			bottom: 2px;
+			bottom: 7px;
 			left: 0;
-			width: 220px;
-			text-align: center;
+			width: 10rem;
 
 			.control {
+				padding-left: 4px;
+				padding-right: 4px;
+
 				.icon {
 					font-size: 1.3rem;
 				}
@@ -185,8 +191,8 @@
 		}
 
 		&.progress {
-			bottom: 8px;
-			left: 220px;
+			bottom: 13px;
+			left: 10rem;
 			right: 25rem;
 			padding-left: 20px;
 			padding-right: 20px;
@@ -242,10 +248,10 @@
 	}
 
 	@include responsive($bp_medium){
+		border-left: none;
 
 		.current-track {
 			width: auto;
-			bottom: auto;
 			bottom: 0.65rem;
 			left: 80px;
 			right: 80px;
@@ -253,6 +259,7 @@
 			font-size: 0.9rem;
 			line-height: 1.2em;
 			color: colour(darkest_grey) !important;
+			margin: auto;
 
 			.title,
 			.artist {
@@ -272,11 +279,7 @@
 
 				.control {
 					&.play {
-						margin-bottom: -8px;
-
-						.icon {
-							font-size: 2.6rem;
-						}
+						margin-bottom: -1rem;
 					}
 
 					&.previous,
@@ -330,7 +333,7 @@
 		}
 
 		&--expanded {
-			height: 135px;
+			height: 140px;
 			max-height: 100%;
 
 			section {
@@ -369,11 +372,6 @@
 		}
 
 		@include resolution(2){
-			height: 56px;
-
-			&--expanded {
-				height: 142px;
-			}
 
 			.control {
 				padding: 14px 8px;

src/scss/components/_sidebar.scss

@@ -24,7 +24,6 @@
 		top: 0;
 		left: 0;
 		right: 0;
-		bottom: 120px;
 		box-sizing: border-box;
 		z-index: 2;
 		overflow-y: auto;

src/scss/global/_core.scss

@@ -83,7 +83,7 @@ main {
 	position: fixed;
 	top: 0;
 	left: 220px;
-	bottom: 50px;
+	bottom: 60px;
 	right: 0;
 	perspective: 1000px;
 	perspective-origin: top;