Fix(ui): Polish V2 scoreboard and detail pages #358
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description:
This PR depends on #357. It addresses several UI/UX issues to polish the new V2 scoreboard feature, based on recent testing and feedback.
Changes Implemented:
Fixed Top 3 Card Readability in Light Mode:
TopTeamCard
component to ensure text color is always readable against the card's background, in both light and dark modes.Rendered HTML in Challenge Descriptions:
<p>
,<code>
) were displaying the raw tags instead of rendering them as formatted text.ChallengeDetailPageV2
component to use React'sdangerouslySetInnerHTML
prop for the description field. This correctly renders the intended formatting. We also added Tailwind'sprose
classes to ensure the rendered HTML is styled consistently.Displayed Top 3 Teams in Both Cards and Table:
ScoreboardV2Page
to map over the full list of teams for the table, ensuring that the top teams are represented in both the cards and the table for a more consistent and complete view.These changes improve the visual quality, readability, and consistency of the new V2 scoreboard pages.
How to Test Manually:
task dev
./v2
scoreboard, switch between light and dark mode. The text on the Top 3 cards should always be clearly readable./v2/challenges/leakedApiKeyChallenge
). The description should now be properly formatted./v2
scoreboard, verify that the top 3 teams appear both in the cards at the top and as the first three rows in the main table.