Team pick icon + ratings

[speedyman08]

[speedyman08]

This is how the new tooltip looks like. Thoughts?

[jvyden]

I think it looks good, but I don't like the implications of the CSS behind it.

[speedyman08]

I've gotten it working under tailwind. Just a few issues though:

1. the font is incorrect so i have to use font-family to correct it to Rubik
2. for some reason every space that is in the span acts as a newline, and i'm not sure on why that is happening. i didn't mess around with white-space fixed after adding white-space: nowrap;

[speedyman08]

2023-09-12.19-33-26.mp4

[speedyman08]

The tooltip can now be used anywhere now. To use it, add a 'tooltip-container' class to an element, and add the 'tooltip' component as a child to it. Also, the width is not hardcoded anymore.

[jvyden]

A lot better, just nitpicks at this point

[jvyden]

The font not automatically applying is definitely unintentional behavior so I'll look at it when I get a chance. Ideally there should be 0 CSS rules like the rest of refresh-web.

[jvyden]

Removing the request for review since my previous review pass still holds for now.

As a side-note, apologies for the delay. Haven't been feeling well the past couple of days but things have been steadily improving, and this PR should hopefully speed up now 😁

[jvyden]

I made some changes so it's easier to use from an HTML standpoint, and I'm now pretty happy with how this turned out. I think there's some design changes to be made (e.g. shadowing & better contrast in general) but this can be addressed later after I've played around in Figma enough.

Apologies for the long review process and the dramatic changes necessary it took to get here, but regardless, thank you for the contribution!