Playground: `Seeing something inappropriate?` hint doesn't go away after reporting

[OnkarRuikar]

Steps to reproduce

1. Go to developer.mozilla.org/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ
2. Notice the message Seeing something inappropriate? in output area.
3. Click the message which will bring up the report dialog.
4. Close the dialog by clicking Report, Cancel, or x button. Or click anywhere outside the dialog to remove it.
5. Notice the original Seeing something inappropriate? message doesn't go away.

Expectations

The report hint banner should go away immediately before/after opening the dialog. It shouldn't matter which way the dialog got closed the hint banner should go away.

Actual

The report banner doesn't go away.

[caugner]

I don't think the "Seeing something inappropriate?" hint should disappear in any of those cases. It would reappear on reload.

Overall, this seems to add unnecessary complexity.

[caugner]

In Yari, this was shown as a link above the output box:

In Fred, this was implemented in #386, but although the PR description states that it "Replicates the behaviour from yari", it doesn't replicate the design.

@mdn/content-team Should we revert the design of the report link to how it looked in yari, to avoid confusion with the output?

[OnkarRuikar]

I don't think the "Seeing something inappropriate?" hint should disappear in any of those cases. It would reappear on reload.

Shouldn't it go away at least after you've actually completed the reporting? If they want to report another issue, they can reload the page.
In the current state, the banner takes up a good chunk of space at the top. A close button would be great when people don't want to report and want to reclaim the output space. The old design took less space.

---

Also, the current design doesn't indicate to the users that the banner is supposed to be clicked. Because it doesn't appear as a button or a hyperlink. The old design looks better in this regard.

[pepelsbey]

I think it should definitely:

• Not look like a part of content
• Look like a button

The whole thing should probably look like this:

• Borders only around fields and the result
• Clear button with an icon that suggests the action

And maybe in this case, when it’s a part of the outer UI, you won’t need it to disappear after the report is sent.

@Rumyra what do you say?

[Rumyra]

I think this is a good solution 👍

[brysonbw]

Pushed changes to PR (#892) to match @pepelsbey reference (image). Kept the border around the playground editor action menu but if we don't want that then I can push change to remove as seen in reference, all smooth. Also, any other feedback would be smooth