fix(playground): overlay run button for shared playground

[OnkarRuikar]

• fix Improve discoverability of "Run" action for Playground links #665

Description

Need a prominent Run button on canvas for shared playgrounds because the shared code could be untrustworthy.

Motivation

In the current state it is not apparent that users are supposed to click run button to get the output and begin autorun for the shared playgrounds.
It was requested to have big button spanning the entire canvas.

@OnkarRuikar that's ok, but given how unusual it is to look at a playground and not see the result, I feel this will be the likely first interaction on the page, so it need to be big and cover the canvas, and be easy to resolve.

Additional details

For testing used this link: http://localhost:3000/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

After changes UI:

runButton.mp4

Related issues and pull requests

#665

[LeoMcA]

I like the implementation, I think the design could be a little better - could we use the same icon we use in the top nav next to the playground link, obviously a little bigger, so it's almost like a video play icon overlay?

[OnkarRuikar]

could we use the same icon we use in the top nav next to the playground link,

Done. Used the circle-play icon.

obviously a little bigger,

Made the size bigger and responsive.

so it's almost like a video play icon overlay?

We play videos and run code so shouldn't it be called "MDN Runground"? 🤔
To not give false impression of existence video content in the output, can we use " ▶ Run" instead of just the icon?

playRun.mp4

[LeoMcA]

Let me... "Run" this past our content team and see what they think

[caugner]

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

[OnkarRuikar]

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

"Risk of pressing run", we don't want to scare users so much that they won't even run the code. We already have report banner at the top, how about we reword it like the following?

[github-actions]

bf48e08 was deployed to: https://fred-pr712.review.mdn.allizom.net/