PrestakingWelcome: implement designer feedback

[mraveux]

The prestaking welcome page now behave like an “instagram story” or something the like.

[julianbauer]

Nice! Some minor feedback :)

• "Let's go button should alread be active. I like that it's not so prominent in the first steps, but can we make it stand out a little more? Let's use the secondary-button colors here: white 10% as background, white 100% for button text
• The progress bar should always run, unless you're on the last step and finished. Right now, when navigating back it stops sometimes.
• Mousedown (and similar for touch) should pause the progress bar – mouseup start it again
• Love the added next/previous hint!

[mraveux]

The progress bar should always run, unless you're on the last step and finished. Right now, when navigating back it stops sometimes.

About that, it's actually an intended behavior. If you go back it will pause, if you go next it will have a timer. Comes from the idea that if you go back it's to take your time to read, so it would imo be meaningless to have the timer start again. Unless we implement the mousedown/mouseup feature to pause, but...

If I add the Mousedown to pause / Mouseup to continue, then we imo should have something to also hint this behavior, otherwise users may just not know about it and there would be no visible way to pause on a slide, thus lower the user experience.

[julianbauer]

This is how the instagram behaviour works, and I'd love to mimick this as much as possible, as it's by now not just a pattern used by instagram but by other apps too and lots of people are able to intuitively use it.

That said, I'm okay with not letting the timer run when you go back to a previous step, as long as we introduce the mousedown/mouseup feature. It's a discoverable feature, so no need to hint at it

[mraveux]

The "let's go" button disabled style has been updated, and the pause feature implemented while trying to avoid any conflicts with the next/previous arrows as well as the swipe left/right feature on mobile. The branch selector has been updated with the latest state.