Highlight root note of each chord

Refactor the Piano component to highlight the root note of each chord. If this
makes things too easy, I can support this as a preference.

Also:
- Reduced the number of keys that the piano displays and increased the key
  thickness to reclaim the space
- Preferred using Tailwind selectors instead of inline styling where applicable
- Call List.reverse on the keys to ensure that the top-most note is a lower note
  than the bottom-most note

TODO:
- Support showing only the name of the chord and not just the notes that
  comprise that chord
- Rewrite the function that generates the chords for a given range of notes
- Consider supporting a dark mode

1 files changed, 3 insertions, 3 deletions

diff --git a/website/sandbox/learnpianochords/src/Practice.elm b/website/sandbox/learnpianochords/src/Practice.elm
index c0f5ffcfded0..86977859b85b 100644
--- a/website/sandbox/learnpianochords/src/Practice.elm
+++ b/website/sandbox/learnpianochords/src/Practice.elm
@@ -37,8 +37,8 @@ render model =
             , isVisible = model.isPaused
             }
         , Piano.render
-            { highlight = model.selectedChord |> Maybe.andThen Theory.notesForChord |> Maybe.withDefault []
-            , start = model.firstNote
-            , end = model.lastNote
+            { chord = model.selectedChord
+            , firstNote = model.firstNote
+            , lastNote = model.lastNote
             }
         ]