PM-5939 - campus leaderboard UI

[vas3a]

Related JIRA Ticket:

https://topcoder.atlassian.net/browse/PM-5939

What's in this PR?

This pull request introduces a significant UI and UX update to the Campus Leaderboard page, focusing on visual consistency, accessibility, and code maintainability. The changes include a comprehensive visual reskin to match the campus design system, the addition of a reusable statistic card component, improved iconography and accessibility for rank medals, and enhanced tooltips for table headers. The leaderboard table structure and styling were also modernized for better clarity and user experience.

Visual and Theming Updates:

• Applied a new global stylesheet (index.scss) to align the app with the campus design system, updating fonts, colors, and table styles throughout the app. [1] [2] [3] [4]

Component and Icon Improvements:

• Introduced a new StatCard component for displaying participation statistics, with associated styles and exports for reuse. [1] [2] [3] [4]
• Centralized and expanded the icon set, including medal icons for the top three placements and statistic icons, with mappings for placement icons and labels.

Leaderboard Table Enhancements:

• Refactored the leaderboard table:
  • Replaced the "Handle" column with a "Member" column.
  • Updated column headers to use a new headerWithTooltip function for consistent tooltip rendering with accessible info icons.
  • Switched to medal icons for the top three ranks, improving accessibility and visual clarity. [1] [2] [3]
  • Updated styling for table cells, medals, and rank badges to match the new design. [1] [2]

Testing and Accessibility:

• Updated tests to reflect accessible labels for placement medals (e.g., "1st place" instead of "Won (place 1)"), and added a mock for the new Tooltip component. [1] [2]

Minor Codebase Cleanups:

• Removed legacy CSS and unused class names from the leaderboard page styles. [1] [2]

References:
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]