feat: Improve ContributorCard UI — spacing, animations & dark-mode polish

[Priyanshu2004-Singh]

Summary

This PR refreshes the ContributorCard UI 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:

  • Modernized gradients for light/dark backgrounds.
  • Replaced hard-coded spacing with theme.spacing for consistent layout.
  • Increased title size/weight for better hierarchy.
  • Added avatar borders and hover scale + shadow for clearer affordance.
  • Redesigned CTA button as a pill with gradient background and improved hover animation.
  • Removed comments and fixed duplicated/trailing code.

• Minor theme adjustments in src/themes/themes.js to ensure contrast in dark mode (no breaking changes).

Why this helps

• Improves UX and visual polish for contributors listing.
• Makes the component easier to maintain and reduces lint warnings.
• Ensures consistent spacing tied to the Material-UI theme.

Testing notes

• Run cd frontend && npm install && npm start and visit the app to verify visual changes.
• Confirm contributors load (GitHub API call) and the CTA still links to the contributors page.

Checklist

• Frontend starts and loads correctly
• Contributors list displays avatars and counts
• Visual check in both light and dark modes

If you'd like I can split this into smaller PRs (styling-only vs cleanup) — happy to adapt.

Summary by CodeRabbit

• New Features

  • Added 10 new color themes for customizable appearances.
  • Updated contributors section to show dynamic counts and up to eight avatars.
  • Replaced “More Details Here” with a “View All Contributors” call-to-action.

• Style

  • Redesigned contributors card with theme-driven styling, gradients, borders, hover effects, and transitions.
  • Introduced pill-style, theme-aware action button and refined avatar styling.

• Bug Fixes

  • Improved contributor data loading with validation and safe fallback on errors.

• Accessibility

  • Tweaked copy and visuals for better readability across light/dark modes.

[vercel]

Someone is attempting to deploy a commit to the shravan20's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

💤 Files selected but had no reviewable changes (1)

• customQuotes/category.json

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Overhauls ContributorCard to use theme-driven styling, responsive avatars, a new CTA, and a refined data-fetch validation flow. Expands themes.js with ten additional themes and a minor export formatting update.

Changes

Cohort / File(s)	Summary
ContributorCard theming and UI overhaul frontend/src/components/ContributorsCard/ContributorCard.js	Migrates to theme-based makeStyles, adds gradient backgrounds, hover/transition effects, themed typography, avatar container with up to eight avatars, new pill-style CTA (“View All Contributors”), centers CardActions, and refines fetch logic with array validation and error handling.
Theme catalog expansion src/themes/themes.js	Adds 10 themes (catppuccin-mocha, rose-pine, ayu-light, fire-opal, hacker-green, lavender-dawn, azure, old-book, neon-blaze, forest-path) with quote/author/bg colors; inserts section comment; minor formatting; updates export spacing to module.exports = themes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Card as ContributorCard
  participant API as Contributors API
  participant Theme as Theme Provider

  Note over Card,Theme: Initial render with theme-driven styles
  User->>Card: Mount component
  Card->>Theme: useTheme() for palette and styles
  rect rgba(200,240,255,0.25)
    Note right of Card: Fetch contributors on mount
    Card->>API: GET /contributors
    API-->>Card: JSON response
    alt Valid array
      Card->>Card: setContributors(list.slice(0,8))
    else Invalid/Error
      Card->>Card: setContributors([])
      Card->>Card: console.error(...)
    end
  end
  Card-->>User: Render avatars (≤8), counts, themed CTA

Loading

sequenceDiagram
  autonumber
  participant App as App
  participant Theme as themes.js
  participant UI as Themed Components

  App->>Theme: Import themes
  Theme-->>App: themes object (incl. 10 new entries)
  App->>UI: Provide selected theme
  UI-->>UI: Apply quote_color, author_color, bg_color

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I nibble on gradients, soft as dawn’s hue,
Hop through the theme fields—ten palettes anew!
Avatars twinkle, eight stars in a row,
A pill-button beckons, “Come see the show.”
With careful fetch checks and styles that gleam,
I thump my paws—ship it, team! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly summarizes the main change by focusing on improving the ContributorCard UI with spacing adjustments, animations, and dark-mode polish, which matches the PR’s objectives and scope.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc57607 and 918ee05.

📒 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)

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)

frontend/src/components/ContributorsCard/ContributorCard.js (1)

frontend/src/components/Dashboard/index.js (2)

• theme (37-39)
• classes (40-40)

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

Remove unused helper.

isComplexBackground is declared but never used, leaving dead code in the module. Please drop it (or wire it up) to keep the component lean.

Apply this diff:

-// Helper function to check if a color is a gradient or image URL
-const isComplexBackground = (bg) => bg && (bg.includes('gradient') || bg.includes('url'));
-

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	// Helper function to check if a color is a gradient or image URL
	const isComplexBackground = (bg) => bg && (bg.includes('gradient') || bg.includes('url'));

🤖 Prompt for AI Agents

In frontend/src/components/ContributorsCard/ContributorCard.js around lines
11-12, the helper isComplexBackground is declared but never used; remove the
entire helper declaration to eliminate dead code, or alternatively replace the
inline background check wherever background strings are handled with a call to
isComplexBackground(bg) so the helper is actually used and duplicate logic is
removed.