Design activity card

[brrkrmn]

Summary

The activity component is redesigned according to the new proposed design .

Closes #1090

Changes

• If there are multiple creators of an activity, their avatars get stacked in the card. 3 creators get stacked at most, after which the number of remaining users are displayed in the last avatar. On desktop, overlapped avatars get separated on hover (see video in the section).
• Category section is separated into its own component, using MUI Chip component. Each category has a unique background color that is accessed from the colors.js file.
• The introduction of activity is displayed under the title.
• User's tag is placed under the username.

Screenshots

Desktop

Mobile

Multiple Creators Demonstration

Screen.Recording.2024-01-29.at.1.06.51.PM.mov

[NdibeRaymond]

@brrkrmn what happens if we have much more creators (maybe 10 or more)? can you attempt this and make a video so we see how the hover effect works in that case?
Wondering if it will overflow or wrap. This should also be addressed in the design, was it?

[NdibeRaymond]

in the future we might want to move all our colors into this file (you can create a task for this if you want)

[NdibeRaymond]

needs rebase

[github-actions]

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

[brrkrmn]

@brrkrmn what happens if we have much more creators (maybe 10 or more)? can you attempt this and make a video so we see how the hover effect works in that case? Wondering if it will overflow or wrap. This should also be addressed in the design, was it?

It'll look like what we have for +3 creators, showing 3 circles at most and indicating the number of the remaining creators. Like this:

Screen.Recording.2024-02-29.at.2.04.57.PM.mov

This will only be applicable when the 'team' feature is made available. I'm not sure how teams are going to look exactly but if they have their own avatars, we can use the name and avatar of the team instead of showing all the creators in the activity card. And then we can show all creators in detail in the team's page or activity details page. In that case, we should have a larger section for the creators to be able to show this many.

[github-actions]

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

[github-actions]

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

[github-actions]

pre-commit checks failed ❌❌❌
make sure you have pre-commit set up locally (see the README.md for instructions).
If you have set up pre-commit locally, you may need to undo this commit and
run "pre-commit" locally to see what the errors are.

[github-actions]

All pre-commit checks passed ✅✅✅

[NdibeRaymond]

@tuxology this has been rebased so we can focus on testing before merging to staging

[github-actions]

All pre-commit checks passed ✅✅✅