Start hooking up Settings state

components/Settings.js

@@ -25,16 +25,16 @@ class Settings extends React.Component {
 
   render() {
     return (
-      <div className="settings-container" onClick={this.toggle}>
+      <div className="settings-container">
-        <div className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`}>
+        <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="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/>
-          <Toggle label="Window controls" onChange={this.props.onChange}/>
+          <Toggle label="Window controls" onChange={this.props.onChange.bind(null, 'windowControls')}/>
-          <Slider label="Padding (vertical)" onChange={this.props.onChange}/>
+          <Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/>
-          <Slider label="Padding (horizontal)" onChange={this.props.onChange}/>
+          <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>

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() {

components/Toolbar.js

@@ -32,7 +32,7 @@ const Toolbar = (props) => (
         position: relative;
         z-index: 3;
         font-size: 14px;
-        color: #4F6875;
+        color: #fff;
       }
 
       .buttons {

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}>