Fix close button of the notification does not work and modernize notification pop up

[thessakranendonk]

PR for issue #284 : The close button of the notification does not work

• Fixed not closing of alert notification button.
• Added a new Popup.jsx component that looks more modern and is more prominent on the page. This popup looks more like a modal and makes the background of the page slightly darker when the notification pops up. Please let me know if this component would be a good replacement for the current notification or if there are any UI improvement suggestions..
• In Issue 284 there was some discussion of removing the closeable prop but I think this prop is useful here. If the prop is passed to the component it will automatically close a notification after a certain timeframe without the user having to click the close button. Personally I don't like having to close popups by mouse click only and therefore I think this prop should stay.

Before:

After:

[jennydaman]

Hey @thessakranendonk this is impressive. I will review the design first and then peek at your code in a later comment.

Before implementing changes to design or other major features, I recommend doing mock-ups first so that we can discuss before investing effort.

The most striking design element to discuss here is color choice, but also we can talk a bit about border radius and iconography. The ChRIS project uses the Patternfly v4 design language and you should refer to its specification here:

https://www.patternfly.org/v4/guidelines/colors

• The colors are attention seeking, but I don't think they fit Patternfly's color palette.
• I don't think these notifications are important enough to warrant dimming the screen plus a popup.

You've done a lot to make the popups as noticeable as can be, but it comes at the tradeoff of a cohesive design language.

IMO header bars should not be used on pop-ups. Header bars are implemented for window managers of desktop operating systems for reasons such as providing a handle for window placement, displaying windows buttons such as close, and the window title. Here, there is only one functionality (providing space for the close button) so the header bar is wastefully taking up a lot of space (with a striking color).

For more information about header bars, my favorite design spec for them is the GNOME HIG. https://developer.gnome.org/hig/patterns/containers/header-bars.html

[jennydaman]

Tagging @mairin, you are always welcome to chat with us about design in #chris-frontend:fedora.im

[thessakranendonk]

@jennydaman thank you for your feedback!! I will have another look at this and make some changes. Very helpful! Thank you!