Update dependencies (#124)

* Upgrade react, react-dom, react-color, next

* Use dynamic styles in Carbon.js

* Fix react-color alpha issues

components/Carbon.js

@@ -21,6 +21,7 @@ const DEFAULT_SETTINGS = {
   marginHorizontal: '45px',
   background: 'rgba(171, 184, 195, 1)',
   theme: 'seti',
+  windowTheme: 'none',
   language: DEFAULT_LANGUAGE
 }
 
@@ -83,14 +84,6 @@ class Carbon extends React.Component {
       lineWrapping: true
     }
 
-    // create styles
-    const containerStyle = {
-      position: 'relative',
-      background: config.background,
-      minWidth: config.widthAdjustment ? '90px' : '680px',
-      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
-    }
-
     // set content to spinner if loading, else editor
     let content = (
       <div>
@@ -106,21 +99,25 @@ class Carbon extends React.Component {
     )
     if (this.state.loading === false) {
       content = (
-        <div id="container" style={containerStyle}>
+        <div id="container">
           {config.windowControls ? <WindowControls theme={config.windowTheme} /> : null}
           <CodeMirror
-            className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow
+            className={`CodeMirror__container window-theme__${config.windowTheme}`}
-              ? 'dropshadow'
-              : ''}`}
             onChange={this.codeUpdated}
             value={this.props.children}
             options={options}
           />
           <div id="container-bg">
             <div className="alpha" />
-            <div className="bg" style={{ background: config.background }} />
+            <div className="bg" />
           </div>
           <style jsx>{`
+            #container {
+              position: relative;
+              min-width: ${config.widthAdjustment ? '90px' : '680px'};
+              padding: ${config.paddingVertical} ${config.paddingHorizontal};
+            }
+
             #container #container-bg {
               background: #fff;
               position: absolute;
@@ -131,6 +128,7 @@ class Carbon extends React.Component {
             }
 
             #container .bg {
+              background: ${this.props.config.background || config.background};
               position: absolute;
               top: 0px;
               right: 0px;
@@ -169,18 +167,15 @@ class Carbon extends React.Component {
               min-width: inherit;
               position: relative;
               z-index: 1;
-            }
-
-            #container :global(.CodeMirror__container.dropshadow) {
-              box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
               border-radius: 5px;
+              ${config.dropShadow ? 'box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);' : ''};
             }
 
             #container :global(.CodeMirror__container .CodeMirror) {
               height: auto;
               min-width: inherit;
               padding: 18px 18px;
-              border-radius: 5px;
+              ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
               font-family: Hack, monospace !important;
               font-size: 0.8rem;
               user-select: none;

components/ColorPicker.js

@@ -111,6 +111,14 @@ class ColorPicker extends React.Component {
             color: ${COLORS.SECONDARY} !important;
           }
 
+          /* TODO remove once base64 url issue fixed in react-color */
+          /* prettier-ignore */
+          .colorpicker-picker > :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div),
+          .colorpicker-picker > :global(.sketch-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(1)) {
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
+              left center !important;
+          }
+
           .colorpicker-picker > :global(.sketch-picker > div:nth-child(3) > div > div > input) {
             width: 100% !important;
             box-shadow: none;

components/Settings.js

@@ -55,7 +55,7 @@ class Settings extends React.Component {
             onChange={this.props.onChange.bind(null, 'widthAdjustment')}
           />
           <Toggle
-            label="Line Numbers"
+            label="Line numbers"
             enabled={this.props.enabled.lineNumbers}
             onChange={this.props.onChange.bind(null, 'lineNumbers')}
           />

package.json

@@ -29,14 +29,14 @@
     "morgan": "^1.8.2",
     "morphmorph": "^0.0.2",
     "ms": "^2.0.0",
-    "next": "^3.2.2",
+    "next": "^4.1.3",
-    "react": "^15.6.1",
+    "react": "^16.0.0",
     "react-click-outside": "^2.3.1",
     "react-codemirror": "^1.0.0",
-    "react-color": "^2.12.1",
+    "react-color": "^2.13.8",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "^15.5.4",
+    "react-dom": "^16.0.0",
     "react-spinkit": "^3.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^0.0.6",