Add toggle component

components/Settings.js

@@ -1,6 +1,10 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import SettingsIcon from './svg/Settings'
+import ThemeSelect from './ThemeSelect'
+import Slider from './Slider'
+import Toggle from './Toggle'
+import { PALETTE } from '../lib/constants'
 
 class Settings extends React.Component {
   constructor(props) {
@@ -26,23 +30,11 @@ class Settings extends React.Component {
           <SettingsIcon />
         </div>
         <div className="settings-settings">
-          <div className="window-theme">
+          <ThemeSelect onChange={this.props.onChange} />
-            <span className="label">Theme</span>
+          <Toggle label="Drop shadow" onChange={this.props.onChange}/>
-            <div className="themes">
+          <Toggle label="Window controls" onChange={this.props.onChange}/>
-              <div className="theme"></div>
+          <Slider label="Padding (vertical)" onChange={this.props.onChange}/>
-              <div className="theme"></div>
+          <Slider label="Padding (horizontal)" onChange={this.props.onChange}/>
-              <div className="theme"></div>
-            </div>
-          </div>
-          <div className="toggle">
-            <span className="label">Drop shadow</span>
-          </div>
-          <div className="toggle">
-            <span className="label">Window controls</span>
-          </div>
-          <div className="slider">
-            <span className="label">Padding (horizontal)</span>
-          </div>
         </div>
         <style jsx>{`
           .settings-container {
@@ -80,14 +72,12 @@ class Settings extends React.Component {
 
           .settings-settings {
             display: none;
-            border: 0.5px solid #333;
+            border: 0.5px solid #000;
-            height: 208px;
+            width: 184px;
-            width: 152px;
-            padding: 8px;
             border-radius: 3px;
             position: absolute;
             margin-top: 120px;
-            background: #000;
+            background: ${PALETTE.EDITOR_BG};
           }
         `}</style>
       </div>

components/Toggle.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import Checkmark from './svg/Checkmark'
+
+export default class extends React.Component {
+  constructor(props) {
+    super()
+    this.state = { isEnabled: props.enabled || false }
+    this.toggle = this.toggle.bind(this)
+  }
+
+  toggle() {
+    this.setState({ isEnabled: !this.state.isEnabled })
+  }
+
+  render() {
+    return (
+      <div className="toggle" onClick={this.toggle}>
+        <span className="label">{this.props.label}</span>
+        { this.state.isEnabled ? <Checkmark /> : null }
+        <style jsx>{`
+          .toggle {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            user-select: none;
+            padding: 8px;
+            border-bottom: solid 1px #000;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

components/Toolbar.js

@@ -13,7 +13,7 @@ const Toolbar = (props) => (
       onChange={props.onBGChange}
       bg={props.bg}
     />
-    <Settings />
+    <Settings onChange={props.onSettingsChange} />
     <div className="buttons">
       <Button
         onClick={props.upload}

components/svg/Checkmark.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7">
+    <polygon fill="#FFFFFF" fillRule="evenodd" points="2.852 5.016 8.275 0 9 .67 2.852 6.344 0 3.711 .713 3.042"/>
+  </svg>
+)