add logo and play to toolbar, with no functionality

shared/components/Toolbar/Toolbar.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 
 var playUrl = require('../../../images/play.svg');
+var logoUrl = require('../../../images/p5js-logo.svg');
 
 class Toolbar extends React.Component {
 	render() {
 		return (
 			<div className="toolbar">
+				<img className="toolbar__logo" src={logoUrl}/>
+				<div className="toolbar__play-button">
 					<img src={playUrl}/>
 				</div>
+			</div>
 		);
 	}
 }

styles/abstracts/_placeholders.scss

@@ -0,0 +1,12 @@
+%toolbar-button {
+	background-color: $light-button-background-color;
+	color: $light-button-color;
+	display: inline-block;
+	height: #{44 / $base-font-size}rem;
+	width: #{44 / $base-font-size}rem;
+	text-align: center;
+	border-radius: 100%;
+
+	line-height: #{50 / $base-font-size}rem;
+	cursor: pointer;
+}

styles/abstracts/_variables.scss

@@ -1 +1,36 @@
 $base-font-size: 16;
+
+//colors
+$p5js-pink: #ed225d;
+$white: #fff;
+$black: #000;
+
+
+$light-primary-text-color: #333;
+$light-secondary-text-color: #6b6b6b;
+$light-inactive-text-color: #b5b5b5;
+$light-background-color: #fdfdfd;
+
+$light-button-background-color: #f4f4f4;
+$light-button-color: $black;
+$light-toolbar-button-color: $p5js-pink;
+$light-button-background-hover-color: $p5js-pink;
+$light-button-background-active-color: #f10046;
+$light-button-hover-color: $white;
+$light-button-active-color: $white;
+
+$dark-primary-text-color: $white;
+$dark-secondary-text-color: #c2c2c2;
+$dark-inactive-color: #7d7d7d;
+$dark-background-color: #333;
+
+$dark-button-background-color: $white;
+$dark-button-color: $black;
+$dark-toolbar-button-color: $p5js-pink;
+$dark-button-background-hover-color: $p5js-pink;
+$dark-button-background-active-color: #f10046;
+$dark-button-hover-color: $white;
+$dark-button-active-color: $white;
+
+$editor-border-color: #f4f4f4;
+

styles/base/_base.scss

@@ -1,3 +1,7 @@
+* {
+	box-sizing: border-box;
+}
+
 html {
 	font-size: #{$base-font-size}px;
 }

styles/components/_editor.scss

@@ -1,6 +1,7 @@
 .CodeMirror {
 	font-family: Inconsolata, monospace;
 	height: 100%;
+	border: 1px solid $editor-border-color;
 }
 
 .CodeMirror-linenumbers {

styles/components/_toolbar.scss

@@ -0,0 +1,12 @@
+.toolbar__play-button {
+	@extend %toolbar-button;
+}
+
+.toolbar__logo {
+	margin-right: #{30 / $base-font-size}rem;
+}
+
+.toolbar {
+	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
+	display: flex;
+}

styles/main.scss

@@ -1,4 +1,5 @@
 @import 'abstracts/variables';
+@import 'abstracts/placeholders';
 
 @import 'base/reset';
 @import 'base/base';
@@ -7,5 +8,6 @@
 
 @import 'components/p5-widget-codemirror-theme';
 @import 'components/editor';
+@import 'components/toolbar';
 
 @import 'layout/ide';