refactor: align leaderboard UI with brand style (fixed bg, css vars, …

[AlinaRyabova]

Summary by CodeRabbit

• New Features

  • Enhanced leaderboard animations and visual effects for improved engagement.

• Style

  • Redesigned podium presentation with updated layout and styling.
  • Refined color scheme and typography throughout the leaderboard interface.
  • Improved spacing and layout alignment in header and results sections.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

👷 Deploy Preview for develop-devlovers processing.

Name	Link
🔨 Latest commit	cfc14d0
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69723a35bb1c6a0008d5f4d4

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors the leaderboard component suite to simplify decorative backgrounds, restructure the podium layout with animations, and standardize color theming. The mouse-driven background effects in LeaderboardClient are replaced with a DynamicGridBackground component, the podium switches from an ordered list to an animated flex container with rank-based height calculations, and hard-coded color hex values are swapped for CSS variable references.

Changes

Cohort / File(s)	Summary
Background & Layout Simplification frontend/components/leaderboard/LeaderboardClient.tsx	Replaced mouse-move event tracking, useRef/useMotionValue hooks, and inline SVG styling with DynamicGridBackground component. Removed radial mask logic and inline animated mask. Added motion-based animations for header/subtitle on mount. Adjusted container padding and z-index structure to position background behind content.
Podium Component Restructuring frontend/components/leaderboard/LeaderboardPodium.tsx	Changed from ordered list rendering to flex container with reordered podium array (ranks 2, 1, 3). Introduced framer-motion animations for avatar containers and height growth with per-item delays. Replaced static Crown icon logic with conditional rendering. Dynamic heights: 100% for rank 1, 45% for rank 2, 30% for others. Simplified decorative layers and rank badge rendering. Removed ARIA labels and i18n references.
Color Theming Standardization frontend/components/leaderboard/LeaderboardTable.tsx	Replaced hard-coded hex color values (e.g., #ff2d55) with CSS variable var(--accent-primary) across border colors, backgrounds, text colors, and shadow/glow effects. Applied consistently to current-user indicator, avatar rings, and status badge styling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Possibly related PRs

• fix:Update leaderboard: fixed background #180 — Both PRs modify LeaderboardClient.tsx and refactor the decorative background and mouse-tracking logic.
• fix(leaderboard): resolve accessibility issues (W3C, Lighthouse 100%, Keyboard nav, VoiceOver) #165 — Both PRs update the same leaderboard component suite with overlapping UI and structural changes.

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 A podium stands tall, with animated grace,
Mouse-tracking fades, the background finds its place,
Colors now dance with CSS variable might,
Ranks reorder smoothly—what a delightful sight!
Simpler, cleaner, the leaderboard springs alive,
With framer-motion's touch, our design will thrive! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: refactoring leaderboard UI components to align with brand styling, including background simplification, CSS variable adoption, and component restructuring.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}