Button to .button; Commands setup UI; polishing context menu

src/js/components/Header.js

@@ -1,8 +1,8 @@
 
 import React, { PropTypes } from 'react'
 
-import Icon from './Icon'
-import ContextMenuTrigger from './ContextMenuTrigger'
+import Icon from './Icon';
+import ContextMenuTrigger from './ContextMenuTrigger';
 
 export default class Header extends React.Component{
 

src/js/views/Settings.js

@@ -167,7 +167,7 @@ class Settings extends React.Component {
 				{
 	    			commands.map(command => {
 	    				return (
-	    					<div className="list__item commands-setup__item" key={command.id}>
+	    					<div className="list__item commands-setup__item no-click" key={command.id}>
 	    						<div className="col col--w90">
 	    							<div className="commands__item commands__item--interactive" onClick={e => this.props.pusherActions.sendCommand(command.id, true)}>
 										<Icon className="commands__item__icon" name={command.icon} />

src/js/views/discover/DiscoverCategories.js

@@ -52,7 +52,7 @@ class DiscoverCategories extends React.Component{
 
 		return (
 			<div className="view discover-categories-view">
-				<Header>
+				<Header uiActions={this.props.uiActions}>
 					<Icon name="mood" type="material" />
 					Genre / Mood
 				</Header>

src/js/views/discover/DiscoverCategory.js

@@ -85,7 +85,7 @@ class DiscoverCategory extends React.Component{
 
 		return (
 			<div className="view discover-categories-view">
-				<Header>
+				<Header uiActions={this.props.uiActions}>
 					<Icon name="mood" type="material" />
 					{category.name}
 				</Header>

src/js/views/discover/DiscoverFeatured.js

@@ -77,7 +77,7 @@ class DiscoverFeatured extends React.Component{
 		if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
 			return (
 				<div className="view discover-featured-view">
-					<Header className="overlay">
+					<Header className="overlay" uiActions={this.props.uiActions}>
 						<Icon name="star" type="material" />
 						Featured playlists
 					</Header>
@@ -105,9 +105,9 @@ class DiscoverFeatured extends React.Component{
 		}
 
 		var options = (
-			<button className="no-hover" onClick={e => this.props.spotifyActions.getFeaturedPlaylists()}>
+			<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getFeaturedPlaylists()}}>
 				<Icon name="refresh" />Refresh
-			</button>
+			</a>
 		);
 
 		return (

src/js/views/discover/DiscoverNewReleases.js

@@ -121,14 +121,14 @@ class DiscoverNewReleases extends React.Component{
 		}
 
 		var options = (
-			<button className="no-hover" onClick={e => this.props.spotifyActions.getNewReleases()}>
+			<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getNewReleases()}}>
 				<Icon name="refresh" />Refresh
-			</button>
+			</a>
 		);
 
 		return (
 			<div className="view discover-new-releases-view preserve-3d">
-				<Header className="overlay" options={options}>
+				<Header className="overlay" options={options} uiActions={this.props.uiActions}>
 					<Icon name="new_releases" type="material" />
 					New releases
 				</Header>

src/js/views/library/LibraryBrowse.js

@@ -174,12 +174,12 @@ class LibraryBrowse extends React.Component{
 					options={view_options}
 					handleChange={value => {this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu()}}
 				/>
-				{tracks ? <button className="no-hover" onClick={e => this.playAll(e, tracks)}>
+				{tracks ? <a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
 					<Icon name="play_circle_filled" />Play all
-				</button> : null }
-				<button className="no-hover" onClick={e => this.goBack(e)}>
+				</a> : null }
+				<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
 					<Icon name="keyboard_backspace" />Back
-				</button>
+				</a>
 			</span>
 		);
 
@@ -266,7 +266,7 @@ class LibraryBrowse extends React.Component{
 
 		return (
 			<div className="view library-local-view">
-				<Header>				
+				<Header uiActions={this.props.uiActions}>				
 					<Icon name="folder" type="material" />
 					Browse
 				</Header>

src/js/views/library/LibraryTracks.js

@@ -68,11 +68,9 @@ class LibraryTracks extends React.Component{
 		}
 
 		var options = (
-			<span>
-				<button className="no-hover" onClick={e => this.playAll(e)}>
-					<Icon name="play_circle_filled" />Play all
-				</button>
-			</span>
+			<a className="button button--no-hover" onClick={e => this.playAll(e)}>
+				<Icon name="play_circle_filled" />Play all
+			</a>
 		);
 
 		return (

src/scss/components/_context-menu.scss

@@ -184,12 +184,11 @@
 		}
 
 		&__section {
-			width: 90vw;
-			max-width: 250px;
+			width: 300px;
 			position: absolute;
 			top: 20%;
 			left: 50%;
-			margin-left: -125px;
+			margin-left: -150px;
 			max-height: 80%;
 			overflow: auto;
 
@@ -205,40 +204,37 @@
 				 * The following is for buttons automatically pulled from
 				 * a page header, so we don't have classname control
 				 **/
+				.button,
 				& > span {
 					display: block;
+					text-decoration: none;
+					display: block;
+					margin: 0;
+					width: auto !important;
+					box-sizing: border-box;
+					text-align: left;
+					text-transform: none;
+					font-weight: 700;
+					font-size: 1.2rem;
+					color: colour(white);
+					background: none;
+					transform: none;
+					padding: 16px 22px;
 
-					button,
-					.button,
-					.dropdown-field {
-						text-decoration: none;
-						display: block;
-						margin: 0;
-						width: auto !important;
-						box-sizing: border-box;
-						text-align: left;
-						text-transform: none;
-						font-weight: 700;
-						font-size: 1.2rem;
-						color: colour(white);
-						background: none;
-						transform: none;
-						padding: 16px 22px;
+					.icon {
+						display: none;					
+					}
+				}
 
-						&:before {
-							display: none !important;
-						}
+				.button {
+					&:before {
+						display: none !important;
+					}
 
-						&:focus,
-						&:active {
-							@include noanimate();
-							background: colour(turquoise) !important;
-						}
-
-						.icon,
-						.icon {
-							display: none;
-						}
+					&:focus,
+					&:active {
+						@include noanimate();
+						background: colour(turquoise) !important;
 					}
 				}
 			}
@@ -270,6 +266,15 @@
 			}
 		}
 	}
+
+	@include responsive(340px){
+
+		&__section {
+			width: 90%;
+			left: 5%;
+			margin-left: 0;
+		}
+	}
 }
 
 .context-menu-trigger {

src/scss/components/_dropdown-field.scss

@@ -155,6 +155,7 @@
 			border: 0;
 			box-shadow: none;
 			font-weight: 700;
+			font-size: 1.2rem;
 
 			&:before {
 				display: none !important;

src/scss/components/_filter-field.scss

@@ -45,6 +45,7 @@
 		display: block;
 
 		form {
+			display: block;
 			width: auto;
 			padding: 10px 18px;
 

src/scss/global/_core.scss

@@ -502,12 +502,12 @@ footer {
 	
 	h1 {
 		font-size: 2rem;
-		line-height: 1.8rem;
+		line-height: 2rem;
 	}
 	
 	h2 {
 		font-size: 1.6rem;
-		line-height: 1.5rem;
+		line-height: 1.7rem;
 	}
 	
 	h3 {

src/scss/views/_settings.scss

@@ -37,6 +37,8 @@
 		
 		&__item {
 			position: relative;
+			padding-top: 10px;
+			padding-bottom: 10px;
 
 			.commands__item {
 				float: left;