add play and stop button styling

images/stop.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>stop</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop-IDE-light" transform="translate(-280.000000, -69.000000)" fill="#ED225D">
+            <g id="IDE-CORE-+-Web-dock-&amp;-identity-zone">
+                <g id="IDE-CORE" transform="translate(0.000000, 45.000000)">
+                    <g id="play-btns" transform="translate(202.000000, 0.000000)">
+                        <g id="stop-+-stop" transform="translate(64.000000, 10.000000)">
+                            <rect id="stop" x="14" y="14" width="16" height="16"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package.json

@@ -38,6 +38,7 @@
     "express": "^4.13.4",
     "react": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-inlinesvg": "^0.4.2",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2"
   }

shared/components/Toolbar/Toolbar.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
+var Isvg = require('react-inlinesvg');
 var playUrl = require('../../../images/play.svg');
 var logoUrl = require('../../../images/p5js-logo.svg');
+var stopUrl = require('../../../images/stop.svg');
 
 class Toolbar extends React.Component {
 	render() {
@@ -9,8 +11,13 @@ class Toolbar extends React.Component {
 			<div className="toolbar">
 				<img className="toolbar__logo" src={logoUrl}/>
 				<div className="toolbar__play-button" onClick={this.props.toggleSketch}>
-					<img src={playUrl}/>
+					<Isvg src={playUrl} alt="Play Sketch" />
 				</div>
+				{ this.props.isPlaying ? 
+					<div className="toolbar__stop-button">
+						<Isvg src={stopUrl} alt="Stop Sketch" />
+					</div> 
+				: null }
 			</div>
 		);
 	}

styles/abstracts/_placeholders.scss

@@ -9,4 +9,17 @@
 
 	line-height: #{50 / $base-font-size}rem;
 	cursor: pointer;
+
+	& g {
+		fill: $light-toolbar-button-color;
+	}
+
+	&:hover {
+		background-color: $light-button-background-hover-color;
+		color: $light-button-hover-color;
+
+		& g {
+			fill: $light-button-hover-color;
+		}
+	}
 }

styles/components/_toolbar.scss

@@ -1,5 +1,10 @@
 .toolbar__play-button {
 	@extend %toolbar-button;
+	margin-right: #{15 / $base-font-size}rem;
+}
+
+.toolbar__stop-button {
+	@extend %toolbar-button;
 }
 
 .toolbar__logo {