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,34 +55,37 @@ class ThemeSelect extends React.Component {
 
   render() {
     return (
-      <div className="window-theme">
+      <>
-        <span className="label" id="window-theme-label">
+        <div className="window-theme">
-          Theme
+          <Toggle
-        </span>
+            label="Window controls"
-        <div className="themes" role="radiogroup" aria-labelledby="window-theme-label">
+            enabled={this.props.windowControls}
-          {this.renderThemes()}
+            onChange={v => this.props.onChange('windowControls', v)}
-        </div>
+          />
-        <style jsx>
+          {this.props.windowControls && (
-          {`
+            <div className="themes" role="radiogroup" aria-labelledby="window-theme-label">
-            .window-theme {
+              {this.renderThemes()}
-              padding: 8px;
+            </div>
-            }
+          )}
-
+          <style jsx>
-            .window-theme span {
+            {`
-              display: inline-block;
+              .window-theme span {
-              margin-bottom: 2px;
+                display: inline-block;
-            }
+                margin-bottom: 2px;
+              }
 
-            .themes {
+              .themes {
-              display: flex;
+                padding: 4px 8px 8px;
-              flex-direction: row;
+                display: flex;
-              width: 100%;
+                flex-direction: row;
-              max-width: 200px;
+                width: 100%;
-              overflow-x: scroll;
+                max-width: 200px;
-            }
+                overflow-x: scroll;
-          `}
+              }
-        </style>
+            `}
-      </div>
+          </style>
+        </div>
+      </>
     )
   }
 }