From 6343dc5a15db6d08422ae34bb93115afd5186dca Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Fri, 30 Jun 2017 10:20:41 -0700
Subject: [PATCH] Start hooking up Settings state

---
 components/Settings.js | 14 +++++++-------
 components/Toggle.js   |  1 +
 components/Toolbar.js  |  2 +-
 pages/index.js         |  8 ++++++--
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/components/Settings.js b/components/Settings.js
index 6d0ebab..60ca45a 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -25,16 +25,16 @@ class Settings extends React.Component {
 
   render() {
     return (
-      <div className="settings-container" onClick={this.toggle}>
-        <div className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`}>
+      <div className="settings-container">
+        <div className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`} onClick={this.toggle}>
           <SettingsIcon />
         </div>
         <div className="settings-settings">
           <ThemeSelect onChange={this.props.onChange} />
-          <Toggle label="Drop shadow" onChange={this.props.onChange}/>
-          <Toggle label="Window controls" onChange={this.props.onChange}/>
-          <Slider label="Padding (vertical)" onChange={this.props.onChange}/>
-          <Slider label="Padding (horizontal)" onChange={this.props.onChange}/>
+          <Toggle label="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/>
+          <Toggle label="Window controls" onChange={this.props.onChange.bind(null, 'windowControls')}/>
+          <Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/>
+          <Slider label="Padding (horizontal)" initialValue={32} onChange={this.props.onChange.bind(null, 'paddingHorizontal')}/>
         </div>
         <style jsx>{`
           .settings-container {
@@ -76,7 +76,7 @@ class Settings extends React.Component {
             width: 184px;
             border-radius: 3px;
             position: absolute;
-            margin-top: 120px;
+            margin-top: 132px;
             background: ${PALETTE.EDITOR_BG};
           }
         `}</style>
diff --git a/components/Toggle.js b/components/Toggle.js
index 1768e92..4e510e3 100644
--- a/components/Toggle.js
+++ b/components/Toggle.js
@@ -10,6 +10,7 @@ export default class extends React.Component {
 
   toggle() {
     this.setState({ isEnabled: !this.state.isEnabled })
+    this.props.onChange(this.state.isEnabled)
   }
 
   render() {
diff --git a/components/Toolbar.js b/components/Toolbar.js
index dae638b..c83c9b2 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -32,7 +32,7 @@ const Toolbar = (props) => (
         position: relative;
         z-index: 3;
         font-size: 14px;
-        color: #4F6875;
+        color: #fff;
       }
 
       .buttons {
diff --git a/pages/index.js b/pages/index.js
index 0e16b85..3109bb1 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -30,7 +30,11 @@ class Index extends React.Component {
     this.state = {
       background: '#111111',
       theme: THEMES[0].id,
-      language: 'javascript' // TODO LANGUAGES[0]
+      language: 'javascript', // TODO LANGUAGES[0]
+      dropShadow: false,
+      windowControls: true,
+      paddingVertical: '48px',
+      paddingHorizontal: '32px'
     }
   }
 
@@ -69,7 +73,7 @@ class Index extends React.Component {
               onBGChange={color => this.setState({ background: color })}
               onThemeChange={theme => this.setState({ theme: theme.id })}
               onLanguageChange={language => this.setState({ language })}
-              onSettingsChange={settings => this.setState({ settings })}
+              onSettingsChange={(key, value) => this.setState({ key: value })}
               bg={this.state.background}
             />
             <CodeImage config={this.state}>