Raised in discussion here #327 (comment)

Currently for form validation errors we validate input form field values and use the react-final-form library to display errors as black tooltips over the relevant field with the issue so the user can pinpoint what needs to be fixed.

But some notifications are shown in a paragraph at the bottom, such as in AccountImportOptions.js, (i.e. 'The passphrase was not recognized ..., etc) and TxForm.js (i.e. WARNING: The sender and receiver addresses are the same.).

We also have other kinds of notifications (i.e. RequireHealthOverlay currently shows connection notifications to a user via a modal, and in future we could introduce push notifications or similar)

We are adopting SUI components using Semantic UI and with styled-components as a standard.
Which of the following should we use? Could we just use toasters like Semantic UI Alert or similar for all notifications? Answer: Not for all notifications, see requirements mentioned in this thread

Semantic UI has:

• Messages https://react.semantic-ui.com/collections/message/#variations-info, including Info, Error, Warning, Success.
• Loading icon https://react.semantic-ui.com/collections/message/#types-icon.
• Nags https://semantic-ui.com/modules/nag.html
• React Semantic Toastr library https://www.npmjs.com/package/react-semantic-toasts
• Semantic UI Alert - https://diw112.github.io/semanticUiAlert/

Alternative notification libraries include:

• Noty Semantic UI Theme for noty.js needim/noty#332
• React Notification https://github.com/pburtchaell/react-notification
• Toastr https://codeseven.github.io/toastr/
• React Toastify https://www.npmjs.com/package/react-toastify