Merge pull request #106 from Nsanjayboruds/theme-ui

feat(frontend): complete light/dark theme support across main user pages

Author: Nsanjayboruds

backend/package-lock.json

@@ -8,7 +8,7 @@ const ContributorCard = ({ contributor }) => {
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
-            className="group relative p-6 rounded-3xl bg-white/5 dark:bg-gray-900/40 backdrop-blur-xl border border-white/10 dark:border-gray-800/50 hover:border-cyan-500/50 transition-all duration-500 overflow-hidden"
+            className="group relative p-6 rounded-3xl bg-white/85 dark:bg-gray-900/40 backdrop-blur-xl border border-slate-200 dark:border-gray-800/50 hover:border-cyan-500/50 transition-all duration-500 overflow-hidden"
         >
             {/* Background Glow */}
             <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500" />
@@ -36,7 +36,7 @@ const ContributorCard = ({ contributor }) => {
                 </p>
 
                 {/* Stats */}
-                <div className="px-4 py-1.5 rounded-full bg-white/10 dark:bg-black/20 border border-white/10 dark:border-gray-800 text-xs font-medium text-gray-700 dark:text-gray-300">
+                <div className="px-4 py-1.5 rounded-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-gray-800 text-xs font-medium text-gray-700 dark:text-gray-300">
                     {contributor.contributions} Contributions
                 </div>
 

frontend/src/components/ContributorCard.jsx

@@ -8,7 +8,7 @@ const FeaturedContributor = ({ contributor, role, description, badge }) => {
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
-            className="group relative p-8 rounded-[40px] bg-white/10 dark:bg-gray-900/60 backdrop-blur-2xl border border-white/20 dark:border-gray-800/80 shadow-2xl overflow-hidden"
+            className="group relative p-8 rounded-[40px] bg-white/90 dark:bg-gray-900/60 backdrop-blur-2xl border border-slate-200 dark:border-gray-800/80 shadow-2xl overflow-hidden"
         >
             {/* Animated Gradient Background */}
             <div className="absolute -inset-[100%] bg-[conic-gradient(from_0deg,transparent_0deg,transparent_150deg,#06b6d4_180deg,transparent_210deg,transparent_360deg)] animate-spin-slow opacity-10 group-hover:opacity-30 transition-opacity duration-700" />
@@ -18,7 +18,7 @@ const FeaturedContributor = ({ contributor, role, description, badge }) => {
                 {/* Avatar with Animated Gradient Border */}
                 <div className="relative w-32 h-32 mb-6">
                     <div className="absolute inset-[-4px] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 rounded-full animate-spin-slow blur-sm opacity-70 group-hover:blur-md transition-all duration-500" />
-                    <div className="absolute inset-0 bg-gray-900 rounded-full z-0" />
+                    <div className="absolute inset-0 bg-slate-100 dark:bg-gray-900 rounded-full z-0" />
                     <img
                         src={`https://github.com/${contributor}.png`}
                         alt={contributor}
@@ -35,13 +35,13 @@ const FeaturedContributor = ({ contributor, role, description, badge }) => {
                     <span className="px-4 py-1.5 rounded-full bg-cyan-500/20 border border-cyan-500/30 text-cyan-400 text-xs font-bold uppercase tracking-widest mb-3 block">
                         {role}
                     </span>
-                    <h3 className="text-2xl font-black text-white mb-1 tracking-tight">
+                    <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-1 tracking-tight">
                         {contributor}
                     </h3>
                     <p className="text-cyan-400/80 text-sm font-medium">@{contributor}</p>
                 </div>
 
-                <p className="text-gray-400 text-sm leading-relaxed mb-8 max-w-[250px]">
+                <p className="text-slate-600 dark:text-gray-400 text-sm leading-relaxed mb-8 max-w-[250px]">
                     {description}
                 </p>
 

frontend/src/components/FeaturedContributor.jsx

@@ -92,7 +92,7 @@ function Footer() {
                 key={index}
                 type="button"
                 onClick={() => toast.info(`Follow us on ${social.name} - Coming soon!`)}
-                className={`w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 ${social.color} cursor-pointer`}
+                className={`w-10 h-10 bg-slate-200 dark:bg-gray-800 text-slate-700 dark:text-white rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-110 ${social.color} cursor-pointer`}
                 aria-label={`Follow us on ${social.name}`}
               >
                 {social.icon}
@@ -204,7 +204,7 @@ function Footer() {
                 placeholder="Enter your email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent w-full sm:w-64"
+                className="px-4 py-2 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-700 rounded-lg text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent w-full sm:w-64"
               />
               <button 
                 onClick={handleSubscribe}
@@ -219,19 +219,19 @@ function Footer() {
       </div>
 
       {/* Bottom bar */}
-      <div className="bg-gradient-to-r from-gray-900 to-gray-950 py-6 border-t border-gray-800">
+      <div className="bg-gradient-to-r from-slate-100 to-slate-200 dark:from-gray-900 dark:to-gray-950 py-6 border-t border-slate-300 dark:border-gray-800">
         <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
-          <p className="text-xs text-gray-500 text-center md:text-left">
+          <p className="text-xs text-slate-600 dark:text-gray-500 text-center md:text-left">
             © {currentYear} <span className="text-cyan-400 font-medium">RIVETO</span> — All rights reserved.
           </p>
 
-          <div className="flex items-center gap-6 text-xs text-gray-500">
+          <div className="flex items-center gap-6 text-xs text-slate-600 dark:text-gray-500">
             <Link to="/termsandservices" className="hover:text-cyan-400 transition-colors">Terms of Service</Link>
             <Link to="/privicypolicy" className="hover:text-cyan-400 transition-colors">Privacy Policy</Link>
             <Link to="/cookie-policy" className="hover:text-cyan-400 transition-colors">Cookie Policy</Link>
           </div>
 
-          <div className="flex items-center gap-2 text-xs text-gray-500">
+          <div className="flex items-center gap-2 text-xs text-slate-600 dark:text-gray-500">
             <span>Made with</span>
             <FaHeart className="text-rose-500 animate-pulse" />
             <span>for our customers</span>

frontend/src/components/Footer.jsx

@@ -4,13 +4,11 @@ export const ThemeContext = createContext();
 
 export default function ThemeProvider({ children }) {
   const [theme, setTheme] = useState(() => {
-    // Check localStorage or default to 'dark'
     const stored = localStorage.getItem("theme");
     return stored ? stored : "dark";
   });
 
   useEffect(() => {
-    // Apply theme on mount and when theme changes
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
     } else {

frontend/src/context/ThemeContext.jsx

@@ -5,13 +5,13 @@ import { authDataContext } from './AuthContext';
 export const userDataContext = createContext();
 
 function UserContext({ children }) {
-  const [userData, setUserData] = useState(null); // null, not ""
+  const [userData, setUserData] = useState(null); 
   const { serverUrl } = useContext(authDataContext);
 
   const getCurrentUser = async () => {
     try {
       const result = await axios.get(`${serverUrl}/api/user/getCurrentUser`, {
-        withCredentials: true, // ✅ ensures cookie is sent
+        withCredentials: true,
       });
       setUserData(result.data);
       console.log("✅ Current user:", result.data);