ModerN POLISHED UI and 10 new themes

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,57 +122,79 @@ 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 (
     <div
       style={{
         display: "flex",
-        margin:"10px",
+        margin: "20px",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <Card raised className={classes.root}>
         <CardContent>
-          A Special Thanks To All The Contributors!
-          <Typography variant="h5" component="h2">
-            We are grateful{" "}
-            <span role="img" aria-label="sheep">
+          <Typography className={classes.title} variant="h5" component="h2">
+            A Special Thanks To All The Contributors!{" "}
+            <span 
+              role="img" 
+              aria-label="heart" 
+              style={{ 
+                fontSize: '28px',
+                // Added a slight filter for a modern glow in dark mode
+                filter: theme.palette.type === 'dark' ? 'drop-shadow(0 0 4px #ff5050)' : 'none'
+              }}
+            >
               ❤️
             </span>
           </Typography>
-          <Typography className={classes.pos} color="textSecondary">
-            To our {listOfContributors.length} contributors for helping in
-            <br />
-            bringing this project to life              
+          <Typography className={classes.subtitle} color="textSecondary">
+            We are grateful to our {listOfContributors.length} amazing contributors
+            for bringing this project to life
           </Typography>
 
-          <div style={{display:'flex',alignItems:'center'}}>
-
+          <div className={classes.avatarContainer}>
           {
-              listOfContributors.slice(0,Math.min(listOfContributors.length,7)).map((contributor)=>{
+              listOfContributors.slice(0, Math.min(listOfContributors.length, 8)).map((contributor) => {
                   return(
-                    <Avatar key={contributor.id} style={{marginRight:'5px', marginLeft:'5px'}} alt={contributor.login} src={contributor.avatar_url} />
+                    <Avatar 
+                      key={contributor.id} 
+                      className={classes.avatar}
+                      alt={contributor.login} 
+                      src={contributor.avatar_url}
+                      title={contributor.login} 
+                    />
                   )
               })
           }
           </div>
         </CardContent>
-        <CardActions>
-          <a style={{textDecoration:"none"}}  href="https://github.com/zhravan/github-readme-quotes/graphs/contributors">
-          <Button variant="contained" color="primary" size="small">More Details Here</Button>
+        <CardActions className={classes.cardActions}>
+          <a style={{textDecoration:"none"}} href="https://github.com/zhravan/github-readme-quotes/graphs/contributors">
+            <Button 
+              variant="contained" 
+              color="primary" 
+              className={classes.button}
+              size="large"
+            >
+              View All Contributors
+            </Button>
           </a>
         </CardActions>
       </Card>
     </div>
   );
 };
 
-export default ContributorsCard;
+export default ContributorsCard; 

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;