-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix close button of the notification does not work and modernize notification pop up #314
base: master
Are you sure you want to change the base?
Fix close button of the notification does not work and modernize notification pop up #314
Conversation
…disappears when a user clicks anywhere on the screen
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
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 |
Tagging @mairin, you are always welcome to chat with us about design in #chris-frontend:fedora.im |
@jennydaman thank you for your feedback!! I will have another look at this and make some changes. Very helpful! Thank you! |
PR for issue #284 : The close button of the notification does not work
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: