From 918ee05fde40dfd64ba4bc6d1b6fe47e6aaa2997 Mon Sep 17 00:00:00 2001 From: Priyanshu Singh Date: Sat, 11 Oct 2025 21:49:55 +0530 Subject: [PATCH] chore: remove comments and clean ContributorCard component --- .../ContributorsCard/ContributorCard.js | 177 ++++++++++++++---- src/themes/themes.js | 72 ++++++- 2 files changed, 207 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/ContributorsCard/ContributorCard.js b/frontend/src/components/ContributorsCard/ContributorCard.js index 894cb5f..58ec4d9 100644 --- a/frontend/src/components/ContributorsCard/ContributorCard.js +++ b/frontend/src/components/ContributorsCard/ContributorCard.js @@ -1,35 +1,114 @@ import React, { useState, useEffect } from "react"; -import { makeStyles } from "@material-ui/core/styles"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; import Avatar from "@material-ui/core/Avatar"; -import {contributorsUrl} from "../Constants/urlConfig" +import {contributorsUrl} from "../Constants/urlConfig"; -const useStyles = makeStyles({ - root: { - // minWidth: 275, - maxWidth: 400, - padding: 10, - margin: 10 - }, - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)", +// Helper function to check if a color is a gradient or image URL +const isComplexBackground = (bg) => bg && (bg.includes('gradient') || bg.includes('url')); + + +// 3. Update makeStyles to use SELECTED_THEME colors +const useStyles = makeStyles(theme => ({ + root: { + maxWidth: 650, + padding: theme.spacing(3), // Use theme spacing for consistency (24px) + margin: theme.spacing(2), // Use theme spacing for consistency (16px) + + // MODERNIZED BACKGROUND GRADIENT + background: theme.palette.type === 'dark' + ? 'linear-gradient(135deg, #1c2128 0%, #0d1117 100%)' // Slightly adjusted dark gradient + : 'linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%)', // Softer light gradient + + borderRadius: 12, // Slightly reduced border radius for a modern feel + transition: 'transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)', + border: theme.palette.type === 'dark' ? '1px solid #30363d' : '1px solid #e1e4e8', // Added subtle light mode border + + '&:hover': { + transform: 'translateY(-6px)', // Deeper lift on hover + // MODERN SHADOW: Use a more diffused shadow for a 3D-pop effect + boxShadow: theme.palette.type === 'dark' + ? '0 15px 30px rgba(0,0,0,0.45)' + : '0 15px 30px rgba(0,0,0,0.15)', + } + }, + title: { + fontSize: '1.75rem', // Larger, more impactful title + fontWeight: 700, // Bolder font weight + marginBottom: theme.spacing(1), // Reduced margin below for tighter grouping + // SLIGHTLY BRIGHTER TEXT FOR DARK MODE CONTRAST + color: theme.palette.type === 'dark' ? '#f0f6fc' : theme.palette.text.primary, + textAlign: 'center' + }, + subtitle: { + fontSize: '1rem', // Standard font size + // MORE SUBDUED TEXT FOR LIGHT MODE + color: theme.palette.type === 'dark' ? theme.palette.text.secondary : '#6a737d', + textAlign: 'center', + marginBottom: theme.spacing(4), // Increased margin below subtitle + }, + avatarContainer: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + gap: theme.spacing(1.5), // Tighter gap between avatars + marginTop: theme.spacing(2), + marginBottom: theme.spacing(3), }, - title: { - fontSize: 14, + avatar: { + width: 50, + height: 50, + borderRadius: '50%', // Explicitly ensure circular + border: theme.palette.type === 'dark' ? '2px solid #2ea043' : '2px solid #2196F3', // Subtle color ring + transition: 'transform 0.2s ease, box-shadow 0.2s ease', + '&:hover': { + transform: 'scale(1.18)', // Slightly larger scale up + boxShadow: '0 6px 12px rgba(0,0,0,0.3)', // Sharper shadow on individual hover + zIndex: 1, + } }, - pos: { - marginBottom: 12, + button: { + borderRadius: 25, // More rounded, 'pill' shape + padding: '10px 30px', // More vertical padding + textTransform: 'none', + fontWeight: 600, + color: '#ffffff', + + // UPDATED DARK MODE BUTTON TO SOFTER GREEN (More like GitHub actions) + background: theme.palette.type === 'dark' + ? 'linear-gradient(45deg, #2ea043 30%, #34bf49 90%)' // Green gradient + : 'linear-gradient(45deg, #1877f2 30%, #21a9f3 90%)', // Facebook-blue gradient for light mode + + // MODERN SHADOW FOR BUTTON + boxShadow: theme.palette.type === 'dark' + ? '0 6px 10px 0 rgba(46, 160, 67, 0.4)' + : '0 6px 10px 0 rgba(33, 150, 243, 0.4)', + + '&:hover': { + // Slightly change gradient direction on hover + background: theme.palette.type === 'dark' + ? 'linear-gradient(45deg, #34bf49 30%, #2ea043 90%)' + : 'linear-gradient(45deg, #21a9f3 30%, #1877f2 90%)', + boxShadow: theme.palette.type === 'dark' + ? '0 4px 8px 0 rgba(46, 160, 67, 0.6)' + : '0 4px 8px 0 rgba(33, 150, 243, 0.6)', + } }, -}); + cardActions: { + justifyContent: 'center', + padding: theme.spacing(2, 0), // Use theme spacing + } +})); const ContributorsCard = () => { const [listOfContributors,setListOfContributors] = useState([]); + const theme = useTheme(); + + const classes = useStyles(); useEffect(()=>{ fetchContributors(); @@ -43,52 +122,74 @@ const ContributorsCard = () => { throw new Error('Failed to fetch contributors'); } const data = await res.json(); - setListOfContributors(data); + if (Array.isArray(data)) { + setListOfContributors(data); + } else { + console.error('Fetched data is not an array:', data); + setListOfContributors([]); + } } catch (error) { console.error('Error fetching contributors:', error); + setListOfContributors([]); } }; - const classes = useStyles(); - return (
- A Special Thanks To All The Contributors! - - We are grateful{" "} - + + A Special Thanks To All The Contributors!{" "} + ❤️ - - To our {listOfContributors.length} contributors for helping in -
- bringing this project to life + + We are grateful to our {listOfContributors.length} amazing contributors + for bringing this project to life -
- +
{ - listOfContributors.slice(0,Math.min(listOfContributors.length,7)).map((contributor)=>{ + listOfContributors.slice(0, Math.min(listOfContributors.length, 8)).map((contributor) => { return( - + ) }) }
- - - + + + @@ -96,4 +197,4 @@ const ContributorsCard = () => { ); }; -export default ContributorsCard; +export default ContributorsCard; \ No newline at end of file diff --git a/src/themes/themes.js b/src/themes/themes.js index c0c817b..2ba297e 100644 --- a/src/themes/themes.js +++ b/src/themes/themes.js @@ -263,8 +263,72 @@ const themes = { quote_color: "#94ff29", author_color: "#3aff29", bg_color: "url('https://cdn.wallpapersafari.com/90/94/AmZe8I.jpg') center" - } - }; - + }, + + // =================================== + // 10 NEW THEMES ADDED BELOW + // =================================== + + // 1. Popular editor theme + "catppuccin-mocha": { + quote_color: "#cba6f7", // Mauve + author_color: "#a6e3a1", // Green + bg_color: "#1e1e2e", // Base + }, + // 2. Another popular editor theme + "rose-pine": { + quote_color: "#e0d1f7", // Rose Pine Fog + author_color: "#9ccfd8", // Rose Pine Aqua + bg_color: "#191724", // Rose Pine Base + }, + // 3. Light mode variant + "ayu-light": { + quote_color: "#86b300", // Ayu Light 'Green' + author_color: "#5c6773", // Ayu Light 'Text' + bg_color: "#f8f8f8", // Ayu Light 'Background' + }, + // 4. High-contrast, warm colors + "fire-opal": { + quote_color: "#ff6d00", // Deep Orange/Fire Opal + author_color: "#00bfa5", // Teal Accent + bg_color: "#1c1c1c", // Dark Gray + }, + // 5. Classic Dark Terminal look + "hacker-green": { + quote_color: "#00ff41", // Bright Neon Green + author_color: "#10c634", // Darker Green + bg_color: "#000000", + }, + // 6. Soft Lavender gradient + "lavender-dawn": { + quote_color: "#4a4e69", // Dark Text + author_color: "#9a8c98", // Muted Author + bg_color: "linear-gradient(to top right, #f2e9e4, #c9ada7)", + }, + // 7. Azure Blue/Silver + "azure": { + quote_color: "#3498db", // Bright Azure Blue + author_color: "#ecf0f1", // Silver + bg_color: "#2c3e50", // Midnight Blue + }, + // 8. Elegant sepia-toned light theme + "old-book": { + quote_color: "#5b4a3a", // Dark Brown Text + author_color: "#8a735a", // Sepia Text + bg_color: "#fff8e1", // Off-White/Cream + }, + // 9. Retro-futuristic dark neon + "neon-blaze": { + quote_color: "#ff0099", // Neon Pink + author_color: "#00ffff", // Neon Cyan + bg_color: "#0a0a0a", + }, + // 10. Earthy and muted + "forest-path": { + quote_color: "#4a7c59", // Deep Forest Green + author_color: "#a8dadc", // Light Blue/Sky + bg_color: "#373b3e", // Slate Gray + }, +}; -module.exports=themes; +module.exports = themes; \ No newline at end of file