Merge pull request #100 from tohit09Fst/main

Update :- Light and Dark mode & Dashboard

package.json

@@ -10,11 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.3",
+    "@mui/material": "^6.1.3",
+    "chart.js": "^4.4.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "express": "^4.21.0",
     "install": "^0.13.0",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
 
     "react-router-dom": "^6.26.2"

src/App.css

@@ -1,5 +1,5 @@
-.body-content {
-    margin-top: 80px; /* Space for the fixed navbar */
+/* .body-content {
+    margin-top: 80px;
     margin-left: 1.5rem;
     margin-right: 1.5rem;
     padding: 1rem;
@@ -8,5 +8,5 @@
     border: 2dvb solid #94dcad;
     height: 70vh;
   }
-
+   */
 

src/App.jsx

@@ -1,4 +1,4 @@
-// App.jsx
+
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
@@ -8,8 +8,8 @@ import Navbar from "./components/Navbar";
 import Contributors from "./pages/Contributors";
 import "./App.css";
 import Footer from "./components/Footer";
-import Settings from './pages/Settings'; // Ensure this path is correct
-import LandingPage from './pages/LandingPage'; // Ensure this path is correct
+import Settings from './pages/settings'; 
+import LandingPage from './pages/LandingPage'; 
 
 
 function App() {
@@ -24,6 +24,7 @@ function App() {
           <Route path="/analytics" element={<Analytics />} />
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/settings" element={<Settings />} />
+
         </Routes>
       </div>
       <Footer />

src/components/Navbar.css

@@ -1,42 +1,58 @@
 /* Navbar.css */
 .navbar {
-    display: flex;
-    justify-content: start; /* Center the links */
-    align-items: start;
-    background-color: #f9cff2; /* Darker background */
-    padding: 0.7rem;
-    position: fixed; /* Fix the navbar at the top */
-    top: 0;
-    left: 0;
-    width: 100%; /* Stretch the navbar across the entire screen */
-    z-index: 1000; /* Ensure it stays on top */
-  }
-
-  .navbar a {
-    display: inline-block;
-    padding: 0.5rem 0.9rem 0.5rem 0.9rem ;
-    color: #111344; /* Light blue text */
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    margin: 0 20px;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 1.1rem;
-    transition: background-color 0.3s ease;
-  }
-
-  .navbar a:hover {
-    background-color: #eba6e6; /* Slightly brighter on hover */
-    border-radius: 8px;
-  }
-
-  .navbar a.active {
-    color: #ffffff; /* White color for active link */
-    border-bottom: 2px solid #61dafb;
-  }
-
-  /* Add some margin to push content below the navbar */
-  .body-content {
-    margin-top: 80px; /* Adjust this based on the height of your navbar */
-  }
-
-
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  padding: 1.7rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+body.dark .navbar {
+  background-color: #333;
+}
+
+body.dark .navbar a {
+  color: #f0f0f0;
+}
+
+.navbar.light {
+  background-color: #f9cff2;
+}
+
+.navbar.dark {
+  background-color: #333333;
+}
+
+.navbar a {
+  display: inline-block;
+  padding: 0rem 0.9rem 0.5rem 0.9rem;
+  margin: 0px 20px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.2rem;
+  transition: background-color 0.3s ease;
+}
+
+.navbar a.light {
+  color: #111344;
+}
+
+.navbar a.dark {
+  color: #f9f9f9;
+}
+
+.navbar a:hover {
+  background-color: #eba6e6;
+  border-radius: 8px;
+}
+
+.navbar a.active {
+  border-bottom: 2px solid #61dafb;
+}
+
+.body-content {
+  margin-top: 40px;
+}

src/components/Navbar.jsx

@@ -1,16 +1,19 @@
-// Navbar.jsx
 import React from "react";
 import { Link } from "react-router-dom";
+import ThemeToggle from "./ThemeToggle";
 import "./Navbar.css";
 
 const Navbar = () => {
+  const currentTheme = localStorage.getItem("theme") || "light";
+
   return (
-    <nav className="navbar">
-      <Link to="/dashboard">Dashboard</Link>
-      <Link to="/posts">Posts</Link>
-      <Link to="/analytics">Analytics</Link>
-      <Link to="/contributors">Contributors</Link>
-      <Link to="/settings">Settings</Link>
+    <nav className={`navbar ${currentTheme}`}>
+      <Link to="/dashboard" className={`navbar-link ${currentTheme}`}>Dashboard</Link>
+      <Link to="/posts" className={`navbar-link ${currentTheme}`}>Posts</Link>
+      <Link to="/analytics" className={`navbar-link ${currentTheme}`}>Analytics</Link>
+      <Link to="/contributors" className={`navbar-link ${currentTheme}`}>Contributors</Link>
+      <Link to="/settings" className={`navbar-link ${currentTheme}`}>Settings</Link>
+      <ThemeToggle />
     </nav>
   );
 };

src/components/ThemeToggle.css

@@ -0,0 +1,69 @@
+body.light {
+    background-color: #ffffff;
+    color: #111344;
+  }
+
+  body.dark {
+    background-color: #1e1e1e;
+    color: #f9f9f9;
+  }
+
+  .navbar.light {
+    background-color: #f9cff2; /* Light mode background */
+  }
+
+  .navbar.dark {
+    background-color: #333333; /* Dark mode background */
+  }
+
+  .navbar a.light {
+    color: #111344; /* Light mode text */
+  }
+
+  .navbar a.dark {
+    color: #f9f9f9; /* Dark mode text */
+  }
+
+  /* Wheel styling */
+  .wheel {
+    width: 100px; /* Diameter of the wheel */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  margin-left: 33vw;
+  margin-bottom: 63vh;
+    transition: transform 0.4s ease; /* smooth transition */
+
+  }
+
+  /* Inner wheel styling */
+  .wheel-inner {
+    width: 80%; /* Inner circle */
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem; /* Icon size */
+    transition: transform 0.4s ease;
+  }
+
+  /* Rotate effect on hover */
+  .wheel:hover {
+    transform: rotate(360deg); /* full rotation */
+  }
+
+  /* Wiggle effect on click */
+  .wheel:active .wheel-inner {
+    animation: wiggle 0.5s ease; /* trigger wiggle when clicked */
+  }
+
+  /* Keyframes for wiggle effect */
+  @keyframes wiggle {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(10deg); }
+    50% { transform: rotate(-10deg); }
+    75% { transform: rotate(10deg); }
+    100% { transform: rotate(0deg); }
+  }
+

src/components/ThemeToggle.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+import "./ThemeToggle.css";
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
+
+  useEffect(() => {
+    document.body.className = theme;
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <div className="wheel" onClick={toggleTheme}>
+      <div className="wheel-inner">
+        {theme === "light" ? "🌚" : "🌞"}
+      </div>
+    </div>
+  );
+};
+
+export default ThemeToggle;

src/pages/Dashboard.css

@@ -0,0 +1,109 @@
+/* Dashboard.css */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  :root {
+    --bg-color: #f0f0f0;
+    --text-color: #111;
+    --card-bg: white;
+    --chart-bg: white;
+  }
+
+  /* Dark mode */
+  body.dark {
+    --bg-color: #1e1e1e;
+    --text-color: #f0f0f0;
+    --card-bg: #333;
+    --chart-bg: #444;
+  }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    overflow: hidden;
+  }
+
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh; /* Full height of the viewport */
+    width: 100vw; /* Full width of the viewport */
+    padding: 10px;
+    box-sizing: border-box;
+
+    background-color: var(--bg-color);
+    color: var(--text-color);
+  }
+
+  h1 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 2.5rem;
+    text-align: center;
+  }
+
+  .cards-container {
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    width: 100%;
+    height: 20%; /* Take up 20% of the viewport height */
+  }
+
+  .card {
+    background-color: var(--card-bg); /* Dynamic background color based on mode */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 150px;
+    width: 100%;
+  }
+
+
+
+  .charts-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    width: 100%;
+    height: 80%; /* Take up the remaining 80% of the viewport height */
+  }
+
+  .chart {
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 70%;
+    margin-top: 20px;
+    background-color: var(--chart-bg);
+  }
+
+
+  @media (max-width: 1024px) {
+    .cards-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .charts-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .cards-container, .charts-container {
+      grid-template-columns: 1fr;
+    }
+  }
+