From 5d0c365943df4ea858eb36b64799b96c6a0808f9 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 16 Jun 2017 20:05:32 +1200
Subject: [PATCH] Experimentation

---
 src/index.html                        |  2 +-
 src/js/components/Sidebar.js          | 22 ++++++++---------
 src/scss/components/_header.scss      |  7 +++---
 src/scss/components/_lists.scss       |  4 +--
 src/scss/components/_search-form.scss |  4 +--
 src/scss/components/_sidebar.scss     | 35 ++++++---------------------
 src/scss/global/_core.scss            | 10 +++++---
 7 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/src/index.html b/src/index.html
index f796b4b4..74a732d8 100755
--- a/src/index.html
+++ b/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:300,300i,400,400i,700" rel="stylesheet">
+	<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Montserrat:500,700" rel="stylesheet">
 	<link href="/iris/app.css" rel="stylesheet" />
 
 	<link rel="manifest" href="/iris/assets/manifest.json">
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 98dc4e4c..73713108 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -32,7 +32,7 @@ class Sidebar extends React.Component{
 
 		        		<section>
 							<Link activeClassName="active" to={global.baseURL+"queue"}>
-								<Icon name="play" className="white" />
+								<Icon name="play" />
 								Now playing
 							</Link>
 						</section>
@@ -40,19 +40,19 @@ class Sidebar extends React.Component{
 						<section>
 							<title>Discover</title>
 							<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
-								<Icon name="compass" className="white" />
+								<Icon name="compass" />
 								Discover
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
-								<Icon name="grid" className="white" />
+								<Icon name="grid" />
 								Genre / Mood
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
-								<Icon name="star" className="white" />
+								<Icon name="star" />
 								Featured playlists
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
-								<Icon name="leaf" className="white" />
+								<Icon name="leaf" />
 								New releases
 							</Link>
 						</section>
@@ -60,30 +60,30 @@ class Sidebar extends React.Component{
 						<section>
 							<title>My Music</title>
 							<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
-								<Icon name="playlist" className="white" />
+								<Icon name="playlist" />
 								Playlists
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
-								<Icon name="mic" className="white" />
+								<Icon name="mic" />
 								Artists
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
-								<Icon name="cd" className="white" />
+								<Icon name="cd" />
 								Albums
 							</Link>
 							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
-								<Icon name="music" className="white" />
+								<Icon name="music" />
 								Tracks
 							</Link>
 							<Link activeClassName="active" to={global.baseURL+"library/local"}>
-								<Icon name="folder" className="white" />
+								<Icon name="folder" />
 								Local
 							</Link>
 						</section>
 
 						<section>
 							<Link activeClassName="active" to={global.baseURL+"settings"}>
-								<Icon name="cog" className="white" />
+								<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>
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index f971187e..fd0237e8 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -2,20 +2,19 @@
 main {
 	header {
 		padding: 14px 20px;
-		background: #EEEEEE;
 		line-height: 24px;
 		box-sizing: border-box;
 
 		h1 {
-			font-size: 22px;
-			font-weight: 100;
 			display: inline-block;
 		}
 
 		.icon {
 			display: inline-block;
 			padding-right: 14px;
-			height: 16px;
+			height: 2.5rem;
+			vertical-align: bottom;
+			margin-bottom: -5px;
 		}
 
 		.options {
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 5f33e6db..f3310904 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -13,8 +13,8 @@
 		display: block;
 		position: relative;
 		padding: 12px 10px 12px 20px;
-		border-top: 1px solid $faint_grey;
-		border-bottom: 1px solid $faint_grey;
+		border-top: 1px solid $light_grey;
+		border-bottom: 1px solid $light_grey;
 		margin-bottom: -1px;
 		cursor: pointer;
 
diff --git a/src/scss/components/_search-form.scss b/src/scss/components/_search-form.scss
index 00be09d5..bb687423 100755
--- a/src/scss/components/_search-form.scss
+++ b/src/scss/components/_search-form.scss
@@ -5,10 +5,10 @@
 
 	input {
 		background: transparent;
-		border-bottom: 1px solid #FFFFFF;
+		border-bottom: 1px solid $light_grey;
 		padding: 16px 0 8px;
 		width: 100%;
-		color: #FFFFFF;
+		color: $black;
 
 		&:focus,
 		&:active {
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 39cee7bd..26ad6bbf 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -5,10 +5,9 @@ aside{
 	left: 0;
 	bottom: 0;
 	z-index: 96;
-	background: $darkest_grey;
 	width: 220px;
 	overflow: hidden;
-	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
+	border-right: 2px solid $light_grey;
 
 	.liner {
 		overflow-y: auto;
@@ -45,25 +44,6 @@ aside{
 			bottom: 60px;
 		}
 	}
-	
-	.thumbnail {
-		position: absolute;
-		top: -30px;
-		right: -30px;
-		bottom: -30px;
-		left: -30px;
-		height: auto;
-		width: auto;
-		max-width: none;
-		z-index: 1;
-		opacity: 0.2;
-
-		.image {
-			@include blur();
-			padding-bottom: 0;
-			height: 100%;
-		}
-	}
 
 	nav {
 		z-index: 2;
@@ -72,10 +52,10 @@ aside{
 
 		a {
 			font-size: 16px;
-			color: #FFFFFF;
+			color: $black;
 			text-decoration: none;
 			display: block;
-			padding: 6px 18px 6px 14px;
+			padding: 6px 18px 6px 6px;
 			border-left: 4px solid transparent;
 
 			.icon {
@@ -86,8 +66,7 @@ aside{
 			}
 
 			&.active {
-				border-color: $turquoise;
-				background: rgba( 0, 0, 0, 0.5 );
+				color: $turquoise;
 			}
 
 			&[disabled] {
@@ -96,7 +75,7 @@ aside{
 			}
 
 			&:hover:not([disabled]) {
-				background: rgba( 255, 255, 255, 0.1 );
+				color: $secondary_grey;
 			}
 		}
 
@@ -105,11 +84,11 @@ aside{
 
 			title {
 				display: block;
-				padding: 0 18px 2px;
+				padding: 0 18px 2px 6px;
 				font-size: 11px;
 				text-transform: uppercase;
 				opacity: 0.5;
-				color: #FFFFFF;
+				color: $mid_grey;
 			}
 		}
 
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 17e78a83..1aeaad83 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -4,7 +4,7 @@ body,
 html {
 	background: $off_white;
 	color: #000000;
-	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
+	font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	touch-action: manipulation;
 }
@@ -88,13 +88,15 @@ main {
 }
 
 h1 {
-	font-weight: 500;
-	font-size: 40px;
+	font-weight: 700;
+	font-size: 3rem;
+	font-family: "Montserrat";
 }
 
 h2 {
+	font-size: 2.5rem;
 	font-weight: 500;
-	font-size: 30px;
+	font-family: "Montserrat";
 }
 
 h3 {