fix: Contributor Confidence styling

[zeucapua]

Description

Various styling fixes and changes to the ContributorConfidenceChart component

• Force half circle for confidence percentages above 50%
• Gauge percentage label styling changes
• Description text sizing for mobile
• Change the Learn More link to the Contributor Confidence docs

Related Tickets & Documents

Closes #3564 Closes #3558 Closes #3571

Mobile & Desktop Screenshots/Recordings

Various sizes (large, medium, small screens respectively)

Steps to QA

1. Go to any repo page

2. Check the Contributor Confidence chart in various screen sizes

[netlify[bot]]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	a57b4444ef8450807db921f53195167d04769948
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6670a3e8a6c7440008088b38
😎 Deploy Preview	https://deploy-preview-3572--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	a57b4444ef8450807db921f53195167d04769948
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6670a3e8bfd0b40008ac0068
😎 Deploy Preview	https://deploy-preview-3572--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nickytonline]

This renders well, but given it's a half circle, I think we'd need to have the percentages visually halved (not the percentage text).

[bdougie]

I think we'd need to have the percentages visually halved

I think I understand but I don't @nickytonline. Can you clarify?

[nickytonline]

I think we'd need to have the percentages visually halved

I think I understand I don't @nickytonline. Can you clarify?

For example, looking at 40% in this screenshot, it looks like it's 80% of the half gauge instead of 40%

But again this is just for the bar. The number should still stay at 40%.

[zeucapua]

I thought we decided this in the original contributor confidence PR, see @jpmcb's comment here: https://github.com/open-sauced/app/pull/3545#discussion_r1633987143

[jpmcb]

looking at 40% in this screenshot, it looks like it's 80% of the half gauge instead of 40%

This is an explicit design decision we made: i.e., 40% is about as high as you'd ever see. Just like with a speed gauge, or a RPM gauge on an engine, the "sweet" range is really only like 30-50% of the actual range of the gauge. You'd never want your RPM gauge on an engine to go all the way to 100%, that would be a problem.

40% in this context is "green" and would be a desired range.

[nickytonline]

looking at 40% in this screenshot, it looks like it's 80% of the half gauge instead of 40%

This is an explicit design decision we made: i.e., 40% is about as high as you'd ever see. Just like with a speed gauge, or a RPM gauge on an engine, the "sweet" range is really only like 30-50% of the actual range of the gauge. You'd never want your RPM gauge on an engine to go all the way to 100%, that would be a problem.

40% in this context is "green" and would be a desired range.

OK, all good. Didn't realize that was decided @zeucapua and @jpmcb. I'll go ahead and approve.

[bdougie]

I am on BART and missed a lot of this conversation.

What is missing in this context is "40% of the people who engage with the repo make contributions."

That is what confidence identifies and this will make more sense when we ship more of the story. But for now let's ship to learn.