Mute visual feedback

src/js/components/VolumeControl.js

@@ -25,7 +25,7 @@ class VolumeControl extends React.Component{
 
 	render(){
 		return (
-			<span className="volume-control">
+			<span className={this.props.mute ? "volume-control muted" : "volume-control"}>
 				<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
 					{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
 				</a>

src/scss/components/_player.scss

@@ -151,16 +151,12 @@
 	a {
 		position: relative;
 		z-index: 99;
-	}
-
-	&:hover {
-		.slider-wrapper {
-			display: block;
-		}
+		padding: 0 !important;
 	}
 
 	.fa {
 		width: 6px;
+		padding: 12px;
 	}
 
 	.slider-wrapper {
@@ -173,4 +169,22 @@
 		background: rgba(0,0,0,0.8);
 		z-index: 98;
 	}
+
+	&.muted {
+		.fa {
+			color: $red;
+		}
+
+		.slider {
+			.progress {
+				background: rgba(255,255,255,0.25);
+			}
+		}
+	}
+
+	&:hover {
+		.slider-wrapper {
+			display: block;
+		}
+	}
 }