Command Popup using wrong color

[SporyTike]

Describe the bug
It seems like that under certain criterias the command popup that informs the user that some action was done or not able to be done uses the wrong color. I noticed the error related to the "429 Too Many Requests" warning, I can't say for sure if others cause the same issue since I don't know how to create those.

Wrong color when clicking the "Want to Play" button after getting error 429 popup:

Correct color when clicking the "Want to Play" button without getting error 429 popup:

To Reproduce
Steps to reproduce the behavior:

1. Open many different game pages and get one that opens the page with a "429 Too Many Requests" warning instead of loading an error 429 webpage. I usually go to a hub and CTRL + Click different games.
2. Click on 'Want to Play'.
3. The popup stays red (reappears in red when it was closed) when it should be green to indicate a successful action.

Expected behavior
Since the action was successfully completed, the popup should be green.

[Alexdatadestroyer]

As far as I could notice and if I am not mistaken, any Popup message like this follow these 2 criteria:

• Permanent ones: Like when you submit a formulary by posting comments, adding information and etc (which are taken in effect after page reload). Error messages are usually permanent too.
• Flash ones: Like when you star a set, delete a comment, update a leaderboard or badges on Site Awards on Settings page.

Since "429 Too Many Requests" is a server error message, then, it fits on first case being a permanent one being stuck on top. Then, any other flash message that comes will keep the color regardless of the success of the operation.

On my case, this happened when I 5-starred a set after getting another server error or another exception message like "Invalid image size" and so. The "OK" message was shown in red instead of green color. I forgot to take a screenshot of it, but the behavior was exactly that one pointed by @SporyTike above.

If you reload the page, that exception message will be gone. So, the success message will appear normally.

Not sure if this can help, but worths to report.

[wescopeland]

I wish we had a way of building these client-side toast notifications that was not coupled in any way to the page layout. Something like https://react-hot-toast.com/.

[wescopeland]

#2624 adds Sonner to the project, which will ultimately resolve this issue.