Merge pull request #138 from Trailblazer09/theme-fix

fixed: theme switch bug for login & contributors pages respectively

Author: mehul-m-prajapati

src/App.tsx

@@ -3,7 +3,7 @@ import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
 import Router from "./Routes/Router";
-import ThemeWrapper from "./ThemeContext"; // ✅ import your wrapper
+import ThemeWrapper from "./context/ThemeContext"; // ✅ import your wrapper
 
 function App() {
   return (

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import { useState, useContext } from "react";
-import { ThemeContext } from "../ThemeContext";
+import { ThemeContext } from "../context/ThemeContext";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);

src/ThemeContext.tsx src/context/ThemeContext.tsxsrc/ThemeContext.tsx renamed to src/context/ThemeContext.tsx

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
-import ThemeWrapper from "./ThemeContext.tsx";
+import ThemeWrapper from "./context/ThemeContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { useState, useContext } from "react";
 import { Github, Mail, Phone, Send, X, CheckCircle } from "lucide-react";
-import { ThemeContext } from "../../ThemeContext";
-import type { ThemeContextType } from "../../ThemeContext";
+import { ThemeContext } from "../../context/ThemeContext";
+import type { ThemeContextType } from "../../context/ThemeContext";
 
 function Contact() {
   const [showPopup, setShowPopup] = useState(false);

src/main.tsx

@@ -11,10 +11,10 @@ import {
   CircularProgress,
   Alert,
 } from "@mui/material";
-import { FaGithub } from "react-icons/fa"; // GitHub Icon
-import axios from "axios";
+import { FaGithub } from "react-icons/fa";
+import axios from "axios"
 import { Link } from "react-router-dom";
-import { useTheme } from "../../hooks/useTheme";
+
 
 interface Contributor {
   id: number;
@@ -24,137 +24,102 @@ interface Contributor {
   html_url: string;
 }
 
+
 const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { theme } = useTheme();
-
-  // Theme-based colors
-  const bgColor = theme === "dark" ? "#1f1f1f" : "#FFFFFF";
-  const textColor = theme === "dark" ? "#FFFFFF" : "#333333";
-  const cardBg = theme === "dark" ? "#2a2a2a" : "#FFFFFF";
-  const borderColor = theme === "dark" ? "#444444" : "#E0E0E0";
-  const hoverBorder = theme === "dark" ? "#666666" : "#C0C0C0";
-
+  // Fetch contributors data from GitHub API
   useEffect(() => {
     const fetchContributors = async () => {
       try {
         const response = await axios.get(
           "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors",
-          { withCredentials: false }
+          {
+            withCredentials: false,
+          }
         );
         setContributors(response.data);
       } catch (err) {
-        setError("Failed to fetch contributors. Please try again later.");
+        setError("Failed to fetch contributors. Please try again later." + err);
       } finally {
         setLoading(false);
       }
     };
-
     fetchContributors();
   }, []);
-
-  // To trigger re-render on theme change (optional)
-  useEffect(() => {
-    setContributors((prev) => [...prev]);
-  }, [theme]);
-
   if (loading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
         <CircularProgress />
       </Box>
     );
   }
-
   if (error) {
     return (
       <Box sx={{ mt: 4 }}>
         <Alert severity="error">{error}</Alert>
       </Box>
     );
   }
-
   return (
-    <Container
-      sx={{
-        mt: 4,
-        backgroundColor: bgColor,
-        color: textColor,
-        minHeight: "100vh",
-        p: { xs: 2, sm: 4 },
-      }}
-    >
-      <Typography
-        variant="h4"
-        align="center"
-        gutterBottom
-        sx={{
-          fontSize: { xs: "1.8rem", sm: "2.2rem" },
-          fontWeight: "bold",
-          mb: 3,
-        }}
-      >
-        🤝 GitHub Contributors
-      </Typography>
+    <div className="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen p-4 mt-4">
+      <Container>
+        <Typography sx={{ pb: 2 }} variant="h4" align="center" gutterBottom>
+          🤝 GitHub Contributors
+        </Typography>
+        <Grid container spacing={4}>
+          {contributors.map((contributor) => (
+            <Grid item xs={12} sm={6} md={4} key={contributor.id}>
 
-      <Grid container spacing={3}>
-        {contributors.map((contributor) => (
-          <Grid item xs={12} sm={6} md={4} key={contributor.id}>
             <Link
               to={`/user/${contributor.login}`}
               style={{ textDecoration: "none" }}
             >
               <Card
                 sx={{
                   textAlign: "center",
-                  backgroundColor: cardBg,
-                  color: textColor,
-                  borderRadius: "12px",
-                  border: `1px solid ${borderColor}`,
+                  p: 2,
+
+                  borderRadius: "10px",
+                  border: "1px solid #E0E0E0", // Border styling
+
                   boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
                   transition: "transform 0.3s ease-in-out",
                   "&:hover": {
-                    transform: "scale(1.05)",
+                    transform: "scale(1.05)", // Zoom effect
                     boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                    borderColor: hoverBorder,
+                    borderColor: "#C0C0C0", // Change border color on hover
+                    outlineColor: "#B3B3B3", // Change outline color on hover
                   },
                 }}
               >
                 <Avatar
                   src={contributor.avatar_url}
                   alt={contributor.login}
-                  sx={{ width: 100, height: 100, mx: "auto", mt: 3 }}
+                  sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
                 />
                 <CardContent>
-                  <Typography
-                    variant="h6"
-                    sx={{ fontWeight: "bold", color: textColor }}
-                  >
+                  <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                     {contributor.login}
                   </Typography>
-                  <Typography variant="body2" sx={{ mt: 1, color: textColor }}>
+                  <Typography variant="body2" color="textSecondary">
                     {contributor.contributions} Contributions
                   </Typography>
-                  <Typography variant="body2" sx={{ mt: 2, color: textColor }}>
-                    Thank you for your valuable contributions!
+                  <Typography variant="body2" sx={{ mt: 2 }}>
+                    Thank you for your valuable contributions to our community!
                   </Typography>
                   <Box sx={{ mt: 2 }}>
                     <Button
                       variant="contained"
                       startIcon={<FaGithub />}
                       href={contributor.html_url}
                       target="_blank"
-                      onClick={(e) => e.stopPropagation()}
                       sx={{
-                        backgroundColor: "#24292f",
-                        color: "#fff",
-                        fontSize: { xs: "0.75rem", sm: "0.85rem" },
-                        px: 2,
-                        py: 1,
+                        backgroundColor: "#333333",
+                        color: "#FFFFFF",
                         "&:hover": {
-                          backgroundColor: "#444",
+                          backgroundColor: "#555555", // Custom hover color
                         },
                       }}
                     >
@@ -163,11 +128,12 @@ const ContributorsPage = () => {
                   </Box>
                 </CardContent>
               </Card>
-            </Link>
-          </Grid>
-        ))}
-      </Grid>
-    </Container>
+              </Link>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
   );
 };