Wire-up window theme functionality

components/CodeImage.js

@@ -16,7 +16,6 @@ const DEFAULT_SETTINGS = {
 }
 
 class CodeImage extends React.Component {
-
   constructor (props) {
     super(props)
 
@@ -66,7 +65,7 @@ const DEFAULT_SETTINGS = {
         <div id="container" style={containerStyle}>
           { config.windowControls ? <WindowControls /> : null }
           <CodeMirror
-            className={`CodeMirror__container ${config.dropShadow ? 'dropshadow' : ''}`}
+            className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow ? 'dropshadow' : ''}`}
             value={this.props.children}
             options={options}
           />

components/Meta.js

@@ -71,6 +71,14 @@ export default () => (
         font-size: 0.7rem;
       }
 
+      .window-theme__sharp > .CodeMirror {
+        border-radius: 0px;
+      }
+
+      .window-theme__bw > .CodeMirror {
+        border: 2px solid #fff;
+      }
+
       .window-controls + .CodeMirror__container > .CodeMirror {
         padding-top: 40px;
       }

components/Settings.js

@@ -30,7 +30,7 @@ class Settings extends React.Component {
           <SettingsIcon />
         </div>
         <div className="settings-settings">
-          <ThemeSelect onChange={this.props.onChange} />
+          <ThemeSelect onChange={this.props.onChange.bind(null, 'windowTheme')} />
           <Toggle label="Drop shadow"
             enabled={this.props.enabled.dropShadow}
             onChange={this.props.onChange.bind(null, 'dropShadow')}

components/ThemeSelect.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import { Hyper, BW, None } from './svg/Themes'
+import { None, BW, Sharp } from './svg/WindowThemes'
 
-const THEME_IMGS = [None, Hyper, BW]
+const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }
+export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
 
 export default class extends React.Component {
   constructor(props) {
     super()
-    this.state = { selected: props.selected || THEME_IMGS[0] }
+    this.state = { selected: props.selected || WINDOW_THEMES[0] }
     this.select = this.select.bind(this)
   }
 
@@ -18,12 +19,18 @@ export default class extends React.Component {
   }
 
   renderThemes() {
-    return THEME_IMGS.map((Img, i) => (
+    return WINDOW_THEMES.map((theme, i) => {
-      <div className={`theme ${this.state.selected === Img ? "selected" : ""}`}
+      const Img = WINDOW_THEMES_MAP[theme]
-        key={i} onClick={this.select.bind(null, Img)}>
+      return (
+        <div
+          className={`theme ${this.state.selected === theme ? "selected" : ""}`}
+          key={i}
+          onClick={this.select.bind(null, theme)}
+        >
           <Img />
           <style jsx>{`
             .theme {
+              cursor: pointer;
               margin-right: 8px;
             }
 
@@ -32,13 +39,14 @@ export default class extends React.Component {
             }
           `}</style>
         </div>
-    ))
+      )
+    })
   }
 
   render() {
     return (
       <div className="window-theme">
-        <span className="label">Theme</span>
+        <span className="label">Window Theme</span>
         <div className="themes">
           { this.renderThemes() }
         </div>

components/svg/WindowThemes.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Hyper = () => (
+export const Sharp = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 81 81" xmlnsXlink="http://www.w3.org/1999/xlink">
     <defs>
       <rect id="a" width="81" height="81" rx="3"/>
@@ -10,11 +10,11 @@ export const Hyper = () => (
         <use xlinkHref="#a"/>
       </mask>
       <use fill="#616161" xlinkHref="#a"/>
-      <g transform="translate(17 33)" mask="url(#b)">
+      <g transform="translate(16 32)" mask="url(#b)">
-        <path fill="#000000" stroke="#393939" strokeWidth="2" d="M65.0458013,49.1077029 C66.0458013,49.1077029 0.174089069,49.1077029 0.174089069,49.1077029 L0.174089069,5.16868499 C0.174089069,2.41055979 2.40986586,0.174657534 5.17268563,0.174657534 L65.0458013,0.174657534 L65.0458013,49.1077029 Z"/>
+        <path fill="#000000" fillRule="nonzero" d="M66.0458013,46.1092762 C66.0458013,48.3193105 64.2622787,50.1077029 62.050805,50.1077029 L0.174089069,50.1077029 L0.174089069,6.16868499 C0.174089069,0.174657534 0.174089069,0.174657534 0.174089069,0.174657534 L66.0458013,0.174657534 L66.0458013,46.1092762 Z"/>
-        <g fillRule="nonzero" strokeWidth=".5" transform="translate(18.96 14.27)">
+        <g transform="translate(19.96 15.27)">
-          <ellipse cx="7.045" cy="7.048" fill="#FF5E55" stroke="#E0443E" rx="7.045" ry="7.048"/>
+          <ellipse cx="7.045" cy="7.048" fill="#FF5E55" fillRule="nonzero" stroke="#E0443E" strokeWidth=".5" rx="7.045" ry="7.048"/>
-          <ellipse cx="30.526" cy="7.048" fill="#FFC02C" stroke="#DEA123" rx="7.045" ry="7.048"/>
+          <ellipse cx="30.526" cy="7.048" fill="#FFC02C" fillRule="nonzero" stroke="#DEA123" strokeWidth=".5" rx="7.045" ry="7.048"/>
         </g>
       </g>
     </g>

pages/index.js

@@ -7,6 +7,7 @@ import domtoimage from 'dom-to-image'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
+import { WINDOW_THEMES } from '../components/ThemeSelect'
 import CodeImage from '../components/CodeImage'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
@@ -33,6 +34,7 @@ class Index extends React.Component {
       background: '#111111',
       theme: THEMES[0].id,
       language: 'javascript', // TODO LANGUAGES[0]
+      windowTheme: WINDOW_THEMES[0],
       dropShadow: false,
       windowControls: true,
       paddingVertical: '48px',
@@ -41,7 +43,6 @@ class Index extends React.Component {
   }
 
   save () {
-    // domtoimage.toPng(document.getElementById('container'))
     domtoimage.toPng(document.getElementById('container'))
       .then((dataUrl) => {
         const link = document.createElement('a')