User and parallax; Debug track selecting

src/js/components/DebugInfo.js

@@ -66,7 +66,7 @@ class DebugInfo extends React.Component{
 					Playlists: {this.props.ui.playlists ? Object.keys(this.props.ui.playlists).length : '0'}
 				</div>
 				<div className="item">
-					Tracks: {this.props.ui.tracks ? Object.keys(this.props.ui.tracks).length : '0'} ({this.props.ui.selected_tracks.length} selected)
+					Tracks: {this.props.ui.tracks ? Object.keys(this.props.ui.tracks).length : '0'}
 				</div>
 				<div className="item">
 					Users: {this.props.ui.users ? Object.keys(this.props.ui.users).length : '0'}
@@ -90,6 +90,16 @@ class DebugInfo extends React.Component{
 				<div className="item">
 					Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
 				</div>
+				<div className="item">
+					Selected tracks: {this.props.ui.selected_tracks.length}<br />
+					{
+						this.props.ui.selected_tracks.map((track_key, index) => {
+							return (
+								<div key={track_key+'_'+index}>{track_key}</div>
+							)
+						})
+					}
+				</div>
 				{this.renderLoadQueue()}
 			</div>
 		);

src/js/components/Parallax.js

@@ -114,7 +114,6 @@ export default class Parallax extends React.Component{
 	}
 
 	updateCanvas(image = false){
-		console.log(image)
 		var canvasWidth = $('.parallax').outerWidth();
 		var canvasHeight = $('.parallax').outerHeight();
 		if (this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight){
@@ -133,10 +132,10 @@ export default class Parallax extends React.Component{
 		var canvasDOM = document.getElementById('parallax-canvas')
 		var context = canvasDOM.getContext('2d')
 
-		// Fill the background with mid-gret
+		// Fill the background with mid-grey
 		context.beginPath()
 		context.rect(0, 0, this.state.canvas.width, this.state.canvas.height)
-		context.fillStyle = "#a3a19f"
+		context.fillStyle = "#121212"
 		context.fill()
 
 		if (image){
@@ -172,8 +171,8 @@ export default class Parallax extends React.Component{
 		// Construct a gradient overlay
 		context.rect(0, 0, this.state.canvas.width, this.state.canvas.height)
 		let gradient = context.createLinearGradient(0, 0, 0, this.state.canvas.height)
-		gradient.addColorStop(0, 'rgba(38,39,40,0)')
-		gradient.addColorStop(0.9, 'rgba(38,39,40,1)')
+		gradient.addColorStop(0, 'rgba(24,24,24,0)')
+		gradient.addColorStop(0.9, 'rgba(24,24,24,1)')
 		context.fillStyle = gradient
 
 		// And now drop it into place

src/js/views/User.js

@@ -77,9 +77,8 @@ class User extends React.Component{
 				<SidebarToggleButton />
 
 				<div className="intro">
-					<Parallax blur image={image} />
+					<Parallax image={image} />
 					<div className="liner">
-						<Thumbnail image={image} canZoom circle />
 						<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
 						<h2>
 							<ul className="details">

src/scss/components/_debug.scss

@@ -3,12 +3,13 @@
 	font-size: 10px;
 	position: fixed;
 	top: 10px;
-	right: 10px;
+	right: 1vw;
 	border-radius: 3px;
 	z-index: 96;
 	padding: 10px;
-	background: rgba(10, 10, 10, 0.7);
+	background: rgba(100,100,100, 0.8);
 	color: $white;
 	pointer-events: none;
-	width: 200px;
+	width: 220px;
+	max-width: 98vw;
 }

src/scss/components/_notifications.scss

@@ -12,7 +12,7 @@
 		@include fadein();
 		display: block;
 		position: relative;
-		background: $darkest_grey;
+		background: $blue;
 		padding: 16px 40px 16px 22px;
 		margin: 10px 0 0 0;
 		color: $white;
@@ -70,7 +70,7 @@
 				display: block;
 				content: '';
 				background: $white;
-				opacity: 0.1;
+				opacity: 0.15;
 			    animation: slideloader 1s infinite;
 				top: 0;
 				right: 0;

src/scss/components/_sidebar.scss

@@ -7,8 +7,8 @@ aside{
 	z-index: 96;
 	width: 219px;
 	overflow: hidden;
-	background: darken($dark_grey, 1%);
-	border-right: 1px solid lighten($dark_grey, 5%);
+	background: $darkest_grey;
+	border-right: 1px solid lighten($dark_grey, 2%);
 	color: $white;
 
 	.liner {

src/scss/global/_variables.scss

@@ -5,8 +5,8 @@ $faint_grey: #f4f2f0;
 $light_grey: #cecac4;
 $mid_grey: #a3a19f;
 $grey: #383734;
-$dark_grey: #262728;
-$darkest_grey: #171819;
+$dark_grey: #181818;
+$darkest_grey: #121212;
 $secondary_grey: #888888;
 $white: #FFFFFF;
 $black: #000000;

src/scss/views/_artist.scss

@@ -25,7 +25,6 @@
 			padding: 35vh 40px 0;
 
 			h1 {
-				color: $white;
 				padding-bottom: 25px;
 				font-size: 4rem;
 			}

src/scss/views/_user.scss

@@ -17,22 +17,11 @@
 		.liner {
 			position: relative;
 			z-index: 1;
-			padding: 30vh 40px 90px 350px;
-
-			.thumbnail {
-				position: absolute;
-				z-index: 2;
-				left: 40px;
-				bottom: 40px;
-				max-width: 264px;
-
-				.image {
-					background-color: $darkest_grey;
-				}
-			}
+			padding: 35vh 40px 0;
 
 			h1 {
-				color: $white;
+				padding-bottom: 15px;
+				font-size: 4rem;
 			}
 
 			h2 {