Refine leaderboard toggles with square styling and polished hover glow #6
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the leaderboard UI from button-based controls to a segmented toggle control component, with improved mobile responsiveness and layout adjustments. The changes modernize the leaderboard interface with a more polished, iOS-style segmented control for period and duration selection.
- Introduces a new
SegmentedTogglecomponent to replace existing button-based controls for period and duration selection - Refactors landing page leaderboard layout from flexbox to CSS Grid for better responsive behavior
- Improves mobile experience with conditional rendering and compact styling
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| client/src/components/Leaderboard.jsx | Adds SegmentedToggle component and refactors leaderboard controls to use it in both landing and modal layouts |
| client/src/components/Leaderboard.css | Adds comprehensive styling for SegmentedToggle component with animations and responsive adjustments |
| client/src/pages/Landing.css | Converts leaderboard section from flexbox to CSS Grid layout with updated responsive breakpoints |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| top: 0.2rem; | ||
| bottom: 0.2rem; | ||
| left: 0.2rem; | ||
| width: calc((100% - 0.4rem) / var(--segments)); |
There was a problem hiding this comment.
The magic number 0.4rem (padding * 2) is hardcoded in the calculation. Consider defining this as a CSS custom property like --toggle-padding: 0.2rem and using it here as calc((100% - calc(var(--toggle-padding) * 2)) / var(--segments)) for better maintainability.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const formatDisplayDate = useCallback((timestamp) => { | ||
| if (period === 'daily') return formatRelativeTime(timestamp); | ||
| const date = new Date(timestamp); | ||
| return isLandingMobile | ||
| ? date.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' }) | ||
| : date.toLocaleDateString(); | ||
| }, [period, isLandingMobile]); |
There was a problem hiding this comment.
[nitpick] The formatDisplayDate function should be memoized with useMemo instead of useCallback, since it's not being passed as a callback prop but is called directly within the JSX (line 433). Using useMemo would cache the function itself rather than its definition, though in practice this won't cause issues since the function is only called during rendering.
Summary
the statistics cards
subtle text-only glow with no background shift