NPM issue with basetag; Basic styles

src/scss/app.scss

@@ -1,4 +1,5 @@
 
+
 @import 'vendor/font-awesome/index';
 
 @import 'global/variables';
@@ -6,8 +7,8 @@
 @import 'global/reset';
 @import 'global/forms';
 
+@import 'components/icon';
 @import 'components/sidebar';
 @import 'components/lists';
-@import 'components/track';
 @import 'components/header';
 

src/scss/components/_icon.scss

@@ -0,0 +1,8 @@
+
+.icon {
+	&.white{
+		-webkit-filter: invert(1);
+		-moz-filter: invert(1);
+		filter: invert(1);
+	}
+}

src/scss/components/_lists.scss

@@ -32,7 +32,7 @@
 	}
 
 	&:not(.header):hover {
-		background: #F4F4F4;
+		background: #EEEEEE;
 		cursor: pointer;
 	}
 

src/scss/components/_sidebar.scss

@@ -7,6 +7,15 @@ aside{
 	bottom: 0;
 	background: #333333;
 	width: 200px;
+	overflow: hidden;
+
+	.thumbnail {
+		position: absolute;
+		top: 0;
+		height: 100%;
+		z-index: -1;
+		opacity: 0.1;
+	}
 
 	nav {
 
@@ -18,6 +27,13 @@ aside{
 			padding: 6px 18px 6px 14px;
 			border-left: 4px solid transparent;
 
+			.icon {
+				height: 14px;
+				padding-right: 8px;
+				vertical-align: top;
+				margin-top: 4px;
+			}
+
 			&.active {
 				border-color: $turquoise;
 				background: rgba( 0,0,0,0.1 );
@@ -44,6 +60,12 @@ aside{
 	}
 
 	.player {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 14px;
+
 		.track-in-focus {
 			font-size: 16px;
 			text-transform: uppercase;
@@ -56,6 +78,7 @@ aside{
 
 			.artist-list {
 				opacity: 0.5;
+				display: block;
 				@include one_line_text
 
 				.artist a {
@@ -69,5 +92,26 @@ aside{
 				}
 			}
 		}
+
+		.controls {
+			text-align: center;
+
+			a {
+				color: #FFFFFF;
+				cursor: pointer;
+				font-size: 14px;
+				padding: 8px;
+				display: inline-block;
+				opacity: 0.8;
+
+				&.active {
+					color: $turquoise;
+				}
+
+				&:hover {
+					opacity: 1.0;
+				}
+			}
+		}
 	}
 }