Add window control themes

components/CodeImage.js

@@ -2,7 +2,7 @@ import { EOL } from 'os'
 import React from 'react'
 import domtoimage from 'dom-to-image'
 import CodeMirror from 'react-codemirror'
-import WindowControls from '../components/svg/Controls'
+import WindowControls from '../components/WindowControls'
 import Spinner from 'react-spinner'
 
 const DEFAULT_SETTINGS = {
@@ -63,7 +63,7 @@ class CodeImage extends React.Component {
     if (this.state.loading === false) {
       content = (
         <div id="container" style={containerStyle}>
-          { config.windowControls ? <WindowControls /> : null }
+          { config.windowControls ? <WindowControls theme={config.windowTheme} /> : null }
           <CodeMirror
             className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow ? 'dropshadow' : ''}`}
             value={this.props.children}

components/WindowControls.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Controls, ControlsBW } from './svg/Controls'
+
+export default ({ theme }) => (
+  <div className="window-controls">
+    { theme === 'bw' ? <ControlsBW /> : <Controls /> }
+    <style jsx>{`
+      div {
+        margin-top: -19px;
+        position: relative;
+        top: +30px;
+        margin-left: 18px;
+        z-index: 1;
+      }
+    `}
+    </style>
+  </div>
+)

components/svg/Controls.js

@@ -1,23 +1,21 @@
 import React from 'react'
 
-export default () => (
+export const Controls = () => (
-  <div className="window-controls">
+  <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
-    <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
+    <g fill="none" fillRule="evenodd" transform="translate(1 1)">
-      <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+      <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
-        <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
+      <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" strokeWidth=".5"/>
-        <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" strokeWidth=".5"/>
+      <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" strokeWidth=".5"/>
-        <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" strokeWidth=".5"/>
+    </g>
-      </g>
+  </svg>
-    </svg>
+)
-    <style jsx>{`
+
-      div {
+export const ControlsBW = () => (
-        margin-top: -19px;
+  <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
-        position: relative;
+    <g fill="none" fillRule="evenodd" stroke="#878787" transform="translate(1 1)">
-        top: +30px;
+      <circle cx="6" cy="6" r="6"/>
-        margin-left: 18px;
+      <circle cx="26" cy="6" r="6"/>
-        z-index: 1;
+      <circle cx="46" cy="6" r="6"/>
-      }
+    </g>
-    `}
+  </svg>
-    </style>
-  </div>
 )