Form styling; Slider

src/js/components/ArtistSentence.js

@@ -22,8 +22,8 @@ export default class ArtistSentence extends React.Component{
 						}
 						var link = '/artist/' + artist.uri;
 						return (
-							<span className="artist" key={artist.uri}>
-								<Link to={ link }>{ artist.name }</Link>{ separator }
+							<span key={artist.uri}>
+								<Link className="artist" to={ link }>{ artist.name }</Link>{ separator }
 							</span>
 						);
 					})

src/js/components/PlaylistListItem.js

@@ -15,7 +15,7 @@ export default class PlaylistListItem extends React.Component{
 	renderOwner(){
 		if( !this.props.item.owner ) return null;
 		return (			
-			<Link to={ '/user/'+this.props.item.owner.uri }>
+			<Link to={ '/user/'+this.props.item.owner.id }>
 				{ this.props.item.owner.id }
 			</Link>
 		);

src/js/components/SpotifyAuthenticationFrame.js

@@ -68,6 +68,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 			return (
 				<button disabled>
 					<FontAwesome name="circle-o-notch" spin />
+					&nbsp;
 					Authorizing...
 				</button>
 			);
@@ -92,6 +93,7 @@ class SpotifyAuthenticationFrame extends React.Component{
 			return (
 				<button disabled>
 					<FontAwesome name="circle-o-notch" spin />
+					&nbsp;
 					Refreshing...
 				</button>
 			);

src/js/components/VolumeSlider.js

@@ -15,21 +15,24 @@ export default class VolumeSlider extends React.Component{
 		this.setState({ volume: nextProps.volume })
 	}
 
-	handleChange(e){
-		var newVolume = parseInt(e.target.value);
-		if( this.props.volume != newVolume ){
-			this.props.onChange( newVolume )
+	handleClick(e){
+		var slider = e.target;
+		if( slider.className != 'slider' ) slider = slider.parentElement;
+
+		var sliderX = e.clientX - slider.getBoundingClientRect().left;
+		var sliderWidth = slider.getBoundingClientRect().width;
+		var percent = parseInt( sliderX / sliderWidth * 100 );
+		
+		if( this.props.volume != percent ){
+			this.props.onChange( percent )
 		}
-	}
+	} 
 
 	render(){
 		return (
-			<input
-				type="range"
-				value={this.props.volume}
-				min="0"
-				max="100"
-				onChange={ (e) => this.handleChange(e) } />
+			<div className="slider" onClick={ (e) => this.handleClick(e) } >
+				<div className="progress" style={{ width: this.props.volume+'%' }}></div>
+			</div>
 		);
 	}
 }

src/js/views/Settings.js

@@ -52,11 +52,17 @@ class Settings extends React.Component{
 					<form onSubmit={() => this.setMopidyConfig()}>
 						<label>
 							<span className="label">Host</span>
-							<input onChange={ e => this.setState({ mopidy_host: e.target.value })} value={ this.state.mopidy_host } />
+							<input 
+								type="text"
+								onChange={ e => this.setState({ mopidy_host: e.target.value })} 
+								value={ this.state.mopidy_host } />
 						</label>
 						<label>
 							<span className="label">Port</span>
-							<input onChange={ e => this.setState({ mopidy_port: e.target.value })} value={ this.state.mopidy_port } />
+							<input 
+								type="text"
+								onChange={ e => this.setState({ mopidy_port: e.target.value })} 
+								value={ this.state.mopidy_port } />
 						</label>
 						<button type="submit">Apply</button>
 					</form>
@@ -65,11 +71,17 @@ class Settings extends React.Component{
 					<form onSubmit={() => this.setSpotifyConfig()}>
 						<label>
 							<span className="label">Country</span>
-							<input onChange={ e => this.setState({ spotify_country: e.target.value })} value={ this.state.spotify_country } />
+							<input 
+								type="text"
+								onChange={ e => this.setState({ spotify_country: e.target.value })} 
+								value={ this.state.spotify_country } />
 						</label>
 						<label>
 							<span className="label">Locale</span>
-							<input onChange={ e => this.setState({ spotify_locale: e.target.value })} value={ this.state.spotify_locale } />
+							<input 
+								type="text"
+								onChange={ e => this.setState({ spotify_locale: e.target.value })} 
+								value={ this.state.spotify_locale } />
 						</label>
 						<button type="submit">Apply</button>
 					</form>

src/js/views/discover/DiscoverFeatured.js

@@ -23,7 +23,7 @@ class DiscoverFeatured extends React.Component{
 		return (
 			<div className="view discover-featured-view">
 				<Header icon="star" title="Featured playlists" />
-				{ this.props.spotify.featuredPlaylists ? <PlaylistGrid playlists={this.props.spotify.featuredPlaylists.playlists.items} /> : null }
+				{ this.props.spotify.featured_playlists ? <PlaylistGrid playlists={this.props.spotify.featured_playlists.playlists.items} /> : null }
 			</div>
 		);
 	}

src/scss/components/_sidebar.scss

@@ -92,7 +92,7 @@ aside{
 				display: block;
 				@include one_line_text;
 
-				.artist a {
+				.artist {
 					color: inherit;
 					text-decoration: none;
 					border-bottom: 1px dotted transparent;

src/scss/global/_core.scss

@@ -45,6 +45,10 @@ main {
 			padding-bottom: 4px;
 			border-bottom: 1px solid #000000;
 		}
+
+		&:not(:first-child){
+			padding-top: 40px;
+		}
 	}
 
 	.no-top-padding {		padding-top: 0; }

src/scss/global/_forms.scss

@@ -1,14 +1,87 @@
 
-input {
-	padding: 5px 8px;
-	border: 1px solid #000000;
+button,
+textarea,
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="email"],
+input[type="date"] {
+	padding: 10px 14px;
+	background: #FFFFFF;
+	color: #000000;
+	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
+	font-size: 14px;
 }
 
+.button,
 button,
 input[type="button"],
 input[type="submit"] {
-	padding: 5px 8px;
-	background: #000000;
-	color: #FFFFFF;
+	@include animate();
+	padding: 10px 20px;
 	border: 0;
-}
+	color: #000000;
+	background: $light_grey;
+
+	&:hover{
+		cursor: pointer;
+		background: darken( $light_grey, 6%);
+	}
+
+	&.primary {
+		background: $turquoise;
+		color: #FFFFFF;
+		&:hover {
+			background: darken( $turquoise, 6% );
+		}
+	}
+
+	&.confirming,
+	&.destructive {
+		background: $red;
+		color: #FFFFFF;
+		&:hover {
+			background: darken( $red, 6% );
+		}
+	}
+
+	&[disabled],
+	&[disabled="disabled"] {
+		background: $light_grey !important;
+		color: $mid_grey !important;
+		cursor: not-allowed !important;
+	}
+}
+
+label {
+	display: block;
+	padding-bottom: 8px;
+	@include clearfix;
+
+	.label {
+		display: block;
+		padding-top: 10px;
+		width: 15%;
+		float: left;
+	}
+
+	input {
+		width: 60%;
+	}
+}
+
+.slider {
+	margin: 10px 0;
+	height: 5px;
+	position: relative;
+	background: rgba(255,255,255,0.3);
+	cursor: pointer;
+
+	.progress {
+		left: 0;
+		top: 0;
+		height: 100%;
+		background: $turquoise;
+		pointer-events: none;
+	}
+}

src/scss/global/_variables.scss

@@ -1,8 +1,10 @@
 
 $turquoise: #08d58f;
 $light_grey: #DDDDDD;
+$mid_grey: #AAAAAA;
 $dark_grey: #333333;
 $secondary_grey: #888888;
+$red: #cf2d2d;
 
 @mixin one_line_text {
 	white-space: nowrap;