Finish theme select, add theme svgs

components/Meta.js

@@ -48,6 +48,11 @@ export default () => (
         margin-right: 0px;
       }
 
+      .selected svg {
+        border-radius: 3px;
+        border: solid 2px #fff;
+      }
+
       .CodeMirrorContainer .CodeMirror {
         height: auto;
         min-width: 680px;

components/ThemeSelect.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Hyper, BW, None } from './svg/Themes'
+
+const THEME_IMGS = [None, Hyper, BW]
+
+export default class extends React.Component {
+  constructor(props) {
+    super()
+    this.state = { selected: props.selected || THEME_IMGS[0] }
+    this.select = this.select.bind(this)
+  }
+
+  select(theme) {
+    if (this.state.selected !== theme) {
+      this.props.onChange(theme)
+      this.setState({ selected: theme })
+    }
+  }
+
+  renderThemes() {
+    return THEME_IMGS.map((Img, i) => (
+      <div className={`theme ${this.state.selected === Img ? "selected" : ""}`}
+        key={i} onClick={this.select.bind(null, Img)}>
+        <Img/>
+        <style jsx>{`
+          .theme {
+            margin-right: 8px;
+          }
+
+          .theme:last-of-type {
+            margin-right: 0px;
+          }
+        `}</style>
+      </div>
+    ))
+  }
+
+  render() {
+    return (
+      <div className="window-theme">
+        <span className="label">Theme</span>
+        <div className="themes">
+          { this.renderThemes() }
+        </div>
+        <style jsx>{`
+          .window-theme {
+            padding: 8px;
+            border-bottom: solid 1px #000;
+          }
+
+          .window-theme span {
+            display: inline-block;
+            margin-bottom: 8px;
+          }
+
+          .themes {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

components/svg/Themes.js

@@ -0,0 +1,64 @@
+import React from 'react'
+
+export const Hyper = () => (
+  <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"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <mask id="b" fill="white">
+        <use xlinkHref="#a"/>
+      </mask>
+      <use fill="#616161" xlinkHref="#a"/>
+      <g transform="translate(17 33)" mask="url(#b)">
+        <path fill="#000000" stroke="#393939" stroke-width="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"/>
+        <g fill-rule="nonzero" stroke-width=".5" transform="translate(18.96 14.27)">
+          <ellipse cx="7.045" cy="7.048" fill="#FF5E55" stroke="#E0443E" rx="7.045" ry="7.048"/>
+          <ellipse cx="30.526" cy="7.048" fill="#FFC02C" stroke="#DEA123" rx="7.045" ry="7.048"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export const BW = () => (
+  <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"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <mask id="b" fill="white">
+        <use xlinkHref="#a"/>
+      </mask>
+      <use fill="#616161" xlinkHref="#a"/>
+      <g transform="translate(17 33)" mask="url(#b)">
+        <path fill="#000000" stroke="#FFFFFF" stroke-width="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"/>
+        <g fill-rule="nonzero" stroke="#878787" transform="translate(18.96 14.27)">
+          <ellipse cx="7.045" cy="7.048" rx="7.045" ry="7.048"/>
+          <ellipse cx="30.526" cy="7.048" rx="7.045" ry="7.048"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export const None = () => (
+  <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"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <mask id="b" fill="white">
+        <use xlinkHref="#a"/>
+      </mask>
+      <use fill="#616161" xlinkHref="#a"/>
+      <g transform="translate(16 32)" mask="url(#b)">
+        <path fill="#000000" fill-rule="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,2.85738806 2.85846845,0.174657534 6.17268563,0.174657534 L66.0458013,0.174657534 L66.0458013,46.1092762 Z"/>
+        <g fill-rule="nonzero" stroke-width=".5" 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="30.526" cy="7.048" fill="#FFC02C" stroke="#DEA123" rx="7.045" ry="7.048"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+)