Added Toast Messaging capabilities to the app

[jupiter007]

Description

I made sure to position the toast messages differently for desktop and mobile. The locations can always be adjusted.
We can pass the keys 'info', 'success' and 'error' to the toast message to get different colors.
The width of the toast message fits the text up to 50% of the screen width currently. This is all totally adjustable, and we can change it later if we feel the need.

• Installed @react-aria/toast and @react-stately/toast packages
• Added a ToastContext that allows us to manage the toast state
• Added a Toast Region which contains the Toast component and uses the role ‘landmark region’ for accessibility
• Added a Toast component that contains the code for the actual toast messages
• Updated style guide with Toast messages
• Added toast styles for info, success and error to _messages.scss
• Added colors for messaging to globals.scss and to style guide

Fixes # (211)

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested this manually.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I updated the CHANGELOG.md and added documentation if necessary
• I have added tests that prove my fix is effective or that my feature works
• I have completed manual or automated accessibility testing for my changes
• New and existing unit tests pass locally with my changes
• [NA] Any dependent changes have been merged and published in downstream modules

Toast Messaging demo

For smaller devices, the toast message should display towards the bottom of the screen, and for larger devices towards the top of the screen.

Screen.Recording.2025-01-09.at.8.34.20.AM.mov

[briri]

LGTM

[fraserclark]

Looks great @jupiter007

[jupiter007]

Looks great @jupiter007

Thanks @fraserclark