Feature/183/alert component

[NoWarries]

Description

Closes #183

Added a concept Alert component for usage in for example the issue described in #183

Has several configuration options, easily scalable

Works alright on darkmode. Readable

Type of change

Please select the option that is relevant

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation

Checklist

• [x] I have commented my code, particularly in hard-to-understand areas.
• [x] All the required documentation is added.
• [x] My code follows the style guidelines of this project.
• [x] I have performed a self-review of my own code.

Additional information

Considerations

Placement

Not sure if this is the right place to put the alert box. Should it be added to more pages? Do we still need a sidenav item to resolve #183 #184

Do we even need this with the sidenav implemented?

Icons

I am not sure what icons are used (which libary). Thus I cannot add icons appropiate for the Alert. e.g. a checkmark on a success message. All use information icon for now

[netlify[bot]]

✅ Deploy Preview for stellular-banoffee-031bf4 ready!

Name	Link
🔨 Latest commit	e78e152bc74f00b029ed407372d506f553ce35e8
🔍 Latest deploy log	https://app.netlify.com/sites/stellular-banoffee-031bf4/deploys/65339bf7dbcf3a0007ee4065
😎 Deploy Preview	https://deploy-preview-185--stellular-banoffee-031bf4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for test-ictresearchmethods ready!

Name	Link
🔨 Latest commit	e78e152bc74f00b029ed407372d506f553ce35e8
🔍 Latest deploy log	https://app.netlify.com/sites/test-ictresearchmethods/deploys/65339bf78aeac10008c316a8
😎 Deploy Preview	https://deploy-preview-185--test-ictresearchmethods.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jochemvogel]

Thanks. Personally I don't agree with the prominent place the alert gets. I did it more subtle here (https://deploy-preview-184--stellular-banoffee-031bf4.netlify.app/)

I do think we can use this alert boxes on other routes:

1. https://ictresearchmethods.nl/research-pattern-navigator/
2. https://ictresearchmethods.nl/methods-overview/

Going to create a new version of the methods overview next week, so an alert, that the content might be more clear on the old site, might work for now.

Could you implement the info/blue one on top of those two pages. That will definitely help the user.

Thanks!

[NoWarries]

Thanks. Personally I don't agree with the prominent place the alert gets. I did it more subtle here (https://deploy-preview-184--stellular-banoffee-031bf4.netlify.app/)

I do think we can use this alert boxes on other routes:

1. https://ictresearchmethods.nl/research-pattern-navigator/

2. https://ictresearchmethods.nl/methods-overview/

Going to create a new version of the methods overview next week, so an alert, that the content might be more clear on the old site, might work for now.

Could you implement the info/blue one on top of those two pages. That will definitely help the user.

Thanks!

Honestly agree.

Will revert changes on the homepage so the component is isolated in the branch. Otherwise feel free to cherypick if deemed component could be useful

[jochemvogel]

Perfect! I've merged the other one. The additions on this MR might be very helpful for the users that prefer the old one.

Not planning to keep the wiki all the time, but collecting feedback from the users is very helpful to eventually remove the whole wiki.

[jochemvogel]

@NoWarries I was wrong. It's pretty nice to have those alert boxes on the main page. I added those and will merge it. You can adjust things if you want, but it's comparable with your initial design.