diff options
| -rw-r--r-- | website/sandbox/learnpianochords/src/Practice.elm | 19 |
1 files changed, 13 insertions, 6 deletions
diff --git a/website/sandbox/learnpianochords/src/Practice.elm b/website/sandbox/learnpianochords/src/Practice.elm index e92b163920ab..5d87bcee501e 100644 --- a/website/sandbox/learnpianochords/src/Practice.elm +++ b/website/sandbox/learnpianochords/src/Practice.elm @@ -7,6 +7,7 @@ import Html.Events exposing (..) import Icon import Piano import State +import Tailwind import Theory import UI @@ -32,11 +33,6 @@ render model = in div [] [ openPreferences - , UI.overlayButton - { label = buttonText - , handleClick = handleClick - , isVisible = model.isPaused - } , case model.selectedChord of Just chord -> FlashCard.render @@ -45,7 +41,18 @@ render model = } Nothing -> - span [] [] + -- Here I'm abusing the overlayButton component to render text + -- horizontally. I should support a UI component for this. + UI.overlayButton + { label = "Get ready..." + , handleClick = State.DoNothing + , isVisible = True + } + , UI.overlayButton + { label = buttonText + , handleClick = handleClick + , isVisible = model.isPaused + } , Piano.render { chord = model.selectedChord , firstNote = model.firstNote |