Updating edit radio modal; Cleaner loading spinner; Buttons in header

src/js/components/Modal/EditRadioModal.js

@@ -120,7 +120,7 @@ export default class EditRadioModal extends React.Component{
 									<div className="list-item" key={seed.uri}>
 										{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
 										<span className="grey-text">&nbsp;({seed.type})</span>
-										<button className="discrete remove-uri"  onClick={e => this.removeSeed(seed.uri)}>
+										<button className="discrete remove-uri no-hover"  onClick={e => this.removeSeed(seed.uri)}>
 											<FontAwesome name="close" />&nbsp;Remove
 										</button>
 									</div>
@@ -151,18 +151,20 @@ export default class EditRadioModal extends React.Component{
 				<form>
 					{this.renderSeeds()}
 
-					<div className="field">
+					<div className="field text">
+						<span className="label">URI(s)</span>
 						<input 
 							type="text"
-							placeholder="Comma-separated URIs"
 							onChange={e => this.setState({uri: e.target.value, error_message: null})} 
 							value={this.state.uri} />
-						<button className="discrete add-uri" onClick={e => this.addSeed()}>
+						<button className="discrete add-uri no-hover" onClick={e => this.addSeed()}>
 							<FontAwesome name="plus" />&nbsp; Add
 						</button>
 						{this.state.error_message ? <span className="error">{this.state.error_message}</span> : null}
 					</div>
+				</form>
 
+				<form>
 					<div className="actions centered-text">
 						{this.state.enabled ? <button className="destructive wide" onClick={e => this.handleStop(e)}>Stop</button> : null}
 						{this.state.enabled ? <button className="primary wide" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary wide" onClick={e => this.handleStart(e)}>Start</button>}

src/js/views/Queue.js

@@ -88,20 +88,20 @@ class Queue extends React.Component{
 	render(){
 		var options = (
 			<span>
-				<button onClick={e => this.props.uiActions.openModal('edit_radio')}>
+				<button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
 					<FontAwesome name="podcast" />&nbsp;
 					Radio
 					{this.props.radio && this.props.radio.enabled ? <span className="flag blue">On</span> : null}
 				</button>
-				<button onClick={e => hashHistory.push(global.baseURL+'queue/history')}>
+				<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'queue/history')}>
 					<FontAwesome name="history" />&nbsp;
 					History
 				</button>
-				<button onClick={e => this.props.mopidyActions.clearTracklist()}>
+				<button className="no-hover" onClick={e => this.props.mopidyActions.clearTracklist()}>
 					<FontAwesome name="trash" />&nbsp;
 					Clear
 				</button>
-				<button onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
+				<button className="no-hover" onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
 					<FontAwesome name="plus" />&nbsp;
 					Add URI
 				</button>

src/js/views/User.js

@@ -89,7 +89,7 @@ class User extends React.Component{
 							</ul>
 						</h2>
 						<div className="actions">
-							<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
+							<FollowButton className="primary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
 						</div>
 					</div>
 				</div>

src/js/views/library/LibraryPlaylists.js

@@ -187,7 +187,7 @@ class LibraryPlaylists extends React.Component{
 				<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_playlists_filter: val}); this.props.uiActions.hideContextMenu() }} />
 				<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
 				<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_playlists_view: val}); this.props.uiActions.hideContextMenu() }} />
-				<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
+				<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
 					<FontAwesome name="plus" />&nbsp;
 					New
 				</button>

src/scss/components/_dropdown-field.scss

@@ -7,6 +7,7 @@
 	display: inline-block;
 
 	.label {
+		@include animate();
 		padding: 14px 10px;		
 		cursor: pointer;
 

src/scss/components/_loader.scss

@@ -1,22 +1,52 @@
 
 .body-loader {
-	padding: 50px 0;
+	padding: 35vh 0;
 
 	.loader {
-		@include spin();
+		height: 120px;
+		width: 120px;
 		margin: 0 auto;
-		width: 30px;
-		height: 30px;
-		border: {
-			radius: 100%;
-			style: solid;
-			color: $mid_grey;
-			width: 2px;
+		position: relative;
+
+		&:before,
+		&:after {
+			content: '';
+			display: block;
+			margin: 0 auto;
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			border: {
+				radius: 100%;
+				style: solid;
+				width: 2px;
+			}
+		}
+
+		&:before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			border: {
+				color: $light_grey;
+			}
+		}
+		
+		&:after {
+			@include spin();
+			border-top-color: transparent;
+			border-left-color: transparent;
+			border-bottom-color: transparent;
+			border-right-color: $mid_grey;
 		}
-		border-top-color: transparent;
 	}
 
 	&.lazy-loader {
 		padding: 20px 0 40px;
+
+		.loader {			
+			height: 40px;
+			width: 40px;
+		}
 	}
 }

src/scss/components/_modal.scss

@@ -98,13 +98,15 @@
 			@include clearfix();
 
 			.list-item {
+				@include animate();
 				box-sizing: border-box;
 				display: block;
-				padding: 16px 18px;
+				padding: 14px 12px;
 				position: relative;
 				border: 0;
 				border-radius: 3px;
-				padding: 5px;
+				margin-left: -12px;
+				margin-right: -12px;
 
 				.source {
 					position: absolute;
@@ -118,8 +120,11 @@
 			}
 
 			&.playlists {
+				padding-top: 40px;
+
 				.list-item {
 					margin: 0 0 20px 0;
+					padding: 5px;
 
 					.thumbnail {
 						float: left;
@@ -173,12 +178,25 @@
 		button.add-uri,
 		button.remove-uri {
 			position: absolute;
-			top: 3px;
+			top: 5px;
 			right: 0;
-			padding: 14px;
+			padding: 8px;
 			margin: 0;
 			min-width: 0;
 			color: #FFFFFF;
+			background: transparent;
+
+			&:before {
+				display: none !important;
+			}
+
+			&:hover {
+				color: $turquoise;
+
+				&.remove-uri {
+					color: $red;
+				}
+			}
 		}
 	}
 

src/scss/global/_forms.scss

@@ -59,7 +59,7 @@ input[type="submit"] {
 	border: 0 !important;
 	cursor: pointer;
 
-	.notouch &:hover{
+	.notouch &:not(.no-hover):hover {
 		box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
 
 		&:before {