Feature: replace tab component on insights hub

[isabensusan]

Type of feature

🍕 Feature

Current behavior

We've gotten user feedback for the tab component on the insights hub that allows users to navigate insights and lists. Because of the greyed out look of the inactive tab, users get confused and think that the inactive option is disabled.

Suggested solution

Replace the tab component with either the tab component we use everywhere else on the site, or a better one if needed/available.

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Contributing Docs

• [X] I agree to follow this project's Contribution Docs

[github-actions[bot]]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[getaheaddev]

Here is the updated design.

https://www.figma.com/file/OpVX6WT7dmWqnwRuEvADMF/Design-Lab?type=design&node-id=11853-10492&mode=design&t=cXIc6g6qkpLGW6Ar-4

Could you take a look at this @nickytonline and @OgDev-01 ?

It should be straight forward cause we're just replacing the component with the one we already have

[nickytonline]

Thanks for the updated design @getaheaddev. I've spoken to @isabensusan about this before but we currently have some colour contrast issues in various parts of the app. I just tested the design and it doesn't appear to pass the colour contrast check.

Can we darken a non-selected tab's foreground colour a bit, or can it be the same as the selected tab's foreground colour (given we have an indicator via the orange line to show which is active)?