[EASI-4549] System workspace "Team" card

[adamodd]

EASI-4549

https://www.figma.com/design/z8GeZPDfIh9oKfHK1cX7Fo/System-centric-EASi?node-id=4239-8187&t=b9iFjrGAECM00YdC-0

Description

• New SystemWorkspace/TeamCard
• Sort the team member roles by teamRolesIndex
• Lifted Avatar from Mint
• Button will link up in later tickets

How to test this change

• Unit test snapshot with the rendered team list
• Seed and launch local dev
  • View a system in My Systems
    • Select a system to see the Workspace page with the new TeamCard

PR Author Checklist

• I have provided a detailed description of the changes in this PR.
• I have provided clear instructions on how to test the changes in this PR.
• I have updated tests or written new tests as appropriate in this PR.

PR Reviewer Guidelines

• It's best to pull the branch locally and test it, rather than just looking at the code online!
• When approving a PR, provide a reason why you're approving it
  • e.g. "Approving because I tested it locally and all functionality works as expected"
  • e.g. "Approving because the change is simple and matches the Figma design"
• Don't be afraid to leave comments or ask questions, especially if you don't understand why something was done! (This is often a great time to suggest code comments or documentation updates)
• Check that all code is adequately covered by tests - if it isn't feel free to suggest the addition of tests.

[aterstriep]

We have an existing InitialsIcon component that we use in a couple of other places. Can you update those instances to use Avatar instead since the ticket says users should have the same color across the app? That way we can go ahead and remove InitialsIcon so we don't have two mostly duplicate components.

[adamodd]

Okay didn't notice that. Avatar has the new colors we want? And swapping out InitialsIcon is probably good to go?

[adamodd]

I just went for it. The only thing I caught was this font-body-2xs difference

easi-app/src/components/shared/InitialsIcon/index.tsx

Line 58 in f8ed3d2

`easi-initials-icon display-flex flex-align-center flex-justify-center font-body-2xs circle-4 ${colorClass}`,

Not sure if it should've stayed. If so looks ready to pass back in.

[aterstriep]

Good idea to bring this up into a util function 👍🏻

[aterstriep]

Changes look good 👍🏻