Alerts in the React client do not use absolute positions

[joshprzybyszewski]

Alerts should appear and hover onscreen over content. Currently, this appear on screen, shift everything down, disappear, and shift everything up.

[cszczepaniak]

Okay here's how it could look - you can see that we run the danger of covering up content with alerts. We can of course provide more top margin for the content, but given enough alerts, the user will be able to cover things up eventually. So should we:

1. Allow that to happen or
2. Only show the latest alert (and then we know that the space allocated to alerts will always be fixed)

I think I'm leaning towards only showing the latest alert. What do you think @joshprzybyszewski?

[joshprzybyszewski]

I think we shouldn't be alerting that often, so showing "infinite alerts" is better than anything else. Obviously, I'm not a UX person, but I think there's a few places for improvements:

1. Alerts only get one-third of the screen width max (instead of the whole screen)
2. Alerts appear in the bottom right (or left) instead of right along the top (to minimize distraction). Obviously, if it's an "error" we could show it along the top.
3. Only ever allow at most 5 alerts on screen on a time. That is, if each alert stays on screen 5s and the app sends 8 alerts at once, then we'll show 5 alerts immediately, let them timeout at 5s, then show the next 3 alerts.

[cszczepaniak]

Actually, now that I think about it...

• We don't need an alert for a successful login or registration probably, since it'll be obvious when the user is redirected and greeted. Actually, it may end up that errors/warnings are the only alerts we need?
• For errors, I think it's probably good design to have them be very obvious, i.e. at the top as you mentioned.
• I put all alerts at the top since I feel like I've seen it done that way. I should find a concrete example of that. I also think of "toast" type alerts that I've seen in the top left or right corner of a page which would be another option. At the end of the day, I think I'll just have to implement a few things and see what looks best.
• I'll need to spend some time implementing point 3 above (it'll be some non trivial state management)