Show confirmation dialog before stopping test

[sarathms]

Fixes ooni/probe#1205

I used the same style we use in the onboarding screens. I tried using the buttons from our design system, but dropped it later.

Also fixes the bug where the currently running test name wasn't being shown.

[hellais]

We should be using a different modal styling for this.

The pattern for the modal in the onboarding is specific for the quiz.

Here is what needs to change:

• Invert the buttons to have OK on the right and cancel on the left.
• Make the background color of the modal be white
• Primary button (OK) should be blue background with white text, secondary button (cancel) should be blue on white
• Text should all be black

The copy also is a bit weird. Did @agrabeli review it?

[hellais]

Here is a quick mockup of how it should look like:

Important things to keep in mind for the implementation:

• Adding shadow around the modal box to give sense of depth
• Ensure that the tap target around the cancel button is as bug as the OK button and it highlights when mouse over (i.e. it's actually a button with a white background and blue text, like the other one)

[sarathms]

Are we not using the Button style from ooni-components?

[hellais]

Are we not using the Button style from ooni-components?

Yes, if you already have a button component, use that.

[hellais]

As mentioned in my previous comment:

• Invert the buttons to have OK on the right and cancel on the left.
• Make the background color of the modal be white
• Primary button (OK) should be blue background with white text, secondary button (cancel) should be blue on white
• Text should all be black
• The copy also is a bit weird. Did @agrabeli review it?

[hellais]

This is starting to look good.

One minor thing which should be fixed is the mouse-over on the close button:

It should not have that blue box around it, but should rather just become a darker X.

[sarathms]

Replaced with a custom one with pointer cursor and light color change on hover.

[hellais]

This looks great!

For me it's good to go!

🐳