diff --git a/src/js/components/DebugInfo.js b/src/js/components/DebugInfo.js
index 607bce7b..d584b1d3 100755
--- a/src/js/components/DebugInfo.js
+++ b/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'}
- 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'}
Users: {this.props.ui.users ? Object.keys(this.props.ui.users).length : '0'}
@@ -90,6 +90,16 @@ class DebugInfo extends React.Component{
Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
+
+ Selected tracks: {this.props.ui.selected_tracks.length}
+ {
+ this.props.ui.selected_tracks.map((track_key, index) => {
+ return (
+
{track_key}
+ )
+ })
+ }
+
{this.renderLoadQueue()}
);
diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js
index 1a569c31..3aeb8619 100755
--- a/src/js/components/Parallax.js
+++ b/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
diff --git a/src/js/views/User.js b/src/js/views/User.js
index de8c3483..b6d2f1a1 100755
--- a/src/js/views/User.js
+++ b/src/js/views/User.js
@@ -77,9 +77,8 @@ class User extends React.Component{
-
+
-
{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }
diff --git a/src/scss/components/_debug.scss b/src/scss/components/_debug.scss
index a6952131..2c7c8c87 100755
--- a/src/scss/components/_debug.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss
index 2167d4b8..410dcbdb 100755
--- a/src/scss/components/_notifications.scss
+++ b/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;
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index c822b1b6..53fc357f 100755
--- a/src/scss/components/_sidebar.scss
+++ b/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 {
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index b6fd003a..04fd8e54 100755
--- a/src/scss/global/_variables.scss
+++ b/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;
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index b2acbf05..1fc4a05b 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -25,7 +25,6 @@
padding: 35vh 40px 0;
h1 {
- color: $white;
padding-bottom: 25px;
font-size: 4rem;
}
diff --git a/src/scss/views/_user.scss b/src/scss/views/_user.scss
index d0e841e8..aad0814b 100755
--- a/src/scss/views/_user.scss
+++ b/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 {