improve Window controls Settings

components/Settings.js

@@ -36,7 +36,11 @@ function WindowSettings({
 }) {
   return (
     <div className="settings-content">
-      <ThemeSelect selected={windowTheme || 'none'} onChange={onChange.bind(null, 'windowTheme')} />
+      <ThemeSelect
+        selected={windowTheme || 'none'}
+        windowControls={windowControls}
+        onChange={onChange}
+      />
       <div className="row">
         <Slider
           label="Padding (vert)"
@@ -71,11 +75,6 @@ function WindowSettings({
           />
         </div>
       )}
-      <Toggle
-        label="Window controls"
-        enabled={windowControls}
-        onChange={onChange.bind(null, 'windowControls')}
-      />
       <Toggle
         label="Auto-adjust width"
         enabled={widthAdjustment}

components/ThemeSelect.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Toggle from './Toggle'
 import { None, BW, Sharp, Boxy } from './svg/WindowThemes'
 import { COLORS } from '../lib/constants'
 
@@ -7,7 +8,7 @@ const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW, boxy: Boxy }
 class ThemeSelect extends React.Component {
   select = theme => {
     if (this.props.selected !== theme) {
-      this.props.onChange(theme)
+      this.props.onChange('windowTheme', theme)
     }
   }
 
@@ -54,25 +55,27 @@ class ThemeSelect extends React.Component {
 
   render() {
     return (
+      <>
         <div className="window-theme">
-        <span className="label" id="window-theme-label">
-          Theme
-        </span>
+          <Toggle
+            label="Window controls"
+            enabled={this.props.windowControls}
+            onChange={v => this.props.onChange('windowControls', v)}
+          />
+          {this.props.windowControls && (
             <div className="themes" role="radiogroup" aria-labelledby="window-theme-label">
               {this.renderThemes()}
             </div>
+          )}
           <style jsx>
             {`
-            .window-theme {
-              padding: 8px;
-            }
-
               .window-theme span {
                 display: inline-block;
                 margin-bottom: 2px;
               }
 
               .themes {
+                padding: 4px 8px 8px;
                 display: flex;
                 flex-direction: row;
                 width: 100%;
@@ -82,6 +85,7 @@ class ThemeSelect extends React.Component {
             `}
           </style>
         </div>
+      </>
     )
   }
 }