start to add toolbar

images/play.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" 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>play</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(-218.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="play-||-pause-+-play" transform="translate(0.000000, 10.000000)">
+                            <polygon id="play" transform="translate(24.500000, 22.500000) rotate(90.000000) translate(-24.500000, -22.500000) " points="24.5 14 33 31 16 31"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package.json

@@ -21,6 +21,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.8.0",
     "css-loader": "^0.23.1",
+    "file-loader": "^0.8.5",
     "node-sass": "^3.7.0",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",

shared/components/Toolbar/Toolbar.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+var playUrl = require('../../../images/play.svg');
+
+class Toolbar extends React.Component {
+	render() {
+		return (
+			<div className="toolbar">
+				<img src={playUrl}/>
+			</div>
+		);
+	}
+}
+
+export default Toolbar;

shared/containers/App/App.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Editor from '../../components/Editor/Editor'
 import PreviewFrame from '../../components/Preview/PreviewFrame'
 import Preview from '../../components/Preview/Preview'
+import Toolbar from '../../components/Toolbar/Toolbar'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as FileActions from '../../redux/actions'
@@ -10,6 +11,8 @@ class App extends React.Component {
 	render() {
 		return (
 			<div className="app">
+				<Toolbar 
+					className="toolbar" />
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />

styles/layout/_ide.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: row;
 	height: 100%;
+	flex-wrap: wrap;
 }
 
 .editor-holder {
@@ -11,4 +12,8 @@
 
 .preview-frame {
 	width: 50%;
+}
+
+.toolbar {
+	width: 100%;
 }

webpack.config.js

@@ -29,6 +29,10 @@ module.exports = {
       {
         test: /\.scss$/,
         loaders: ['style', 'css', 'sass']
+      },
+      {
+        test: /\.svg$/,
+        loader: 'file'
       }
     ],
   },