Make toolbar just be a aesthetic component

components/Toolbar.js

@@ -1,23 +1,7 @@
 import React from 'react'
-import Dropdown from './Dropdown'
-import ColorPicker from './ColorPicker'
-import Settings from './Settings'
-import Button from './Button'
-import { THEMES, LANGUAGES } from '../lib/constants'
-
 const Toolbar = (props) => (
   <div id="toolbar">
-    <Dropdown list={THEMES} onChange={props.onThemeChange}/>
-    <Dropdown list={LANGUAGES} onChange={props.onLanguageChange}/>
-    <ColorPicker
-      onChange={props.onBGChange}
-      bg={props.bg}
-    />
-    <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
-    <div className="buttons">
-      <Button className="tweetButton" onClick={props.upload} title={props.uploading ? 'Loading...' : 'Tweet Image'} color="#57b5f9" style={{ marginRight: '8px' }} />
-      <Button onClick={props.save} title="Save Image" color="#c198fb" />
-    </div>
+    {props.children}
     <style jsx>{`
       #toolbar {
         width: 100%;

pages/editor.js

@@ -1,15 +1,27 @@
+// Theirs
 import React from 'react'
 import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 
+// Ours
 import Page from '../components/Page'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
+import Button from '../components/Button'
+import Dropdown from '../components/Dropdown'
+import ColorPicker from '../components/ColorPicker'
+import Settings from '../components/Settings'
 import Toolbar from '../components/Toolbar'
 import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
-import { THEMES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants'
+import {
+  THEMES,
+  LANGUAGES,
+  DEFAULT_LANGUAGE,
+  COLORS,
+  DEFAULT_CODE
+} from '../lib/constants'
 
 class Editor extends React.Component {
   /* pathname, asPath, err, req, res */
@@ -88,20 +100,27 @@ class Editor extends React.Component {
     return (
         <Page enableHeroText>
           <div id="editor">
-            <Toolbar
-              save={this.save}
-              upload={this.upload}
-              uploading={this.state.uploading}
-              onBGChange={color => this.setState({ background: color })}
-              onThemeChange={theme => this.setState({ theme: theme.id })}
-              onLanguageChange={language => this.setState({ language: language.module })}
-              onSettingsChange={(key, value) => this.setState({ [key]: value })}
-              bg={this.state.background}
-              enabled={this.state}
-            />
-            <ReadFileDropContainer
-              onDrop={droppedContent => this.setState({ code: droppedContent })}
-            >
+            <Toolbar>
+              <Dropdown list={THEMES} onChange={theme => this.setState({ theme: theme.id })}/>
+              <Dropdown list={LANGUAGES} onChange={language => this.setState({ language: language.module })}/>
+              <ColorPicker
+                onChange={color => this.setState({ background: color })}
+                bg={this.state.background}
+              />
+              <Settings onChange={(key, value) => this.setState({ [key]: value })} enabled={this.state} />
+              <div className="buttons">
+                <Button
+                  className="tweetButton"
+                  onClick={this.upload}
+                  title={this.state.uploading ? 'Loading...' : 'Tweet Image'}
+                  color="#57b5f9"
+                  style={{ marginRight: '8px' }}
+                />
+                <Button onClick={this.save} title="Save Image" color="#c198fb" />
+              </div>
+            </Toolbar>
+
+            <ReadFileDropContainer onDrop={droppedContent => this.setState({ code: droppedContent })}>
               <Overlay title="Drop your file here to import">
                 <Carbon config={this.state} updateCode={this.updateCode}>
                   {this.state.code}