search

cursive-team / connections

Cursive Connections
https://connections.cursive.team
3 stars 0 forks source link

Leaderboard UI #90

Closed stevenelleman closed 1 week ago

stevenelleman commented 1 week ago

This is approximately 95% of the Cursive Connections leaderboard design.

Design vs PR:

Screenshot 2024-10-18 at 2 15 05 AM image

*Note: the leaderboard positions are repeated because I was ensuring ties work. In the case of ties, the first rank + styling is shared between all tied users. Consistent order of tied users is not guaranteed.

Here are the discrepancies: (Note: 1-4 are labeled on the screenshot)

  1. The padding isn't correct. I wasn't able to reduce it. [removed a class, got a bit closer, still a tiny bit off]
  2. I wasn't able to figure out how to text-align: right the Total taps. [Solution: display: content, but this now center aligns the username]
  3. The gradient is incorrect. The gradient values from the designs were #7A74BC, #FF9DF8, #FB5D42, #FF0000 but when applied to linear-gradient() they don't look right. [figured out the right gradient]
  4. I did not include "them" because I didn't understand what it was doing. [Answered in standup, going to include this feature when I add the user profile link]
  5. I intentionally did not include the profile in this PR. I would prefer to deploy this, verify it works in prod, and then make the feature discoverable by adding the profile link.

Open question:

https://github.com/user-attachments/assets/d455012e-3ebe-4a30-8a12-c730fcb2a1cb

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
connections ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 19, 2024 9:19pm
stevenelleman commented 1 week ago

TODO: in the video there's an example of a long name overflowing off the screen. I need to update this so that name fades out (while keeping the tap count in the same position) instead.