Download / Upload toasts notifications overlap each other

[asnaith]

Description
Upload / Download toast modal dialogs overlap and do not stack on top of each other

Steps to Reproduce

1. Login to Files
2. Start the download for a file (choose a large sixe file so the toast is present for long enough)
3. As one file is downloading start uploading a large file

Observed behavior
The toasts are displayed in the same area so one overlaps the other when both actions are being performed at the same time

Expected behavior
The toasts should stack so that both are readable to the user

Video

Untitled.mov

Desktop:

• OS: macOS
• Browser: Chrome
• Version : 92.0.4515.107

[FSM1]

We should make sure that all toasts originate in the bottom right, Use a common ToastsContext.tsx to render all types of toasts - Confirmation, Progress, Error, etc.

Investigate if there are any suitable libraries we can use, that can handle all the required functionality.

Must be able to add test-id

[FSM1]

Hey team! Please add your planning poker estimate with ZenHub @RyRy79261 @Tbaut @tanmoyAtb