buttons utilise BEM style

Author: MathuraMG

shared/components/Toolbar/Toolbar.jsx

@@ -10,11 +10,11 @@ class Toolbar extends React.Component {
 	render() {
 		let playButtonClass = classNames({
 			"toolbar__play-button": true,
-			"playing": this.props.isPlaying
+			"toolbar__play-button--selected": this.props.isPlaying
 		});
 		let stopButtonClass = classNames({
 			"toolbar__stop-button": true,
-			"stopped": !this.props.isPlaying
+			"toolbar__stop-button--selected": !this.props.isPlaying
 		});
 
 		return (

styles/components/_toolbar.scss

@@ -1,7 +1,7 @@
 .toolbar__play-button {
 	@extend %toolbar-button;
 	margin-right: #{15 / $base-font-size}rem;
-	&.playing {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;
@@ -11,7 +11,7 @@
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
-	&.stopped {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;