Feature/color coded method cards

[NoWarries]

Description

While browsing the website, I noticed that it can be challenging to differentiate between the various categories. I decided to quickly write something up for this. And although this implementation certainly isn't my best work. I think it is a good starting point for the ongoing color discussion #171

MethodCards now have category-based colors making it easier for users to distinguish and organize the methods. Enhancing visual clarity and simplifying navigation. To avoid visual conflicts with these colors, the former purple tags adapt with these colors. The method tabs color also match the category color for a harmonized color scheme.

Examples

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

WCAG SC 1.4.3

The current implementation utilizes color codes that closely resemble those used in the card sets. However, this design choice has resulted in some text elements, particularly in the showroom, being challenging to read. We should consider using more legible alternatives.

Reference: colors used in the table on https://oud.ictresearchmethods.nl/Methods

Primary

It appears that the primary color used in the application clashes with the theming based on method categories. The purple hue is quite reminiscent of lab colors, which can create a conflicting visual experience.

[netlify[bot]]

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

Name	Link
🔨 Latest commit	b619bc96b50ef4e6ad4b5df22a4a7ef435e7fcf0
🔍 Latest deploy log	https://app.netlify.com/sites/stellular-banoffee-031bf4/deploys/652e93d93483ed0008b5e02f
😎 Deploy Preview	https://deploy-preview-177--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	b619bc96b50ef4e6ad4b5df22a4a7ef435e7fcf0
🔍 Latest deploy log	https://app.netlify.com/sites/test-ictresearchmethods/deploys/652e93d94719970008d9f698
😎 Deploy Preview	https://deploy-preview-177--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]

Hi @NoWarries, thank you! Very nice addition, like it. Could you also add it to the buttons on the Patterns page?

I'll have a look at the primary color on dark mode. I agree it's conflicting with the Lab color. Thanks!

[NoWarries]

@jochemvogel added color theming for tags on pattern navigator page

[NoWarries]

Q1: Why doesn't the pattern navigator page use the existing tag component? Should/can we consider this?

Q2: Currently, the tag component has a white border (this is because the border color has now been replaced with a background with white text). What is desirable?

[NoWarries]

Q1: Why doesn't the pattern navigator page use the existing tag component? Should/can we consider this?

Q2: Currently, the tag component has a white border (this is because the border color has now been replaced with a background with white text). What is desirable?

I suggest the following: https://github.com/HBO-i/ictresearchmethods.nl/pull/177/commits/4e567ba2d1ace6917f04c2e8acb01b806095d4a0

[jochemvogel]

Q1: Why doesn't the pattern navigator page use the existing tag component? Should/can we consider this?

Q2: Currently, the tag component has a white border (this is because the border color has now been replaced with a background with white text). What is desirable?

Q1: Was easy to re-use. No idea behind it.

Q2: Current design is good. I like to removed border, thanks.