Skip to content

Fix(ui): Polish V2 scoreboard and detail pages #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

AyushRajSinghParihar
Copy link
Contributor

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:

  1. Fixed Top 3 Card Readability in Light Mode:

    • Problem: The text on the Top 3 scoreboard cards was difficult to read in light mode due to poor contrast.
    • Solution: Adjusted the Tailwind CSS classes on the TopTeamCard component to ensure text color is always readable against the card's background, in both light and dark modes.
  2. Rendered HTML in Challenge Descriptions:

    • Problem: Challenges with HTML tags in their descriptions (e.g., <p>, <code>) were displaying the raw tags instead of rendering them as formatted text.
    • Solution: Modified the ChallengeDetailPageV2 component to use React's dangerouslySetInnerHTML prop for the description field. This correctly renders the intended formatting. We also added Tailwind's prose classes to ensure the rendered HTML is styled consistently.
  3. Displayed Top 3 Teams in Both Cards and Table:

    • Problem: The Top 3 teams were only shown in the highlight cards at the top and were missing from the main leaderboard table.
    • Solution: Updated the 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:

  1. Run the project locally: task dev.
  2. Test Color Fix: On the /v2 scoreboard, switch between light and dark mode. The text on the Top 3 cards should always be clearly readable.
  3. Test HTML Rendering: Navigate to the detail page for a challenge with HTML in its description (e.g., /v2/challenges/leakedApiKeyChallenge). The description should now be properly formatted.
  4. Test Table Content: On the /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.

@AyushRajSinghParihar AyushRajSinghParihar changed the title ### **PR Title: fix(ui): Polish V2 scoreboard and detail pages** Fix(ui): Polish V2 scoreboard and detail pages Jul 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant