- Contribution Areas -
-
- {categories.map(({ icon: Icon, title, desc }) => (
-
-);
+ );
+};
export default CategoriesSection;
diff --git a/frontend/src/components/Contributors/ContributorCard.jsx b/frontend/src/components/Contributors/ContributorCard.jsx
index cef5e53..f649b70 100644
--- a/frontend/src/components/Contributors/ContributorCard.jsx
+++ b/frontend/src/components/Contributors/ContributorCard.jsx
@@ -1,46 +1,41 @@
import { Github } from "lucide-react";
+import { useTheme } from '../../contexts/ThemeContext';
-const ContributorCard = ({ contributor, darkMode }) => (
-
- {
+ const { isDark, classes } = useTheme();
+
+ return (
+
- {
+ const { isDark, classes } = useTheme();
+
+ return (
+
+
+ Contribution Areas
+
+
+ {categories.map(({ icon: Icon, title, desc }) => (
+
- {title}
-
-
- {desc}
-
-
- ))}
+
+ {title}
+
+
+ {desc}
+
+
+ ))}
+
+ Contribution Areas +
+
+ {categories.map(({ icon: Icon, title, desc }) => (
+
+ ))}
+
- {title}
-
-
- ))}
+ - {desc} -
-+ {title} +
++ {desc} +
+
-
- 
-
+
+ );
+};
export default ContributorCard;
diff --git a/frontend/src/components/Contributors/ContributorsGrid.jsx b/frontend/src/components/Contributors/ContributorsGrid.jsx
index 9cf4aba..038c14c 100644
--- a/frontend/src/components/Contributors/ContributorsGrid.jsx
+++ b/frontend/src/components/Contributors/ContributorsGrid.jsx
@@ -1,13 +1,12 @@
import ContributorCard from "./ContributorCard";
+import { useTheme } from '../../contexts/ThemeContext';
-const ContributorsGrid = ({ contributors, loading, error, darkMode }) => {
+const ContributorsGrid = ({ contributors, loading, error }) => {
+ const { classes } = useTheme();
+
if (loading)
return (
- - {contributor.login} -
- -- {contributor.contributions} contributions -
- { + const { isDark, classes } = useTheme(); + + return ( +
-
-);
+
+ + {contributor.login} +
+ ++ {contributor.contributions} contributions +
+ ++
Loading contributors...
); @@ -16,7 +15,7 @@ const ContributorsGrid = ({ contributors, loading, error, darkMode }) => { return (
{contributors.map((c) => (
-
);
diff --git a/frontend/src/components/Contributors/HeroSection.jsx b/frontend/src/components/Contributors/HeroSection.jsx
index 9186a37..524497a 100644
--- a/frontend/src/components/Contributors/HeroSection.jsx
+++ b/frontend/src/components/Contributors/HeroSection.jsx
@@ -1,28 +1,27 @@
-const HeroSection = ({ darkMode }) => (
-
-
+ );
+};
export default HeroSection;
diff --git a/frontend/src/components/Graph/GraphCanvas.jsx b/frontend/src/components/Graph/GraphCanvas.jsx
index db3806d..d17f9d6 100644
--- a/frontend/src/components/Graph/GraphCanvas.jsx
+++ b/frontend/src/components/Graph/GraphCanvas.jsx
@@ -7,7 +7,7 @@ const GraphCanvas = forwardRef(({
startNode,
endNode,
algorithm,
- darkMode
+ isDark
}, ref) => {
const canvasRef = useRef(null);
@@ -19,7 +19,7 @@ const GraphCanvas = forwardRef(({
const { width, height } = canvas;
// Clear canvas
- ctx.fillStyle = darkMode ? '#1f2937' : '#f8fafc';
+ ctx.fillStyle = isDark ? '#1f2937' : '#f8fafc';
ctx.fillRect(0, 0, width, height);
// Safely access stepData
@@ -41,7 +41,7 @@ const GraphCanvas = forwardRef(({
if (!fromNode || !toNode) return;
// Determine edge color
- let edgeColor = darkMode ? '#6b7280' : '#9ca3af';
+ let edgeColor = isDark ? '#6b7280' : '#9ca3af';
let lineWidth = 2;
if (safeStepData.visitedEdges?.some(([from, to]) =>
@@ -70,7 +70,7 @@ const GraphCanvas = forwardRef(({
const midX = (fromNode.x + toNode.x) / 2;
const midY = (fromNode.y + toNode.y) / 2;
- ctx.fillStyle = darkMode ? '#ffffff' : '#000000';
+ ctx.fillStyle = isDark ? '#ffffff' : '#000000';
ctx.font = 'bold 12px Arial';
ctx.textAlign = 'center';
ctx.fillRect(midX - 10, midY - 8, 20, 16);
@@ -105,9 +105,9 @@ const GraphCanvas = forwardRef(({
// Draw nodes
nodes.forEach(node => {
// Determine node color and size
- let nodeColor = darkMode ? '#4b5563' : '#e5e7eb';
- let borderColor = darkMode ? '#6b7280' : '#9ca3af';
- let textColor = darkMode ? '#ffffff' : '#000000';
+ let nodeColor = isDark ? '#4b5563' : '#e5e7eb';
+ let borderColor = isDark ? '#6b7280' : '#9ca3af';
+ let textColor = isDark ? '#ffffff' : '#000000';
let radius = 20;
if (node.id === startNode) {
@@ -148,7 +148,7 @@ const GraphCanvas = forwardRef(({
if (safeStepData.distances && safeStepData.distances[node.id] !== undefined) {
const distance = safeStepData.distances[node.id];
if (distance !== Infinity && distance !== undefined) {
- ctx.fillStyle = darkMode ? '#fbbf24' : '#f59e0b';
+ ctx.fillStyle = isDark ? '#fbbf24' : '#f59e0b';
ctx.font = '10px Arial';
ctx.fillText(`d:${distance}`, node.x, node.y - radius - 5);
}
@@ -160,7 +160,7 @@ const GraphCanvas = forwardRef(({
ref.current = canvas;
}
- }, [nodes, edges, stepData, startNode, endNode, algorithm, darkMode, ref]);
+ }, [nodes, edges, stepData, startNode, endNode, algorithm, isDark, ref]);
return (
- Our Contributors -
-{ + const { isDark, classes } = useTheme(); + + return ( +
- This project is made possible thanks to the amazing contributions from our
- community members. Explore their work and join us in making this even
- better.
-
-
-);
+ + Our Contributors +
++ This project is made possible thanks to the amazing contributions from our + community members. Explore their work and join us in making this even + better. +
+
diff --git a/frontend/src/components/Graph/GraphInput.jsx b/frontend/src/components/Graph/GraphInput.jsx
index f26c6e1..898c301 100644
--- a/frontend/src/components/Graph/GraphInput.jsx
+++ b/frontend/src/components/Graph/GraphInput.jsx
@@ -11,7 +11,7 @@ const GraphInput = ({
onStartNodeChange,
onEndNodeChange,
onRandomize,
- darkMode
+ isDark
}) => {
const addNode = () => {
@@ -97,14 +97,14 @@ const GraphInput = ({
{/* Node Selection */}
-
-