Dropzone and track hover states now via classes rather than :hover, fixes #28

src/js/components/Dropzone.js

@@ -8,14 +8,39 @@ import Icon from './Icon'
 export default class Dropzone extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this.state = {
+			hover: false
+		}
+
+		this.handleMouseOver = this.handleMouseOver.bind(this)
+		this.handleMouseOut = this.handleMouseOut.bind(this)
+	}
+
+	componentWillMount(){
+		window.addEventListener("mouseover", this.handleMouseOver, false);
+		window.addEventListener("mouseout", this.handleMouseOut, false);
+	}
+
+	componentWillUnmount(){
+		window.removeEventListener("mouseover", this.handleMouseOver, false);
+		window.removeEventListener("mouseout", this.handleMouseOut, false);
+	}
+
+	handleMouseOver(e){
+		this.setState({hover: true})
+	}
+
+	handleMouseOut(e){
+		this.setState({hover: false})
 	}
 
 	render(){
 		if( !this.props.data ) return null
 
 		return (
-			<div className="dropzone" onMouseUp={ e => this.props.handleMouseUp(e) }>
+			<div className={this.state.hover?"dropzone hover":"dropzone"} onMouseUp={ e => this.props.handleMouseUp(e) }>
 				<Icon className="white" name={ this.props.data.icon } />
 				<span className="title">{ this.props.data.title }</span>
 			</div>

src/js/components/Track.js

@@ -10,7 +10,11 @@ import * as helpers from '../helpers'
 export default class Track extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this.state = {
+			hover: false
+		}
 	}
 
 	handleMouseDown(e){
@@ -35,11 +39,12 @@ export default class Track extends React.Component{
 	render(){
 		if( !this.props.track ) return null
 
-		var track = this.props.track;
-		var className = 'list-item track';
-		if( typeof(track.selected) !== 'undefined' && track.selected ) className += ' selected';
-		if( typeof(track.type) !== 'undefined' ) className += ' '+track.type;
-		if( track.playing ) className += ' playing';
+		var track = this.props.track
+		var className = 'list-item track'
+		if (typeof(track.selected) !== 'undefined' && track.selected) className += ' selected'
+		if (typeof(track.type) !== 'undefined') className += ' '+track.type
+		if (track.playing) className += ' playing'
+		if (this.state.hover) className += ' hover'
 		
 		var album = '-'
 		if( track.album ){
@@ -133,6 +138,8 @@ export default class Track extends React.Component{
 		return (
 			<div
 				className={className}
+				onMouseEnter={e => this.setState({hover: true})}
+				onMouseLeave={e => this.setState({hover: false})}
 				onTouchStart={ e => this.props.handleTouchStart(e) }
 				onTouchEnd={ e => this.handleTouchEnd(e) }
 				onMouseDown={ e => this.handleMouseDown(e) }

src/scss/components/_dragger.scss

@@ -16,7 +16,7 @@
 	top: 0;
 	z-index: 97;
 	background: $blue;
-	color: #FFFFFF;
+	color: $white;
 	padding: 12px 20px;
 	pointer-events: none;
 }
@@ -28,14 +28,17 @@
 	width: 100%;
 	height: 100%;
 	z-index: 98;
-	background: rgba(25, 25, 25, 0.9);
+	background: $off_white;
 
 	.dropzone {
 		@include animate();
+		@include gradient_overlay(3px,0);
 		margin: 15px;
 		padding: 40px 20px;
-		background: $dark_grey;
-		color: #FFFFFF;
+		background: $darkest_grey;
+		border: 5px solid transparent;
+		border-radius: 3px;
+		color: $white;
 		font-size: 18px;
 		text-align: center;
 
@@ -50,7 +53,11 @@
 		}
 
 		&.hover {
-			background: $turquoise;
+			border-color: $blue;
+
+			&:before {
+				opacity: 0.15;
+			}
 		}
 	}
 }

src/scss/components/_lists.scss

@@ -32,7 +32,7 @@
 			display: none;
 		}
 
-		:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
+		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
 			background: lighten($yellow, 10%);
 			cursor: pointer;
 		}
@@ -79,7 +79,7 @@
 				}
 			}
 
-			:root .dragging &:hover {
+			:root .dragging &.hover {
 				border-top: 3px solid $blue;
 				margin-top: -3px;
 				background: transparent;