ModerN POLISHED UI and 10 new themes #355
Conversation
…ntributor-card feat(ui): refresh ContributorCard UI — spacing, animations, and dark-mode polish
|
@Priyanshu2004-Singh is attempting to deploy a commit to the shravan20's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughUpdates the ContributorsCard component to use theme-driven styles, revised layout, and enhanced actions, plus improved contributor data validation and error handling. Adds ten new theme definitions to the themes export with colors/gradients and minor formatting tweaks to the export statement. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant CC as ContributorsCard
participant API as Contributors API
U->>CC: Mount component
CC->>API: fetchContributors()
alt Success
API-->>CC: data (array)
CC->>CC: validate array<br/>setContributors(list)
CC-->>U: Render avatars, title, subtitle, button
else Error or non-array
API--x CC: error / invalid
CC->>CC: setContributors([])<br/>log error
CC-->>U: Render empty state with actions
end
U->>CC: Click "View All Contributors"
CC->>U: Navigate/open contributors view (per router/config)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
frontend/src/components/ContributorsCard/ContributorCard.js (2)
16-105: Consider extracting hardcoded colors to theme palette.While the theme-driven layout and spacing improvements are excellent, several colors remain hardcoded (e.g., gradients on lines 23-25, border colors on line 29, avatar borders on line 66, button gradients on lines 82-84). This makes it harder to customize these values across themes without modifying component code.
If you plan to support the newly added themes from
src/themes/themes.js, consider defining these UI colors in the Material-UI theme palette so they can be overridden per theme.Example approach for a single color:
In your theme definition (e.g., in Dashboard where
createThemeis called):const theme = createTheme({ palette: { type: 'dark', primary: { main: '#2ea043' }, // Add custom colors for the card custom: { cardGradientStart: '#1c2128', cardGradientEnd: '#0d1117', avatarBorder: '#2ea043', buttonGradientStart: '#2ea043', buttonGradientEnd: '#34bf49', } } });Then reference in the component:
- background: theme.palette.type === 'dark' - ? 'linear-gradient(135deg, #1c2128 0%, #0d1117 100%)' - : 'linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%)', + background: theme.palette.type === 'dark' + ? `linear-gradient(135deg, ${theme.palette.custom.cardGradientStart} 0%, ${theme.palette.custom.cardGradientEnd} 100%)` + : 'linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%)',
169-169: Simplify slice logic (optional).The
Math.min(listOfContributors.length, 8)is redundant becauseslice(0, 8)already handles arrays shorter than 8 elements safely.Apply this diff for a cleaner implementation:
- listOfContributors.slice(0, Math.min(listOfContributors.length, 8)).map((contributor) => { + listOfContributors.slice(0, 8).map((contributor) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
frontend/src/components/ContributorsCard/ContributorCard.js(2 hunks)src/themes/themes.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
frontend/src/components/ContributorsCard/ContributorCard.js (1)
frontend/src/components/Dashboard/index.js (2)
theme(37-39)classes(40-40)
src/themes/themes.js (2)
frontend/src/config/cardTemplate/index.js (2)
themes(1-47)themes(1-47)frontend/src/util/themes/index.js (1)
themes(1-242)
🔇 Additional comments (3)
src/themes/themes.js (1)
334-334: LGTM!Formatting improvement adds spaces around the assignment operator for consistency.
frontend/src/components/ContributorsCard/ContributorCard.js (2)
125-134: Excellent error handling and data validation!The array validation ensures the component handles unexpected API responses gracefully, and resetting to an empty array on error prevents crashes from undefined data.
148-161: Verify emoji accessibility and glow effect.The heart emoji with conditional glow is a nice touch. However, ensure:
- Accessibility: The
role="img"andaria-label="heart"are correct for screen readers.- Visual consistency: The
drop-shadowfilter creates a glow in dark mode only. Test that this effect displays consistently across browsers (some older browsers have limited filter support).
1 participant
Summary
This PR refreshes the
ContributorCardUI to improve spacing, visual hierarchy, and interactive feedback across light and dark modes. It also cleans up the component source by removing inline comments and stray duplicated code that caused lint/compile noise.Changes
Updated
frontend/src/components/ContributorsCard/ContributorCard.js:theme.spacingfor consistent layout.Minor theme adjustments in
src/themes/themes.jsto ensure contrast in dark mode (no breaking changes).Why this helps
Testing notes
cd frontend && npm install && npm startand visit the app to verify visual changes.Checklist
Summary by CodeRabbit
New Features
Style
Bug Fixes