checkpoint

src/components/app/TrackSettings.jsx

@@ -324,7 +324,7 @@ class TrackSettings extends Component {
           enterAnimation={customEnterAnimation}
           leaveAnimation={customLeaveAnimation}
         >
-          <Text type="h3" key="title" style={{ color: vars.grey_4 }}>
+          <Text type="h3" key="title">
             {el.title}
           </Text>
 

src/components/visualizers/RadialKeys.jsx

@@ -34,7 +34,7 @@ const StyledRadialKeys = styled.div`
     }
   }
   circle.tick {
-    fill: var(--bg-deep);
+    fill: var(--bg-recessed);
     stroke-dasharray: 2 3;
   }
   path.spiral {

src/utils/keyboard.js

@@ -1,42 +1,45 @@
-import keySteps from "data/keySteps";
-import { keys } from "utils";
-import { stopNote, startNote } from "utils/notes";
+import keySteps from "data/keySteps"
+import { keys } from "utils"
+import { stopNote, startNote } from "utils/notes"
 
 //
 // Keyboard
 //
 
-let octave = 3;
+let octave = 3
 
-const onKeyDown = event => {
-  if (keySteps.some(keyStep => keyStep.code === event.keyCode)) {
-    const steps = keySteps.filter(keyStep => event.keyCode === keyStep.code)[0]
-      .step;
-    const note = keys[steps + 2 + octave * 12];
-    startNote(note);
+const onKeyDown = (event) => {
+  if (keySteps.some((keyStep) => keyStep.code === event.keyCode)) {
+    const steps = keySteps.filter(
+      (keyStep) => event.keyCode === keyStep.code
+    )[0].step
+    const note = keys[steps + 2 + octave * 12]
+    startNote(note)
   }
-};
+}
 
-const onKeyUp = event => {
+/** @todo use key or code, but not keycode */
+const onKeyUp = (event) => {
   if (event.keyCode === 90) {
     // z
-    octave = Math.max(--octave, 0);
+    octave = Math.max(--octave, 0)
   } else if (event.keyCode === 88) {
     // x
-    octave = Math.min(++octave, 5);
-  } else if (keySteps.some(keyStep => keyStep.code === event.keyCode)) {
-    const steps = keySteps.filter(keyStep => event.keyCode === keyStep.code)[0]
-      .step;
-    const note = keys[steps + 2 + octave * 12];
-    stopNote(note);
+    octave = Math.min(++octave, 5)
+  } else if (keySteps.some((keyStep) => keyStep.code === event.keyCode)) {
+    const steps = keySteps.filter(
+      (keyStep) => event.keyCode === keyStep.code
+    )[0].step
+    const note = keys[steps + 2 + octave * 12]
+    stopNote(note)
   }
-};
+}
 
 export const bindKeyboardEvents = () => {
-  window.addEventListener("keydown", onKeyDown);
-  window.addEventListener("keyup", onKeyUp);
-};
+  window.addEventListener("keydown", onKeyDown)
+  window.addEventListener("keyup", onKeyUp)
+}
 export const unbindKeyboardEvents = () => {
-  window.removeEventListener("keydown", onKeyDown);
-  window.removeEventListener("keyup", onKeyUp);
-};
+  window.removeEventListener("keydown", onKeyDown)
+  window.removeEventListener("keyup", onKeyUp)
+}