Context menu cancel. Feels a bit gross, maybe remove context menu trigger

src/js/components/TrackList.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 
 import Track from './Track'
 import ContextMenuTrigger from './ContextMenuTrigger'
@@ -267,6 +268,14 @@ class TrackList extends React.Component{
 		// by default, do nothing
 	}
 
+	unselectAll(e){
+		var tracks = this.props.tracks
+		for (var i = 0; i < tracks.length; i++){
+			tracks[i].selected = false
+		}
+		this.setState({tracks: tracks})
+	}
+
 	renderHeader(){
 		if( this.props.noheader ) return null
 		
@@ -306,6 +315,21 @@ class TrackList extends React.Component{
 		}
 	}
 
+	renderContextButtons(){
+		if (this.selectedTracks().length <= 0){
+			return null
+		} else {
+			return (
+				<div className="context-buttons">
+					<button className="context-menu-trigger unselect-all" onClick={e => this.unselectAll(e)}>
+						<FontAwesome name="close" />
+					</button>
+					<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
+				</div>
+			)
+		}
+	}
+
 	render(){
 		if( !this.state.tracks || Object.prototype.toString.call(this.state.tracks) !== '[object Array]' ) return null
 
@@ -335,7 +359,7 @@ class TrackList extends React.Component{
 						}
 					)
 				}
-				{this.selectedTracks().length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} /> : null}
+				{this.renderContextButtons()}
 			</div>
 		);
 	}

src/scss/components/_context-menu.scss

@@ -262,26 +262,38 @@
 }
 
 .track-list {
-	.context-menu-trigger {	
+
+	.context-buttons {
 		display: none;
 		position: fixed;
 		bottom: 55px;
 		right: 10px;
 		z-index: 97;
-		border-radius: 50%;
-		background: $blue;
-		color: #FFFFFF;
-		width: 50px;
-		height: 50px;
-		overflow: hidden;
-		margin: 0;
 
-		&:hover {
+		.context-menu-trigger {	
+			border-radius: 50%;
 			background: $blue;
+			color: #FFFFFF;
+			width: 40px;
+			height: 40px;
+			overflow: hidden;
+			margin: 0 0 0 5px;
+			display: inline-block;
+			
+			&:focus,
+			&:active {
+				background: darken($blue, 10%);
+			}
 		}
 
-		&:active {
-			background: darken($blue, 10%);
+		.unselect-all {
+			background: $red;
+
+
+			&:focus,
+			&:active {
+				background: darken($red, 10%);
+			}
 		}
 
 		@include responsive( $bp_medium ){