feat: make avatars clickable

[adam-strzelec]

Description

Make avatars on teams page clickable

Testing

• Go to the /{colony_name}/teams page
• Click the avatars on teams card
• After click, You should be redirected to contributors page with the relevant team filter applied

Diffs

New stuff ✨

• New stuff goes here

Add link for avatars inside TeamCard component

Resolves #31415

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

strzelec seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[mmioana]

Nice start on this PR @adam-strzelec 🎉

Everything works as expected, but I would appreciate if you can tackle my comment 🙏

Screen.Recording.2024-09-30.at.09.32.03.mov

[mmioana]

I would suggest refactoring this line, as the links might update and is not a reliable source of truth for the parameter we want to use

So my suggestion would be to add an extra property to the TeamCardProps either nativeId or searchParams
and then update the useTeams hook to include either the nativeId or

searchParams: {
  team: `${TEAM_SEARCH_PARAM}=${nativeId}`
}

and then use it here either as
search: ?${TEAM_SEARCH_PARAM}=${nativeId},
or
search: ?${searchParams.team},

[adam-strzelec]

@mmioana done 🙂

[iamsamgibbs]

Nice job on this @adam-strzelec ! Can confirm the avatars are linking to the correct page with the correct team filter. :)

Screen.Recording.2024-09-30.at.10.03.56.mov

However, this part of the original issue has been missed:

The hover state of the icons should show a highlighted border on individual avatars using the primary blue/400 color token.

When the component is hovered, the border on each of the icons should change to blue-400:

Please also address Ioana's code suggestion.

@iamsamgibbs done 🙂

[iamsamgibbs]

Thanks Adam! Can you also add the transition-colors class so that the border transitions in the same way as the other hover states on the site?

Screen.Recording.2024-09-30.at.11.39.39.mov

Screen.Recording.2024-09-30.at.11.39.51.mov

@iamsamgibbs done

[iamsamgibbs]

Nice one, this looks great now:

Screen.Recording.2024-09-30.at.12.36.24.mov

[mmioana]

Thank you for your changes and continuous effort @adam-strzelec 🥇

It all looks great now and behaves as expected 🎉

Screen.Recording.2024-10-01.at.18.38.28.mov