From 396aec1a49575b6876ee38e777f8d31cfe445fb3 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 23 Jul 2017 10:15:02 +1200
Subject: [PATCH] Experimenting with colour options

---
 package.json                                | 14 +++++++-------
 src/scss/components/_context-menu.scss      | 12 +++---------
 src/scss/components/_header.scss            |  1 +
 src/scss/components/_images.scss            | 20 ++++++++++++++++++--
 src/scss/components/_lists.scss             | 20 ++++++++++----------
 src/scss/components/_loader.scss            |  4 ++--
 src/scss/components/_playback-controls.scss | 16 ++++++----------
 src/scss/components/_sidebar.scss           | 14 ++++++--------
 src/scss/components/_slider.scss            |  2 +-
 src/scss/global/_core.scss                  |  7 +++----
 src/scss/global/_forms.scss                 |  2 +-
 src/scss/global/_variables.scss             |  6 +++---
 12 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index d0d99530..5b2adaa7 100755
--- a/package.json
+++ b/package.json
@@ -10,11 +10,11 @@
 	},
 	"main": "app.js",
 	"dependencies": {
-		"babel-core": "^6.23.1",
+		"babel-core": "^6.25.0",
 		"babel-loader": "^7.1.1",
 		"babel-preset-es2015": "^6.22.0",
 		"babel-preset-react": "^6.22.0",
-		"babel-preset-stage-0": "^6.22.0",
+		"babel-preset-stage-0": "^6.24.1",
 		"babel-preset-stage-2": "^6.22.0",
 		"css-loader": "0.28.4",
 		"expose-loader": "0.7.3",
@@ -23,7 +23,7 @@
 		"flux": "^3.1.2",
 		"jquery": "3.1.1",
 		"mopidy": "^0.5.0",
-		"node-sass": "4.5.0",
+		"node-sass": "^4.5.0",
 		"react": "15.6.1",
 		"react-dom": "15.6.1",
 		"react-fontawesome": "*",
@@ -33,10 +33,10 @@
 		"redux": "3.7.2",
 		"redux-devtools": "3.4.0",
 		"redux-thunk": "2.2.0",
-		"sass-loader": "6.0.2",
-		"style-loader": "0.13.2",
-		"url-loader": "0.5.8",
-		"webpack": "3.3.0",
+		"sass-loader": "^6.0.2",
+		"style-loader": "^0.13.2",
+		"url-loader": "^0.5.8",
+		"webpack": "^3.3.0",
 		"webpack-strip": "0.1.0"
 	},
 	"scripts": {
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index affd523e..ce783d1f 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -15,7 +15,7 @@
 		width: 160px;
 		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
 		border-radius: 3px;
-		background: $dark_grey;
+		background: $darkest_grey;
 		font-size: 13px;
 		font-weight: 600;
 		font-family: "Overpass";
@@ -236,7 +236,7 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background: $overlay_light;
+			background: $overlay_dark;
 			z-index: 1;
 		}
 
@@ -291,17 +291,11 @@
 		width: 6px;
 		height: 6px;
 		border-radius: 5px;
-		background: $black;
+		background: $white;
 		display: inline-block;
 		margin: 1px;
 	}
 
-	&.white {
-		.dot {
-			background: $white;
-		}
-	}
-
 	&:before {
 		@include animate();
 		content: '';
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index b6d64506..b8402f27 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -10,6 +10,7 @@ main {
 		}
 
 		.icon {
+			@include invert();
 			display: inline-block;
 			padding-right: 14px;
 			height: 2.6rem;
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index e16920c0..0ea00604 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -11,7 +11,7 @@
 		padding-bottom: 100%;
 		position: relative;
 		background-repeat: no-repeat;
-		background-color: $light_grey;
+		background-color: $grey;
 		background-position: 50% 50%;
 		background-size: cover;
 		border-radius: 3px;
@@ -62,9 +62,25 @@
 	height: 50vh;
 	width: 100%;
 	overflow: hidden;
-	background: #111111;
+	background: $darkest_grey;
 	position: relative;
 
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 9;
+		pointer-events: none;
+		background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
+		background: -moz-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
+		background: -o-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
+		background: linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
+	}
+
 	canvas {
 		width: 110%;
 		height: 110%;
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index f0e9686f..c9129da8 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -16,17 +16,16 @@
 		margin: 0 -10px -1px -10px;
 		cursor: pointer;
 		border-radius: 3px;
-		border-bottom: 1px solid #FAFAFA;
-		border-top: 1px solid #FAFAFA;
+		border-bottom: 1px solid rgba(255,255,255,0.05);
+		border-top: 1px solid rgba(255,255,255,0.05);
 
 		&.selected {
-			background: $yellow !important;
-			border-color: darken($yellow,10%);
+			background: rgba(255,255,255,0.08) !important;
 
 			.select-zone {
 				&::after {
-					background: $dark_grey;
-					border-color: $dark_grey;
+					background: $blue;
+					border-color: $blue;
 				}
 			}
 		}
@@ -41,13 +40,13 @@
 		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
-			background: lighten($yellow, 10%);
+			background: rgba(255,255,255,0.03);
 			cursor: pointer;
 		}
 
 		&.header {
 			font-size: 10px;
-			color: #CCCCCC;
+			color: $grey;
 			text-transform: uppercase;
 			border-top: 0;
 			padding-bottom: 2px;
@@ -205,7 +204,7 @@
 		a.artist:hover {
 			.thumbnail {
 				border-color: $turquoise;
-				opacity: 0.8;
+				opacity: 1;
 			}
 		}
 	}
@@ -241,7 +240,7 @@
 				&:after {
 					display: block;
 					content: '';
-					border: 1px solid $darkest_grey;
+					border: 1px solid $mid_grey;
 					border-radius: 50%;
 					width: 14px;
 					height: 14px;
@@ -259,6 +258,7 @@
 				width: 38px;
 				font-size: 14px;
 				display: block;
+				color: $mid_grey;
 				
 				.fa {
 					position: absolute;
diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
index 3fc4e20a..598ab459 100755
--- a/src/scss/components/_loader.scss
+++ b/src/scss/components/_loader.scss
@@ -28,7 +28,7 @@
 			top: 0;
 			left: 0;
 			border: {
-				color: $light_grey;
+				color: $darkest_grey;
 			}
 		}
 		
@@ -37,7 +37,7 @@
 			border-top-color: transparent;
 			border-left-color: transparent;
 			border-bottom-color: transparent;
-			border-right-color: $mid_grey;
+			border-right-color: $blue;
 		}
 	}
 
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index 0529d770..719b874b 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -6,13 +6,8 @@
 	right: 0;
 	left: 0;
 	height: 50px;
