add dynamic styles, fix window control

components/codeImage.js

@@ -9,16 +9,22 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
   require('../lib/constants')
 }
 
-const margin = '45px 54px'
+const DEFAULT_SETTINGS = {
-const padding = '50px 50px'
+  paddingVertical: '50px',
+  paddingHorizontal: '50px',
+  marginVertical: '45px',
+  marginHorizontal: '45px',
+  background: '#fed0ec',
+  theme: 'dracula',
+  language: 'javascript'
+}
 
 class CodeImage extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      code: this.props.children,
+      code: this.props.children
-      config: this.props.config || {}
     }
   }
 
@@ -27,17 +33,30 @@ class CodeImage extends React.Component {
   }
 
   render () {
-    const options = { lineNumbers: false, mode: 'javascript', theme: 'dracula'}
+    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
+
+    const options = { 
+      lineNumbers: false,
+      mode: config.language, 
+      theme: config.theme, 
+      scrollBarStyle: null, 
+      viewportMargin: Infinity,
+      lineWrapping: true
+    }
+    
+    // create styles
+    const containerStyle = {
+      background: config.background,
+      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
+    }
 
     return (
       <div id='section'>
         <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css'/>
         <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/dracula.min.css'/>
-        <div id='container' style={Object.assign({ background: this.state.config.bg }, this.props.style)}>
+        <div id='container' style={containerStyle}>
           { true ? <WindowControls /> : null }
-          <div id='anotherContainer'>
+          <CodeMirror className="CodeMirrorContainer" value={this.state.code} onChange={this.updateCode} options={options} />
-            <CodeMirror value={this.state.code} onChange={this.updateCode} options={options} />
-          </div>
         </div>
         <style jsx>{`
           #section {
@@ -46,29 +65,6 @@ class CodeImage extends React.Component {
             justify-content: center;
             align-items: center;
           }
-          #anotherContainer {
-            background: white;
-            min-width: 700px;
-            min-height: 400px;
-            margin: 0px;
-            padding: 15px;
-            height: 100%;
-            background: #000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-
-          .hyper {
-            border: 1px solid #393939;
-            border-radius: 5px;
-            background: black;
-            padding: 26px 18px;
-            margin: ${margin}
-            color: white;
-          }
-
-          .bw {}
         `}</style>
       </div>
     )

components/dnd.js

@@ -0,0 +1,25 @@
+const drop = (props, monitor, component) => {
+  const bundle = monitor.getItem()
+  const file = bundle.files[0]
+  const reader = new FileReader()
+  reader.onload = function(event) {
+    component.setState({
+      droppedContent: event.target.result
+    })
+  };
+  reader.readAsText(file, "UTF-8");
+}
+
+export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+  item: monitor.getItem()
+}))(CodeImage)
+
+
+let code = this.props.content
+    const split = code.split(EOL)
+    if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
+
+    return this.props.connectDropTarget(

components/meta.js

@@ -27,6 +27,13 @@ export default () => (
       #toolbar>div:last-child {
         margin-right: 0px;
       }
+
+      .CodeMirrorContainer .CodeMirror {
+        height: auto;
+        min-width: 680px;
+        padding: 40px 18px 24px;
+        border-radius: 3px;
+      }
     `}</style>
   </div>
 )

components/svg/controls.js

@@ -12,8 +12,9 @@ export default () => (
     <style jsx>{`
       div {
         position: absolute;
-        margin-left: -2px;
+        margin-left: 18px;
-        margin-top: -14px;
+        margin-top: 12px;
+        z-index: 1;
       }
     `}
     </style>

pages/index.js

@@ -26,8 +26,8 @@ class Index extends React.Component {
     super()
     this.state = {
       bgColor: '#111111',
-      theme: THEMES[0],
+      theme: THEMES[0].id,
-      language: LANGUAGES[0]
+      language: 'javascript' // TODO LANGUAGES[0]
     }
   }
 
@@ -60,7 +60,7 @@ class Index extends React.Component {
               save={this.save}
               upload={this.upload}
               onBGChange={color => this.setState({ bgColor: color })}
-              onThemeChange={theme => this.setState({ theme })}
+              onThemeChange={theme => this.setState({ theme: theme.id })}
               onLanguageChange={language => this.setState({ language })}
               bg={this.state.bgColor}
             />