From 0c8d251585a70eb77229acb6a788fd8e3a701f7c Mon Sep 17 00:00:00 2001
From: Daniel Gamage <hello@danielgamage.com>
Date: Fri, 4 Dec 2020 03:10:35 -0500
Subject: [PATCH] checkpoint

---
 src/components/app/TrackSettings.jsx      |  2 +-
 src/components/visualizers/RadialKeys.jsx |  2 +-
 src/utils/keyboard.js                     | 55 ++++++++++++-----------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/app/TrackSettings.jsx b/src/components/app/TrackSettings.jsx
index b1e7942..ce6aa79 100644
--- a/src/components/app/TrackSettings.jsx
+++ b/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>
 
diff --git a/src/components/visualizers/RadialKeys.jsx b/src/components/visualizers/RadialKeys.jsx
index 473b386..4fa290c 100644
--- a/src/components/visualizers/RadialKeys.jsx
+++ b/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 {
diff --git a/src/utils/keyboard.js b/src/utils/keyboard.js
index 86ca0e0..17d8014 100644
--- a/src/utils/keyboard.js
+++ b/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)
+}