Sidebar active state - need to detect active better

src/js/views/Search.js

@@ -183,7 +183,7 @@ class Search extends React.Component{
 						</div>
 
 						<section className="list-wrapper">
-							<h4 className="left-padding"><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
+							<h4><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
 							<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.type+':'+this.props.params.query} show_source_icon />
 							<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>

src/scss/components/_sidebar.scss

@@ -71,14 +71,16 @@ aside{
 		padding-top: 8px;
 
 		a {
-			@include animate();
 			@include feature_font();
+			@include gradient_overlay();
 			font-weight: 800;
 			font-size: 15px;
-			color: $black;
+			color: $darkest_grey;
 			text-decoration: none;
 			display: block;
-			padding: 6px 25px;
+			padding: 8px 10px 6px;
+			margin: 0 15px;
+			border-radius: 3px;
 
 			.icon {
 				height: 14px;
@@ -88,11 +90,16 @@ aside{
 			}
 
 			&.active {
-				color: $turquoise;
+				background: $turquoise;
+				color: $white;
 				opacity: 1 !important;
 
-				.icon {
+				&:before {
+					opacity: 0.15;
+				}
 
+				.icon {
+					@include invert();
 				}
 			}
 
@@ -101,8 +108,10 @@ aside{
 				cursor: not-allowed;
 			}
 
-			&:hover:not([disabled]) {
-				opacity: 0.65;
+			&:hover:not([disabled]){
+				&:before {
+					opacity: 0.15;
+				}
 			}
 		}
 

src/scss/global/_core.scss

@@ -65,11 +65,6 @@ main {
 
 	@include responsive( $bp_medium ){
 
-		section.grid-wrapper,
-		section.text-wrapper {
-			padding: 20px;
-		}
-
 		section.list-wrapper {
 			padding: 10px 0;
 		}

src/scss/global/_forms.scss

@@ -45,6 +45,7 @@ input[type="button"],
 input[type="submit"] {
 	@include animate();
 	@include feature_font();
+	@include gradient_overlay();
 	display: inline-block;
 	padding: 9px 30px 7px;
 	margin: 0 20px 10px 0;
@@ -57,23 +58,6 @@ input[type="submit"] {
 	position: relative;
 	border: 0 !important;
 
-	&:before {
-		@include animate();
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		opacity: 0;
-		z-index: 9;
-		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-	}
-
 	&:hover{
 		cursor: pointer;
 		box-shadow: 1px 2px 6px rgba(0,0,0,0.2);

src/scss/global/_variables.scss

@@ -113,11 +113,6 @@ $bp_shallow: 650px;
     animation-iteration-count: 1;
 }
 
-@mixin blur( $size: 10px ) {
-	-webkit-filter: blur( $size );
-	filter: blur( $size );
-}
-
 @keyframes slideloader {
     0% { left: 0%; right: 100%; }
     50% { left: 0%; right: 0%; }
@@ -179,8 +174,39 @@ $bp_shallow: 650px;
 	}
 }
 
+@mixin blur( $size: 10px ) {
+	-webkit-filter: blur( $size );
+	filter: blur( $size );
+}
+
 @mixin feature_font(){
 	font-family: "Overpass";
 	letter-spacing: -0.04em;
 	font-weight: 600;
 }
+
+@mixin invert(){
+	-webkit-filter: invert(1);
+	filter: invert(1);
+}
+
+@mixin gradient_overlay(){
+	position: relative;
+	
+	&:before {
+		@include animate();
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0;
+		z-index: 9;
+		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+		background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+	}
+}

src/scss/views/_discover.scss

@@ -3,7 +3,7 @@
 	
 	.intro {
 		position: relative;
-		padding: 100px 40px 60px 40px;
+		padding: 160px 40px 80px 40px;
 		z-index: 1;
 
 		.parallax {
@@ -50,6 +50,7 @@
 			position: relative;
 			vertical-align: top;
 			margin: 0 10px 10px 0;
+			border-radius: 3px;
 
 			.type {
 				display: inline-block;

src/scss/views/_search.scss

@@ -2,11 +2,8 @@
 .search-view {
 
 	.search-result-sections {
-		padding: 20px 20px 0;
-
 		section {
 			.inner {
-				padding: 10px 20px 0 20px;
 			}
 		}
 	}