options styling

2 files changed, 23 insertions, 6 deletions

diff --git a/app/app.js b/app/app.js
index 5b3c6ca..4a00707 100644
--- a/app/app.js
+++ b/app/app.js
@@ -266,15 +266,17 @@ export default class App extends React.Component {
 
     return (
       <div className="app">
-        <button onClick={configure}>settings</button>
-        <label>layout:{' '}
+        <button onClick={configure}>midi settings</button>
+        <div className="option">
+          <label>layout:</label>
           <select name="layout" onChange={this.onlayout} value={layout}>
             <option value="wicki_hayden">Wicki-Hayden</option>
             <option value="harmonic">Harmonic Table</option>
             <option value="gerhard">Gerhard</option>
           </select>
-        </label>
-        <label>scale:{' '}
+        </div>
+        <div className="option">
+          <label>scale:</label>
           <select name="layout" onChange={this.onscale} value={scale}>
             <option value="none">None</option>
             <option value="major">Major</option>
@@ -285,8 +287,8 @@ export default class App extends React.Component {
             <option value="whole">Whole-Tone</option>
             <option value="penta">Pentatonic</option>
           </select>
-        </label>
-        <button onClick={this.onoffset}>set offset</button>
+          <button onClick={this.onoffset}>set offset</button>
+        </div>
 
         <div className="main">
           <Keyboard
diff --git a/app/style.js b/app/style.js
index 0bd718e..0897b16 100644
--- a/app/style.js
+++ b/app/style.js
@@ -52,6 +52,15 @@ body {
   font-family: sans-serif;
 }
 
+button, input, select {
+  background: #363636;
+  border: 1px solid #eeeeee;
+  color: #eeeeee;
+  padding: 0.25em;
+  margin: 0.125em 0;
+  border-radius: 0.5em;
+}
+
 .app, .keyboard, .chord {
   position: relative;
 }
@@ -61,6 +70,12 @@ body {
   justify-content: space-evenly;
 }
 
+.option label {
+  display: inline-block;
+  width: 4em;
+  margin-right: 1em;
+}
+
 .hexagon {
   position: absolute;
   width: ${rem(sizeA)};