TeamCard refactor

[frzyc]

Describe your changes

Team cards currently only show the team name, and the 4 characters in the team.
However, it doesn't really tell which loadout/build the characters are using, which infers a lot of context in how the team is used.
The loadout and builds are only shown on hovering over each character.

This is an alternative layout for the teamcard, that shows all that data without the hovering barrier.

Additionally, remove the SqBadges in artifact/weaponcardpico. It was adding too much color and blocking out too much realestate on those tiny cards.

Issue or discord link

Testing/validation

Checklist before requesting a review (leave this PR as draft if any part of this list is not done.)

• I have commented my code in hard-to understand areas.
• I have made corresponding changes to README or wiki.
• For front-end changes, I have updated the corresponding English translations.
• I have run yarn run mini-ci locally to validate format and lint.
• If I have added a new library or app, I have updated the deployment scripts to ignore changes as needed

[github-actions]

[frontend] [Thu May 9 06:41:10 UTC 2024] - Deployed 9f4d16d to https://genshin-optimizer-prs.github.io/pr/2082/frontend (Takes 3-5 minutes after this completes to be available)

[frontend] [Thu May 9 06:42:49 UTC 2024] - Deployed cb8a8b9 to https://genshin-optimizer-prs.github.io/pr/2082/frontend (Takes 3-5 minutes after this completes to be available)

[frontend] [Thu May 9 06:46:39 UTC 2024] - Deployed 38c8c23 to https://genshin-optimizer-prs.github.io/pr/2082/frontend (Takes 3-5 minutes after this completes to be available)

[frontend] [Thu May 9 19:06:34 UTC 2024] - Deployed cabab95 to https://genshin-optimizer-prs.github.io/pr/2082/frontend (Takes 3-5 minutes after this completes to be available)

[Thu May 9 19:29:29 UTC 2024] - Deleted deployment

[nguyentvan7]

Shading comment
+
Should we make the team name+header a bit bigger? maybe 2 line tall? Kinda depends on if people identify teams via characters or name primarily maybe.

[frzyc]

Shading comment

What's a Shading comment?

[nguyentvan7]

oops didnt send it. the contrast on the bottom right of pico card is a bit bad, could we add some shading/shadow there or something?

[nguyentvan7]

I barely even notice this change tbh I was thinking something more like this (just changed backgroundcolor of sqbadge to #22)

[frzyc]

could tweak it later i guess, another option is to apply darker gradients at the topleft and bottom right corner (so there isnt a harsh rectangle line, which is what I'm trying to avoid)