Resolved conflicts

src/App.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -17,11 +18,33 @@ import QRScanner from "./components/QRScanner";
 import PdfQRCodeGenerator from "./components/PDFToQR";
 import { ThemeProvider } from "./context/ThemeContext";
 import { Toaster } from "react-hot-toast";
+=======
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Home from './pages/Home';
+import DashboardPage from './pages/DashboardPage';
+import QRCodePage from './pages/QRCodePage';
+import ProfilePage from './pages/ProfilePage';
+import Login from './components/Login';
+import Register from './components/Register';
+import { AuthProvider } from './context/AuthContext';
+import Support from './components/Support';
+import Settings from './components/Setting';
+import ImageQRCodeGenerator from './components/ImageQRCodeGenerator';
+import  SocialMedia from './components/SocialMedia';
+import BulkQRCode from './components/BulkQRCode';
+import QRScanner from './components/QRScanner';
+import PdfQRCodeGenerator from './components/PDFToQR';
+import { ThemeProvider } from './context/ThemeContext';
+import { Toaster } from 'react-hot-toast';
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
 
 export default function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
+<<<<<<< HEAD
         <Router>
           <div className="min-h-screen bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800">
             <Navbar />
@@ -43,6 +66,27 @@ export default function App() {
           </div>
           <Toaster />
         </Router>
+=======
+      <Router>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/qr-code" element={<QRCodePage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/support" element={<Support />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/image-qr-code" element={<ImageQRCodeGenerator />} />
+          <Route path="/social-media-qr" element={<SocialMedia />} />
+          <Route path="/bulk-qr-code" element={<BulkQRCode />} />
+          <Route path="/qr-scanner" element={<QRScanner />} />
+          <Route path="/pdf-qr-code" element={<PdfQRCodeGenerator />} />
+        </Routes>
+        <Toaster />
+      </Router>
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
       </ThemeProvider>
     </AuthProvider>
   );

src/components/ColorPicker.js

@@ -8,54 +8,54 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaPalette className="mr-2 text-indigo-500" /> QR Code Color
+          <FaPalette className="mr-2 text-blue-500" /> QR Code Color
         </label>
         <motion.input
           type="color"
           value={color}
           onChange={(e) => setColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaPalette className="mr-2 text-indigo-500" /> Background Color
+          <FaPalette className="mr-2 text-blue-500" /> Background Color
         </label>
         <motion.input
           type="color"
           value={bgColor}
           onChange={(e) => setBgColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaPalette className="mr-2 text-indigo-500" /> Eye Color
+          <FaPalette className="mr-2 text-blue-500" /> Eye Color
         </label>
         <motion.input
           type="color"
           value={eyeColor}
           onChange={(e) => setEyeColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaSquare className="mr-2 text-indigo-500" /> Shape
+          <FaSquare className="mr-2 text-blue-500" /> Shape
         </label>
         <motion.select
           value={shape}
           onChange={(e) => setShape(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -67,12 +67,12 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaBorderStyle className="mr-2 text-indigo-500" /> Frame
+          <FaBorderStyle className="mr-2 text-blue-500" /> Frame
         </label>
         <motion.select
           value={frame}
           onChange={(e) => setFrame(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -84,12 +84,12 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
 
       <div>
         <label className="flex items-center mb-2 text-gray-800 font-bold">
-          <FaCircle className="mr-2 text-indigo-500" /> Eye Shape
+          <FaCircle className="mr-2 text-blue-500" /> Eye Shape
         </label>
         <motion.select
           value={eyeShape}
           onChange={(e) => setEyeShape(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >

src/components/Navbar.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from "react";
 import { useAuth } from "../context/AuthContext";
 import { Link, useNavigate } from "react-router-dom";
 import { ThemeContext } from "../context/ThemeContext";
+import toast from "react-hot-toast";
 
 import {
   FaUser,
@@ -58,9 +59,33 @@ export default function Navbar() {
       ),
       {
         duration: 0, // Keep the toast open until dismissed
+<<<<<<< HEAD
         position: "top-center", // Adjust position if needed
       }
     );
+=======
+        position: 'top-center', // Adjust position if needed
+      }
+    )
+  };
+
+  const handleToggleTheme = () => {
+    setDarkMode((prevMode) => {
+      const newMode = !prevMode;
+
+      // Show toast notification when theme changes
+      toast(`Theme changed to ${newMode ? 'Dark' : 'Light'} mode!`, {
+        icon: `${newMode ? '🌙' :'☀️'}`,
+        style: {
+          borderRadius: '10px',
+          background: `${newMode ? '#333' : '#fff'} `,
+          color: `${newMode ? '#fff' : '#333'}`,
+        },
+      });
+
+      return newMode;
+    });
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
   };
 
   const handleToggleTheme = () => {
@@ -110,7 +135,16 @@ export default function Navbar() {
   }, [dropdownRef, buttonRef]);
 
   return (
+<<<<<<< HEAD
     <nav className="p-4">
+=======
+    <nav
+      className={`p-4 shadow-lg ${darkMode
+          ? "bg-[#00050e] border-b-[1px] border-[#333333]"
+          : "bg-gradient-to-r from-indigo-600 to-purple-600"
+        }`}
+    >
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
       <div className="container mx-auto flex justify-between items-center">
         <div className="flex items-center space-x-3">
           <FaQrcode className="text-white h-8 w-8" />
@@ -202,9 +236,13 @@ export default function Navbar() {
                 </div>
               </div>
               <button
+<<<<<<< HEAD
                 onClick={() => {
                   setDarkMode(!darkMode);
                 }}
+=======
+                onClick={handleToggleTheme}
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
                 className="text-white hover:text-indigo-200 transition duration-300 text-xl"
               >
                 {darkMode ? <MdLightMode /> : <FaMoon />}
@@ -270,13 +308,20 @@ export default function Navbar() {
                 Logout
               </button>
               <button
+<<<<<<< HEAD
                 onClick={() => {
                   setDarkMode(!darkMode);
                 }}
                 className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300 w-full"
               >
                 {darkMode ? <MdLightMode size={16} /> : <FaMoon size={10} />}{" "}
                 Toggle Dark Mode
+=======
+                onClick={() => { setDarkMode(!darkMode); }}
+                className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300 w-full"
+              >
+                {darkMode ? <MdLightMode size={16} /> : <FaMoon size={10} />} Toggle Dark Mode
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
               </button>
             </>
           ) : (

src/components/Profile.js

@@ -177,13 +177,13 @@ export default function Profile() {
           <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">Email</label>
           <div className="relative mt-2">
             <MdMarkEmailRead className="text-xl absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-300" />
-          <input
-            type="email"
-            value={currentUser.email}
-            disabled
-            className="font-semibold pl-12 py-3 border border-gray-400 rounded-lg w-full bg-gray-200 cursor-not-allowed text-gray-900"
-            placeholder="Your email address"
-          /></div>
+            <input
+              type="email"
+              value={currentUser.email}
+              disabled
+              className="font-semibold pl-12 py-3 border border-gray-400 rounded-lg w-full bg-gray-200 cursor-not-allowed text-gray-900"
+              placeholder="Your email address"
+            /></div>
         </motion.div>
 
         <motion.div

src/components/QRCodeGenerator.js

@@ -144,7 +144,7 @@ export default function QRCodeGenerator() {
   return (
     <motion.div
       className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-lg mt-10"
-      initial={{ opacity: 0, scale: 0.9 }}
+      initial={{ opacity: 0, scale: 1 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.5, ease: 'easeOut' }}
       whileHover={{ scale: 1 }}

src/components/SizeSlider.js

@@ -4,7 +4,7 @@ import { FaExpandArrowsAlt } from 'react-icons/fa';
 export default function SizeSlider({ size, setSize }) {
   return (
     <div className="mb-6">
-      <label className=" mb-2 text-gray-700 flex items-center">
+      <label className="mb-2 text-gray-700 flex items-center">
         <FaExpandArrowsAlt className="mr-2 text-gray-500" />
         Size
       </label>
@@ -15,11 +15,10 @@ export default function SizeSlider({ size, setSize }) {
           max="600"
           value={size}
           onChange={(e) => setSize(e.target.value)}
-          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"
-        />
-        <div
-          className="absolute top-0 left-0 h-full bg-indigo-500 rounded-lg"
-          style={{ width: `${((size - 100) / 500) * 100}%` }}
+          className="w-full h-3 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+          style={{
+            background: `linear-gradient(to right, #4f46e5 ${((size - 100) / 500) * 100}%, #d1d5db ${((size - 100) / 500) * 100}%)`,
+          }}
         />
       </div>
       <span className="block text-center text-gray-600 dark:text-gray-300 mt-2 text-lg font-semibold">

src/components/VCardForm.js

@@ -16,7 +16,7 @@ export default function VCardForm({ vCardDetails, setVCardDetails, setText }) {
   };
 
   return (
-    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto">
+    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto mb-6">
       <div className="space-y-6">
         {[
           { name: 'fullName', label: 'Full Name', icon: faUser, placeholder: 'John Doe' },

src/components/WifiForm.js

@@ -16,7 +16,7 @@ export default function WifiForm({ wifiDetails, setWifiDetails, setText }) {
   };
 
   return (
-    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto">
+    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto mb-6">
       <div className="space-y-6">
         {[
           { name: 'ssid', label: 'SSID', icon: faWifi, placeholder: 'Your Network Name' },

src/context/ThemeContext.js

@@ -1,9 +1,14 @@
+<<<<<<< HEAD
 // src/context/ThemeContext.js
 import { createContext, useState, useEffect } from 'react';
+=======
+import { createContext, useState, useEffect, useRef } from 'react';
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
 
 // Create the context
 export const ThemeContext = createContext();
 
+<<<<<<< HEAD
 // ThemeContext provider
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
@@ -19,6 +24,27 @@ export const ThemeProvider = ({ children }) => {
     document.documentElement.classList.add(newTheme);
     setTheme(newTheme);
   };
+=======
+const ThemeProvider = ({ children }) => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const storedPreference = localStorage.getItem('qr-web-darkMode');
+    return storedPreference ? JSON.parse(storedPreference) : false; // Default to false (light theme)
+  });
+
+  // To avoid showing toast on initial render
+  const isFirstRender = useRef(true);
+
+  // Update localStorage and show toast whenever theme changes (but skip the first render)
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return; // Skip the first render
+    }
+
+    // Update localStorage
+    localStorage.setItem('qr-web-darkMode', JSON.stringify(darkMode));
+  }, [darkMode]);
+>>>>>>> c0c44062d6d49f810b75cec4038488603368bc6c
 
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>