-	background: $light_grey;
-	color: $black;
-
-	background: -webkit-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
-	background: -moz-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
-	background: -o-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
-	background: linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
+	background: darken($darkest_grey, 5%);
+	color: $white;
 
 	.current-track {
 		@include animate();
@@ -21,7 +16,7 @@
 		bottom: 50px;
 		width: 220px;
 		font-size: 14px;
-		color: $black;
+		color: $white;
 		text-decoration: none;
 
 		.thumbnail {
@@ -89,11 +84,12 @@
 	.control {
 		@include animate();
 		font-size: 12px;
-		color: $dark_grey;
+		color: $white;
 		cursor: pointer;
 		padding: 8px;
 		display: inline-block;
 		vertical-align: bottom;
+		opacity: 0.8;
 
 		&.play {
 			font-size: 24px;
@@ -105,7 +101,7 @@
 		}
 
 		&:hover {
-			color: $black;
+			opacity: 1;
 		}
 	}
 
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index cebeec08..07b81c9f 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -5,10 +5,11 @@ aside{
 	left: 0;
 	bottom: 0;
 	z-index: 96;
-	width: 220px;
+	width: 219px;
 	overflow: hidden;
-	background: $off_white;
-	color: $darkest_grey;
+	background: darken($dark_grey, 1%);
+	border-right: 1px solid lighten($dark_grey, 5%);
+	color: $white;
 
 	.liner {
 		overflow-y: auto;
@@ -33,7 +34,7 @@ aside{
 			@include gradient_overlay(3px);
 			font-weight: 800;
 			font-size: 15px;
-			color: $darkest_grey;
+			color: $white;
 			text-decoration: none;
 			display: block;
 			padding: 9px 10px 5px;
@@ -42,6 +43,7 @@ aside{
 			line-height: 18px;
 
 			.icon {
+				@include invert();
 				height: 14px;
 				padding-right: 12px;
 				vertical-align: top;
@@ -55,10 +57,6 @@ aside{
 				&:before {
 					opacity: 0.15;
 				}
-
-				.icon {
-					@include invert();
-				}
 			}
 
 			&[disabled] {
diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss
index b6e914d5..9e4bf404 100755
--- a/src/scss/components/_slider.scss
+++ b/src/scss/components/_slider.scss
@@ -5,7 +5,7 @@
 
 	.track {
 		position: absolute;
-		background: darken($light_grey, 6%);
+		background: $dark_grey;
 		border-radius: 2px;
 
 		.progress {
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 80057362..3de7d23a 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -2,8 +2,8 @@
 
 body,
 html {
-	background: $white;
-	color: $darkest_grey;
+	background: $dark_grey;
+	color: $white;
 	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	touch-action: manipulation;
@@ -50,11 +50,10 @@ main {
 	a {
 		color: inherit;
 		text-decoration: none;
-		border-bottom: 1px dotted transparent;
 		cursor: pointer;
 
 		&:hover {
-			border-color: #000000;
+			opacity: 0.7;
 		}
 	}
 
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 932d9bc9..955847a9 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -50,7 +50,7 @@ input[type="submit"] {
 	padding: 9px 30px 7px;
 	margin: 0 20px 10px 0;
 	color: $white;
-	background: $dark_grey;
+	background: $black;
 	font-size: 14px;
 	box-sizing: border-box;
 	border-radius: 3px;
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index f79bbfe3..2f675fa6 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -4,9 +4,9 @@ $off_white: #F5F5F5;
 $faint_grey: #f4f2f0;
 $light_grey: #edeae7;
 $mid_grey: #a3a19f;
-$grey: #888888;
-$dark_grey: #232221;
-$darkest_grey: #1b1a19;
+$grey: #383734;
+$dark_grey: #262728;
+$darkest_grey: #1d1e1f;
 $secondary_grey: #888888;
 $white: #FFFFFF;
 $black: #000000;