Resolve "Visual bugs in the "add a rotation" modal"

What does this MR do and why?

Describe in detail what your merge request does and why.

Assigns colors to each user in the frontend instead of expecting the colors from the backend as previously.

• Each rotation now individually assigns colors in as per order of participants
• Historic shifts attributed to no longer active participants are assigned a gray color background
• Rename utils and variables to better distinguish between shift colors and shift length styling
• Rename utils and variables for token color data
• Combine color assigning utils for tokens and shifts
• Change mock data in tests so that shift participants and rotation participants match with each other

Important UI note: Token-Selector was updated recently to center align tokens, so there is a visual difference not related to these changes merge request !2872

Screenshots or screen recordings

These are strongly recommended to assist reviewers and reduce the time to merge your change.

	before	after
each rotation is colored individually on render (notice that every rotation starts from the color blue)
previous shifts by no longer active participants grayed out

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Open a project where you are at least a maintainer and at least Premium is activated
2. On the left menu bar select Monitor->On-Call Schedules
3. Add a schedule
4. Add a rotation with at least 2 participants

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #344950 (closed)