From 1b36efba6dc9c0dcf59cec32ba93775d42352587 Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Fri, 4 Oct 2024 20:17:44 +0530
Subject: [PATCH 1/6] Dark mode ui implemnt & dropdown section

Signed-off-by: varunvaatsalya <a.varungupta23@gmail.com>
---
 src/App.js                             |  74 ++++-----
 src/components/BulkQRCode.js           |  14 +-
 src/components/CategorySelector.js     |   4 +-
 src/components/ColorPicker.js          |  26 ++--
 src/components/DownloadButton.js       |   2 +-
 src/components/FileUploader.js         |   6 +-
 src/components/ImageQRCodeGenerator.js |  22 +--
 src/components/Navbar.js               | 199 ++++++++++---------------
 src/components/PDFToQR.js              |  20 +--
 src/components/Profile.js              |  44 +++---
 src/components/QRCodeCanvas.js         |   2 +-
 src/components/QRCodeGenerator.js      |   8 +-
 src/components/QRScanner.js            |  12 +-
 src/components/Setting.js              |  40 ++---
 src/components/SizeSlider.js           |   8 +-
 src/components/SocialMedia.js          |  14 +-
 src/components/Support.js              |  18 +--
 src/components/VCardForm.js            |  12 +-
 src/components/WifiForm.js             |  12 +-
 src/context/ThemeContext.js            |  41 +++--
 src/pages/DashboardPage.js             |  19 +--
 src/pages/Home.js                      |  55 +++----
 src/pages/ProfilePage.js               |   2 +-
 src/pages/QRCodePage.js                |   4 +-
 tailwind.config.js                     |   1 +
 25 files changed, 315 insertions(+), 344 deletions(-)

diff --git a/src/App.js b/src/App.js
index ae2e449..d56fd12 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,43 +1,45 @@
-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 React, { useEffect, useState } 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";
 export default function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
-      <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>
-      </Router>
+        <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 />
+            <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>
+          </div>
+        </Router>
       </ThemeProvider>
     </AuthProvider>
   );
diff --git a/src/components/BulkQRCode.js b/src/components/BulkQRCode.js
index b755b45..14d22d8 100644
--- a/src/components/BulkQRCode.js
+++ b/src/components/BulkQRCode.js
@@ -42,12 +42,12 @@ export default function BulkQRCode() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-8">
+    <div className="min-h-screen p-8">
       <h1 className="text-5xl font-extrabold text-center text-white mb-12">
         Bulk QR Code Generator
       </h1>
 
-      <div className="bg-white p-6 rounded-lg shadow-lg mb-8">
+      <div className="bg-purple-100 dark:text-gray-200 dark:bg-[#2b2661] p-6 rounded-xl shadow-lg mb-8">
         <h2 className="text-2xl font-semibold mb-4 flex items-center">
           <FiSettings className="mr-2" /> Customize QR Codes
         </h2>
@@ -59,7 +59,7 @@ export default function BulkQRCode() {
               type="number"
               value={size}
               onChange={handleSizeChange}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
               min={64}
               max={512}
             />
@@ -71,7 +71,7 @@ export default function BulkQRCode() {
               type="color"
               value={bgColor}
               onChange={(e) => setBgColor(e.target.value)}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
             />
           </div>
           <div className="flex flex-col">
@@ -81,7 +81,7 @@ export default function BulkQRCode() {
               type="color"
               value={fgColor}
               onChange={(e) => setFgColor(e.target.value)}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
             />
           </div>
         </div>
@@ -89,14 +89,14 @@ export default function BulkQRCode() {
 
       <div className="flex flex-col space-y-6">
         {urls.map((url, index) => (
-          <div key={index} className="bg-white p-6 rounded-lg shadow-lg">
+          <div key={index} className="bg-purple-100 dark:bg-[#2b2661] p-6 rounded-lg shadow-lg">
             <div className="mb-4">
               <input
                 type="text"
                 placeholder={`Enter URL or text for QR code ${index + 1}`}
                 value={url}
                 onChange={(e) => handleUrlChange(index, e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                className="w-full p-3 border dark:bg-indigo-950 dark:text-gray-200 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
               />
             </div>
 
diff --git a/src/components/CategorySelector.js b/src/components/CategorySelector.js
index 3159740..04fdec7 100644
--- a/src/components/CategorySelector.js
+++ b/src/components/CategorySelector.js
@@ -12,7 +12,7 @@ export default function CategorySelector({ category, handleCategoryChange }) {
   ];
 
   return (
-    <div className="flex justify-around mb-8 p-4 bg-gradient-to-r from-gray-100 via-white to-gray-100 rounded-xl shadow-lg space-x-6">
+    <div className="flex justify-around mb-8 p-4 bg-gray-100 dark:bg-[#2b2661] rounded-xl shadow-lg space-x-6">
       {categories.map(({ name, icon }) => (
         <motion.button
           key={name}
@@ -20,7 +20,7 @@ export default function CategorySelector({ category, handleCategoryChange }) {
           className={`flex flex-col items-center p-4 rounded-lg font-medium focus:outline-none transition-transform ${
             category === name
               ? 'bg-blue-500 text-white shadow-2xl transform scale-105'
-              : 'bg-white text-gray-700 shadow-md'
+              : 'bg-white dark:bg-indigo-950 text-gray-700 dark:text-gray-200 shadow-md'
           }`}
           whileHover={{
             scale: 1.12,
diff --git a/src/components/ColorPicker.js b/src/components/ColorPicker.js
index 9fd41e6..4a50c73 100644
--- a/src/components/ColorPicker.js
+++ b/src/components/ColorPicker.js
@@ -4,58 +4,58 @@ import { FaPalette, FaSquare, FaCircle, FaBorderStyle } from 'react-icons/fa';
 
 export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeColor, setEyeColor, shape, setShape, frame, setFrame, eyeShape, setEyeShape }) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8 p-4 bg-white rounded-xl shadow-lg">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8 p-4 bg-white dark:bg-[#2b2661] rounded-xl shadow-lg">
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           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">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           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">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           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">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaSquare className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -66,13 +66,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaBorderStyle className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -83,13 +83,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaCircle className="mr-2 text-indigo-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-indigo-500 dark:bg-indigo-950 dark:border-gray-900"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
diff --git a/src/components/DownloadButton.js b/src/components/DownloadButton.js
index fbdf7d9..15e0b6d 100644
--- a/src/components/DownloadButton.js
+++ b/src/components/DownloadButton.js
@@ -12,7 +12,7 @@ export default function DownloadButton({ handleDownload, downloadFormat, setDown
       <motion.select
         value={downloadFormat}
         onChange={(e) => setDownloadFormat(e.target.value)}
-        className="p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="p-2 dark:bg-[#2b2661] dark:text-gray-200 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
       >
diff --git a/src/components/FileUploader.js b/src/components/FileUploader.js
index 7d8a74f..e94a002 100644
--- a/src/components/FileUploader.js
+++ b/src/components/FileUploader.js
@@ -5,8 +5,8 @@ import { faUpload } from '@fortawesome/free-solid-svg-icons';
 
 export default function FileUploader({ handleLogoChange }) {
   return (
-    <div className="mb-8 p-4 bg-gray-100 rounded-lg shadow-md">
-      <label className=" mb-2 text-gray-700 font-semibold flex items-center">
+    <div className="mb-8 p-4 bg-gray-100 dark:bg-[#2b2661] rounded-lg shadow-md">
+      <label className=" mb-2 text-gray-700 dark:text-gray-300 font-semibold flex items-center">
         <FontAwesomeIcon icon={faUpload} className="text-xl mr-2" />
         <span>Upload Logo (optional)</span>
       </label>
@@ -14,7 +14,7 @@ export default function FileUploader({ handleLogoChange }) {
         type="file"
         accept="image/*"
         onChange={handleLogoChange}
-        className="w-full p-3 border-2 border-gray-300 rounded-lg bg-white hover:border-blue-500 focus:border-blue-500 focus:outline-none transition-colors duration-200"
+        className="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:text-white dark:bg-[#2b2661] hover:border-blue-500 focus:border-blue-500 focus:outline-none transition-colors duration-200"
         whileHover={{ scale: 1.02 }}
         whileTap={{ scale: 0.98 }}
       />
diff --git a/src/components/ImageQRCodeGenerator.js b/src/components/ImageQRCodeGenerator.js
index ed69003..fd98374 100644
--- a/src/components/ImageQRCodeGenerator.js
+++ b/src/components/ImageQRCodeGenerator.js
@@ -45,21 +45,21 @@ export default function ImageQRCodeGenerator() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <h1 className="text-4xl font-bold text-center text-gray-800 mb-6">Image to QR Code Generator</h1>
-      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div className="min-h-screen p-8">
+      <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Image to QR Code Generator</h1>
+      <div className="max-w-md mx-auto bg-indigo-200 dark:bg-purple-950 rounded-2xl shadow-lg p-6">
         <motion.div
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
-          className="border-2 border-dashed border-gray-300 p-6 rounded-lg text-center"
+          className="border-2 border-dashed border-gray-600 dark:border-gray-300 p-6 rounded-xl text-center"
         >
           <label className="cursor-pointer">
-            <FaCloudUploadAlt className="text-6xl text-gray-400 mx-auto mb-4" />
-            <span className="block text-gray-600 font-medium mb-2">Click to upload image</span>
+            <FaCloudUploadAlt className="text-6xl text-gray-600 dark:text-gray-300 mx-auto mb-4" />
+            <span className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Click to upload image</span>
             <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
           </label>
         </motion.div>
-        {isUploading && <p className="text-center text-gray-600 mt-4">Uploading...</p>}
+        {isUploading && <p className="text-center text-gray-600 dark:text-gray-300 mt-4">Uploading...</p>}
         {imageFile && !isUploading && (
           <>
             <div className="mt-6">
@@ -71,7 +71,7 @@ export default function ImageQRCodeGenerator() {
               <h2 className="text-xl font-bold text-gray-800 mb-2">QR Code Customization:</h2>
               <div className="flex justify-between items-center">
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Color</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Color</label>
                   <input 
                     type="color" 
                     value={qrColor} 
@@ -80,21 +80,21 @@ export default function ImageQRCodeGenerator() {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Size</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Size</label>
                   <input 
                     type="number" 
                     value={qrSize} 
                     onChange={(e) => setQrSize(Number(e.target.value))} 
                     min="128" 
                     max="512" 
-                    className="w-full p-2 border border-gray-300 rounded-lg"
+                    className="w-full p-2 border border-gray-400 rounded-lg"
                   />
                 </div>
               </div>
             </div>
 
             <div className="mt-6">
-              <h2 className="text-xl font-bold text-gray-800 mb-2">Generated QR Code:</h2>
+              <h2 className="text-xl font-bolddark:text-gray-200 text-gray-800 mb-2">Generated QR Code:</h2>
               <div ref={qrRef} className="flex justify-center">
                 <QRCode value={qrCodeURL} size={qrSize} fgColor={qrColor} />
               </div>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 7874976..1e4291c 100644
--- a/src/components/Navbar.js
+++ b/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 { AnimatePresence, motion } from "framer-motion";
 
 import {
   FaUser,
@@ -19,10 +20,8 @@ import { MdLightMode } from "react-icons/md";
 export default function Navbar() {
   const { currentUser, logout } = useAuth();
   const navigate = useNavigate();
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const dropdownRef = useRef(null);
 
-  const { darkMode, setDarkMode } = useContext(ThemeContext);
+  const { theme, toggleTheme } = useContext(ThemeContext);
 
   const handleLogout = async () => {
     try {
@@ -33,34 +32,42 @@ export default function Navbar() {
     }
   };
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null); // Button ke liye separate ref
 
   const toggleDropdown = () => {
-    setDropdownOpen(!dropdownOpen);
+    setDropdownOpen((prev) => !prev);
   };
+  
 
   // Close the dropdown if clicked outside
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setDropdownOpen(false);
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target)
+      ) {
+        setDropdownOpen(false); // Only close the dropdown when clicking outside
       }
     };
-
+  
     document.addEventListener("mousedown", handleClickOutside);
+  
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [dropdownRef]);
+  }, [dropdownRef, buttonRef]);
+  
 
   return (
     <nav
-      className={`p-4 shadow-lg ${
-        darkMode
-          ? "bg-[#00050e] border-b-[1px] border-[#333333]"
-          : "bg-gradient-to-r from-indigo-600 to-purple-600"
-      }`}
+      className="p-4"
     >
-      <div className="container mx-auto flex justify-between items-center">
+      
+      <div className="container mx-auto flex justify-between items-center px-3">
         <div className="flex items-center space-x-3">
           <FaQrcode className="text-white h-8 w-8" />
           <Link
@@ -71,15 +78,16 @@ export default function Navbar() {
             QR Code Customizer
           </Link>
         </div>
-        <div className="hidden md:flex items-center space-x-4">
+        <div className="flex items-center space-x-4">
           {currentUser ? (
             <>
               <div className="relative flex items-center">
                 <button
+                  ref={buttonRef}
                   onClick={toggleDropdown}
                   className="flex items-center text-white hover:text-indigo-200 transition duration-300 focus:outline-none"
                 >
-                  <div className="flex items-center max-w-md">
+                  <div className="hidden md:flex items-center">
                     <img
                       src={
                         currentUser.photoURL
@@ -89,55 +97,66 @@ export default function Navbar() {
                       alt="Avatar"
                       className="w-8 h-8 rounded-full mr-2"
                     />
-                    <span className="text-white hover:text-indigo-300 ">
+                    <span className="text-white hover:text-indigo-300 font-semibold">
                       {currentUser.displayName
                         ? currentUser.displayName
                         : "User"}
                     </span>
                   </div>
-                  <FaBars className="text-xl ml-2 md:hidden" />
+                  <FaBars className="text-2xl ml-2 md:hidden" />
                 </button>
                 <div className="relative" ref={dropdownRef}>
-                  {dropdownOpen && (
-                    <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-2 z-20">
-                      <Link
-                        to="/dashboard"
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-                      >
-                        <FaUser className="mr-2" />
-                        Dashboard
-                      </Link>
-                      <Link
-                        to="/profile"
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+                  <AnimatePresence>
+                    {dropdownOpen && (
+                      <motion.div
+                        key="dropdown"
+                        initial={{ opacity: 0, x: 40, scale: 0.8 }}
+                        animate={{ opacity: 1, x: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 40, scale: 0.8 }}
+                        transition={{ duration: 0.15 }}
                       >
-                        <FaUser className="mr-2" />
-                        Profile
-                      </Link>
-                      <Link
-                        to="/settings"
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-                      >
-                        <FaCog className="mr-2" />
-                        Settings
-                      </Link>
-                      <button
-                        onClick={handleLogout}
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-red-500 hover:text-white transition duration-300 w-full"
-                      >
-                        <FaSignOutAlt className="mr-2" />
-                        Logout
-                      </button>
-                    </div>
-                  )}
+                        <div className="absolute right-0 top-5 w-72 bg-violet-700 rounded-xl shadow-lg p-4 z-20">
+                          <Link
+                            to="/dashboard"
+                            className="flex rounded-xl items-center px-4 py-2 text-white hover:bg-cyan-500 text-lg hover:text-white transition duration-300"
+                          >
+                            <FaUser className="mr-2" />
+                            Dashboard
+                          </Link>
+                          <Link
+                            to="/profile"
+                            className="flex rounded-xl items-center px-4 py-2 text-white hover:bg-cyan-500 text-lg hover:text-white transition duration-300"
+                          >
+                            <FaUser className="mr-2" />
+                            Profile
+                          </Link>
+                          <Link
+                            to="/settings"
+                            className="flex rounded-xl items-center px-4 py-2 text-white hover:bg-cyan-500 text-lg hover:text-white transition duration-300"
+                          >
+                            <FaCog className="mr-2" />
+                            Settings
+                          </Link>
+                          <button
+                            onClick={handleLogout}
+                            className="flex rounded-xl items-center px-4 py-2 text-white hover:bg-red-500 text-lg hover:text-white transition duration-300 w-full"
+                          >
+                            <FaSignOutAlt className="mr-2" />
+                            Logout
+                          </button>
+                          <button
+                            onClick={toggleTheme}
+                            className="md:hidden flex rounded-xl items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-cyan-500 text-lg hover:text-white transition duration-300 w-full"
+                          >
+                            {theme === 'dark'  ? <MdLightMode /> : <FaMoon />}
+                            {theme === 'dark'  ? "Light Mode" : "Dark Mode"}
+                          </button>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
                 </div>
               </div>
-              <button
-                onClick={()=>{setDarkMode(!darkMode);}}
-                className="text-white hover:text-indigo-200 transition duration-300 text-xl"
-              >
-                {darkMode ? <MdLightMode/> : <FaMoon/>}
-              </button>
             </>
           ) : (
             <>
@@ -157,74 +176,14 @@ export default function Navbar() {
               </Link>
             </>
           )}
-        </div>
-        {/* Mobile Dropdown Button */}
-        <div className="md:hidden">
-          <button onClick={toggleDropdown} className="text-white">
-            <FaBars />
+          <button
+            onClick={toggleTheme}
+            className="max-md:hidden text-white hover:text-indigo-200 transition duration-300 text-xl"
+          >
+            {theme==='dark' ? <MdLightMode /> : <FaMoon />}
           </button>
         </div>
       </div>
-      {/* Mobile Dropdown Menu */}
-      {dropdownOpen && (
-        <div className="md:hidden mt-2 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg py-2 z-20">
-          {currentUser ? (
-            <>
-              <Link
-                to="/dashboard"
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-              >
-                <FaUser className="mr-2" />
-                Dashboard
-              </Link>
-              <Link
-                to="/profile"
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-              >
-                <FaUser className="mr-2" />
-                Profile
-              </Link>
-              <Link
-                to="/settings"
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-              >
-                <FaCog className="mr-2" />
-                Settings
-              </Link>
-              <button
-                onClick={handleLogout}
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-red-500 hover:text-white transition duration-300 w-full"
-              >
-                <FaSignOutAlt className="mr-2" />
-                Logout
-              </button>
-              <button
-                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
-              </button>
-            </>
-          ) : (
-            <>
-              <Link
-                to="/login"
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-              >
-                <FaSignInAlt className="mr-2" />
-                Login
-              </Link>
-              <Link
-                to="/register"
-                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-              >
-                <FaUserPlus className="mr-2" />
-                Register
-              </Link>
-            </>
-          )}
-        </div>
-      )}
     </nav>
   );
 }
diff --git a/src/components/PDFToQR.js b/src/components/PDFToQR.js
index b9341ba..d845f1c 100644
--- a/src/components/PDFToQR.js
+++ b/src/components/PDFToQR.js
@@ -45,21 +45,21 @@ export default function PdfQRCodeGenerator() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <h1 className="text-4xl font-bold text-center text-gray-800 mb-6">PDF to QR Code Generator</h1>
-      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div className="min-h-screen p-8">
+      <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">PDF to QR Code Generator</h1>
+      <div className="max-w-md mx-auto bg-indigo-200 dark:bg-purple-950 rounded-lg shadow-lg p-6">
         <motion.div
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
-          className="border-2 border-dashed border-gray-300 p-6 rounded-lg text-center"
+          className="border-2 border-dashed border-gray-600 dark:border-gray-300 p-6 rounded-lg text-center"
         >
           <label className="cursor-pointer">
             <FaCloudUploadAlt className="text-6xl text-gray-400 mx-auto mb-4" />
-            <span className="block text-gray-600 font-medium mb-2">Click to upload PDF</span>
+            <span className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Click to upload PDF</span>
             <input type="file" accept="application/pdf" onChange={handlePdfUpload} className="hidden" />
           </label>
         </motion.div>
-        {isUploading && <p className="text-center text-gray-600 mt-4">Uploading...</p>}
+        {isUploading && <p className="text-center text-gray-600 dark:text-gray-300 mt-4">Uploading...</p>}
         {pdfFile && !isUploading && (
           <>
             <div className="mt-6">
@@ -73,7 +73,7 @@ export default function PdfQRCodeGenerator() {
               <h2 className="text-xl font-bold text-gray-800 mb-2">QR Code Customization:</h2>
               <div className="flex justify-between items-center">
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Color</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Color</label>
                   <input 
                     type="color" 
                     value={qrColor} 
@@ -82,21 +82,21 @@ export default function PdfQRCodeGenerator() {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Size</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Size</label>
                   <input 
                     type="number" 
                     value={qrSize} 
                     onChange={(e) => setQrSize(Number(e.target.value))} 
                     min="128" 
                     max="512" 
-                    className="w-full p-2 border border-gray-300 rounded-lg"
+                    className="w-full p-2 border border-gray-400 rounded-lg"
                   />
                 </div>
               </div>
             </div>
 
             <div className="mt-6">
-              <h2 className="text-xl font-bold text-gray-800 mb-2">Generated QR Code:</h2>
+              <h2 className="text-xl font-bold dark:text-gray-200 text-gray-800 mb-2">Generated QR Code:</h2>
               <div ref={qrRef} className="flex justify-center">
                 <QRCode value={qrCodeURL} size={qrSize} fgColor={qrColor} />
               </div>
diff --git a/src/components/Profile.js b/src/components/Profile.js
index 929d167..f107243 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -23,11 +23,11 @@ const avatars = [
 export default function Profile() {
   const { currentUser, logout } = useAuth();
   const navigate = useNavigate();
-  const [displayName, setDisplayName] = useState(currentUser.displayName || "");
-  const [newPassword, setNewPassword] = useState("");
-  const [selectedAvatar, setSelectedAvatar] = useState(
-    currentUser.photoURL ? currentUser.photoURL : avatars[0]
+  const [displayName, setDisplayName] = useState(
+    currentUser.displayName ? currentUser.displayName : ""
   );
+  const [newPassword, setNewPassword] = useState("");
+  const [selectedAvatar, setSelectedAvatar] = useState(currentUser.photoURL);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -81,13 +81,13 @@ export default function Profile() {
       initial={{ opacity: 0, y: 50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.6, ease: "easeOut" }}
-      className="p-6 md:p-8 max-w-md lg:max-w-lg mx-auto bg-gradient-to-br from-blue-500 via-indigo-600 to-purple-600 rounded-2xl shadow-2xl space-y-8 mt-12 text-white"
+      className="p-6 md:p-8 max-w-md lg:max-w-lg mx-auto bg-purple-100 dark:bg-[#2b2661] rounded-2xl shadow-2xl space-y-8 mt-4 text-white"
     >
       <motion.h1
         initial={{ scale: 0.8 }}
         animate={{ scale: 1 }}
         transition={{ duration: 0.5, ease: "easeOut" }}
-        className="text-3xl md:text-4xl font-extrabold text-center"
+        className="text-3xl md:text-4xl font-extrabold text-gray-700 dark:text-gray-200 text-center"
       >
         Profile
       </motion.h1>
@@ -97,7 +97,6 @@ export default function Profile() {
       {success && (
         <p className="text-green-400 text-center font-semibold">{success}</p>
       )}
-
       <div className="text-center">
         <img
           src={selectedAvatar}
@@ -119,14 +118,14 @@ export default function Profile() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.2, duration: 0.5 }}
         >
-          <label className="block text-lg font-medium">Display Name</label>
+          <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">Display Name</label>
           <div className="relative mt-2">
-            <FaUserEdit className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-300" />
+            <FaUserEdit className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               value={displayName}
               onChange={(e) => setDisplayName(e.target.value)}
-              className="font-semibold pl-12 pr-4 py-3 border border-gray-400 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-black bg-gray-50 text-gray-900 transition duration-300"
+              className="font-semibold pl-12 pr-4 py-3 border border-gray-400 dark:text-gray-200 dark:bg-indigo-950 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-black bg-gray-50 text-gray-900 transition duration-300"
               placeholder="Enter your display name"
             />
           </div>
@@ -137,16 +136,17 @@ export default function Profile() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.4, duration: 0.5 }}
         >
-          <label className="block text-lg font-medium">Email</label>
+          <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>
+            <MdMarkEmailRead className="text-xl absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400" />
+            <input
+              type="email"
+              value={currentUser.email}
+              disabled
+              className="font-semibold pl-12 py-3 border border-gray-400 dark:text-gray-200 dark:bg-indigo-950 rounded-lg w-full bg-gray-200 cursor-not-allowed text-gray-900"
+              placeholder="Your email address"
+            />
+          </div>
         </motion.div>
 
         <motion.div
@@ -154,14 +154,14 @@ export default function Profile() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.6, duration: 0.5 }}
         >
-          <label className="block text-lg font-medium">New Password</label>
+          <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">New Password</label>
           <div className="relative mt-2">
-            <FaLock className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-300" />
+            <FaLock className="absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-400" />
             <input
               type="password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
-              className="font-semibold pl-12 pr-4 py-3 border border-gray-400 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-black bg-gray-50 text-gray-900 transition duration-300"
+              className="font-semibold pl-12 pr-4 py-3 border border-gray-400 dark:text-gray-200 dark:bg-indigo-950 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-black bg-gray-50 text-gray-900 transition duration-300"
               placeholder="Enter new password"
             />
           </div>
diff --git a/src/components/QRCodeCanvas.js b/src/components/QRCodeCanvas.js
index e941659..35420da 100644
--- a/src/components/QRCodeCanvas.js
+++ b/src/components/QRCodeCanvas.js
@@ -6,7 +6,7 @@ export default function QRCodeCanvas({ qrCodeRef, loading }) {
     <div className="flex justify-center mt-8">
       <motion.div
         ref={qrCodeRef}
-        className="p-8 bg-white rounded-2xl shadow-xl border border-gray-300 transition-transform duration-300 ease-in-out transform-gpu"
+        className="p-8 bg-white dark:bg-[#2b2661] rounded-2xl shadow-xl border border-gray-300 transition-transform duration-300 ease-in-out transform-gpu"
         whileHover={{ scale: 1.08, rotate: 1 }}
         whileTap={{ scale: 0.95, rotate: -1 }}
       >
diff --git a/src/components/QRCodeGenerator.js b/src/components/QRCodeGenerator.js
index 643adb9..68bf161 100644
--- a/src/components/QRCodeGenerator.js
+++ b/src/components/QRCodeGenerator.js
@@ -120,14 +120,14 @@ export default function QRCodeGenerator() {
 
   return (
     <motion.div
-      className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-lg mt-10"
+      className="p-8 max-w-lg mx-auto bg-indigo-100 dark:bg-indigo-950 rounded-xl shadow-lg mt-10"
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.5, ease: 'easeOut' }}
       whileHover={{ scale: 1.02 }}
     >
       <motion.h1
-        className="text-4xl font-bold mb-6 text-center text-gray-800"
+        className="text-4xl font-bold mb-6 text-center text-gray-800 dark:text-gray-100"
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1, duration: 0.5, ease: 'easeOut' }}
@@ -150,14 +150,14 @@ export default function QRCodeGenerator() {
           animate={{ opacity: 1, x: 0 }}
           transition={{ delay: 0.2, duration: 0.5, ease: 'easeOut' }}
         >
-          <label className="block mb-2 text-gray-700 capitalize">
+          <label className="block mb-2 text-gray-700 dark:text-gray-200 capitalize">
             {category} Input
           </label>
           <textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
             rows="4"
-            className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+            className="w-full dark:bg-[#2b2661] dark:text-gray-200 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 shadow-lg"
             placeholder={`Enter ${category}`}
           />
         </motion.div>
diff --git a/src/components/QRScanner.js b/src/components/QRScanner.js
index 064325a..cac2ac1 100644
--- a/src/components/QRScanner.js
+++ b/src/components/QRScanner.js
@@ -130,13 +130,13 @@ export default function QRScanner() {
     };
 
     return (
-        <div className="p-8 bg-white shadow-lg rounded-lg max-w-lg mx-auto">
-            <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800 flex items-center justify-center">
+        <div className="p-8 bg-purple-100 dark:bg-[#2b2661] shadow-lg rounded-lg max-w-lg mx-auto">
+            <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800 flex items-center justify-center dark:text-gray-200">
                 <FaCamera className="mr-2" /> QR Code Scanner
             </h1>
 
             <div className="mb-6">
-                <h2 className="text-2xl font-bold text-gray-700 mb-4 flex items-center">
+                <h2 className="text-2xl font-bold text-gray-700 mb-4 flex items-center dark:text-gray-300">
                     <FaCamera className="mr-2" /> Scan with Camera
                 </h2>
                 <div className="flex w-full justify-center gap-5 items-center">
@@ -150,7 +150,7 @@ export default function QRScanner() {
                     </button>
 
                     {noCameraFound ? (
-                        <div className="px-4 py-2 rounded-md mb-4 bg-red-100 text-red-800 flex flex-col items-center">
+                        <div className="px-4 py-2 rounded-md mb-4 bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 flex flex-col items-center">
                             <p className="font-semibold flex items-center justify-between">No Camera Found!</p>
                             <p className="text-xs">Check site permissions and devices</p>
                         </div>
@@ -189,14 +189,14 @@ export default function QRScanner() {
             </div>
 
             <div className="mb-6">
-                <h2 className="text-2xl font-bold text-gray-700 mb-4 flex items-center">
+                <h2 className="text-2xl font-bold text-gray-700 mb-4 flex items-center  dark:text-gray-200">
                     <FaImage className="mr-2" /> Scan from Image
                 </h2>
                 <input
                     type="file"
                     accept="image/*"
                     onChange={handleImageChange}
-                    className="mb-4 w-full p-2 border border-gray-300 rounded-lg"
+                    className="mb-4 w-full p-2 border border-gray-400  dark:text-gray-200 rounded-lg"
                 />
             </div>
 
diff --git a/src/components/Setting.js b/src/components/Setting.js
index 0625acc..d8b8770 100644
--- a/src/components/Setting.js
+++ b/src/components/Setting.js
@@ -68,60 +68,60 @@ export default function Settings() {
 
   return (
     <motion.div
-      className="min-h-screen flex items-center justify-center bg-gradient-to-r from-indigo-400 to-purple-500 p-6"
+      className="min-h-screen flex items-center justify-center p-6"
       initial={{ opacity: 0, y: 50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
     >
-      <div className="bg-white rounded-xl shadow-lg p-8 max-w-lg w-full space-y-6 transition-transform transform hover:scale-105">
+      <div className="bg-purple-100 dark:bg-[#2b2661] rounded-xl shadow-lg p-8 max-w-lg w-full space-y-6 transition-transform transform hover:scale-105">
         <div className="flex items-center justify-center">
-          <FaUserCog className="text-blue-600 w-16 h-16" />
+          <FaUserCog className="text-blue-500 w-16 h-16" />
         </div>
-        <h1 className="text-3xl font-extrabold text-center text-gray-800">Settings</h1>
+        <h1 className="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-200">Settings</h1>
         
         {success && <p className="text-green-500 text-center font-semibold">{success}</p>}
         {error && <p className="text-red-500 text-center font-semibold">{error}</p>}
 
         <form className="space-y-4">
           <div>
-            <label className="block text-lg font-medium text-gray-700">Display Name</label>
+            <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">Display Name</label>
             <div className="relative">
               <input
                 type="text"
                 value={displayName}
                 onChange={(e) => setDisplayName(e.target.value)}
-                className="mt-2 p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
+                className="mt-2 p-3 border border-gray-400 dark:bg-indigo-950 dark:text-gray-200 font-semibold rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
                 placeholder="Enter your display name"
               />
-              <FaUserCog className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" />
+              <FaUserCog className="absolute text-xl left-2 top-1/2 mt-1 transform -translate-y-1/2 text-gray-400" />
             </div>
           </div>
 
           <div>
-            <label className="block text-lg font-medium text-gray-700">Email</label>
+            <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">Email</label>
             <div className="relative">
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="mt-2 p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
+                className="mt-2 p-3 border border-gray-400 dark:bg-indigo-950 dark:text-gray-200 font-semibold rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
                 placeholder="Enter your email"
               />
-              <AiOutlineMail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" />
+              <AiOutlineMail className="absolute text-xl left-2 top-1/2 mt-1 transform -translate-y-1/2 text-gray-400" />
             </div>
           </div>
 
           <div>
-            <label className="block text-lg font-medium text-gray-700">New Password</label>
+            <label className="block text-lg font-medium text-gray-700 dark:text-gray-300">New Password</label>
             <div className="relative">
               <input
                 type="password"
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
-                className="mt-2 p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
+                className="mt-2 p-3 border border-gray-400 dark:bg-indigo-950 dark:text-gray-200 font-semibold rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 pl-10"
                 placeholder="Enter new password"
               />
-              <AiOutlineLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" />
+              <AiOutlineLock className="absolute text-xl left-2 top-1/2 mt-1 transform -translate-y-1/2 text-gray-400" />
             </div>
           </div>
 
@@ -129,25 +129,25 @@ export default function Settings() {
             <button
               type="button"
               onClick={handleUpdateProfile}
-              className="bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300 shadow-md flex items-center justify-center"
+              className="bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-300 shadow-md flex items-center justify-center"
             >
-              <FaUserCog className="mr-2" />
+              <FaUserCog className="mr-2 text-3xl" />
               Update Profile
             </button>
             <button
               type="button"
               onClick={handleUpdateEmail}
-              className="bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 transition duration-300 shadow-md flex items-center justify-center"
+              className="bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition duration-300 shadow-md flex items-center justify-center"
             >
-              <AiOutlineMail className="mr-2" />
+              <AiOutlineMail className="mr-2 text-3xl" />
               Update Email
             </button>
             <button
               type="button"
               onClick={handleUpdatePassword}
-              className="bg-yellow-600 text-white py-3 px-6 rounded-lg hover:bg-yellow-700 transition duration-300 shadow-md flex items-center justify-center"
+              className="bg-yellow-600 text-white py-3 px-4 rounded-lg hover:bg-yellow-700 transition duration-300 shadow-md flex items-center justify-center"
             >
-              <AiOutlineLock className="mr-2" />
+              <AiOutlineLock className="mr-2 text-3xl" />
               Update Password
             </button>
           </div>
@@ -158,7 +158,7 @@ export default function Settings() {
               onClick={handleLogout}
               className="bg-red-600 text-white py-3 px-6 rounded-lg hover:bg-red-700 transition duration-300 shadow-md w-full flex items-center justify-center"
             >
-              <FaUserCog className="mr-2" />
+              <FaUserCog className="mr-2 text-xl" />
               Logout
             </button>
           </div>
diff --git a/src/components/SizeSlider.js b/src/components/SizeSlider.js
index 977bb09..107891d 100644
--- a/src/components/SizeSlider.js
+++ b/src/components/SizeSlider.js
@@ -4,8 +4,8 @@ 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">
-        <FaExpandArrowsAlt className="mr-2 text-gray-500" />
+      <label className=" mb-2 text-gray-600 dark:text-gray-300 flex items-center">
+        <FaExpandArrowsAlt className="mr-2" />
         Size
       </label>
       <div className="relative">
@@ -15,14 +15,14 @@ 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"
+          className="w-full h-2 bg-gray-300 dark:bg-[#2b2661] 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}%` }}
         />
       </div>
-      <span className="block text-center text-gray-600 mt-2 text-lg font-semibold">
+      <span className="block text-center text-gray-600 dark:text-gray-300 mt-2 text-lg font-semibold">
         {size}px
       </span>
     </div>
diff --git a/src/components/SocialMedia.js b/src/components/SocialMedia.js
index 9dd7d0d..5974e4a 100644
--- a/src/components/SocialMedia.js
+++ b/src/components/SocialMedia.js
@@ -44,8 +44,8 @@ export default function SocialMedia() {
   };
 
   return (
-    <div className="p-8 bg-white shadow-lg rounded-lg max-w-lg mx-auto">
-      <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800">Generate Social Media QR Code</h1>
+    <div className="p-8 bg-indigo-100 dark:bg-indigo-950 shadow-lg rounded-lg max-w-lg mx-auto">
+      <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800 dark:text-gray-200">Generate Social Media QR Code</h1>
 
       <div className="flex flex-wrap justify-center mb-6">
         {socialMediaOptions.map((platform) => (
@@ -68,29 +68,29 @@ export default function SocialMedia() {
           placeholder="Enter your URL or text"
           value={text}
           onChange={(e) => setText(e.target.value)}
-          className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full p-3 border border-gray-300 dark:border-gray-600  bg-purple-100 dark:bg-[#2b2661] rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-lg"
         />
       </div>
 
       <div className="mb-4">
-        <label className="block mb-2 text-lg font-semibold">Size</label>
+        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">Size</label>
         <input
           type="range"
           min="128"
           max="512"
           value={size}
           onChange={(e) => setSize(e.target.value)}
-          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          className="w-full h-2 bg-gray-300 dark:bg-[#2b2661] rounded-lg appearance-none cursor-pointer slider-thumb"
         />
       </div>
 
       <div className="mb-4">
-        <label className="block mb-2 text-lg font-semibold">Background Color</label>
+        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">Background Color</label>
         <input
           type="color"
           value={bgColor}
           onChange={(e) => setBgColor(e.target.value)}
-          className="w-full p-1 border border-gray-300 rounded-lg cursor-pointer"
+          className="w-full p-1 border border-gray-400 dark:bg-[#2b2661] dark:border-gray-600 rounded-lg cursor-pointer"
         />
       </div>
 
diff --git a/src/components/Support.js b/src/components/Support.js
index e1c7e79..b1b762a 100644
--- a/src/components/Support.js
+++ b/src/components/Support.js
@@ -16,34 +16,34 @@ export default function Support() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-green-400 to-blue-500 p-6">
-      <div className="bg-white rounded-xl shadow-lg p-8 max-w-lg w-full space-y-6 transition-transform transform hover:scale-105">
+    <div className="min-h-screen flex items-center justify-center p-6">
+      <div className=" bg-purple-100 dark:bg-[#2b2661] rounded-xl shadow-lg p-8 max-w-lg w-full space-y-6 transition-transform transform hover:scale-105">
         <div className="flex items-center justify-center">
-          <BiSupport className="text-blue-600 w-16 h-16" />
+          <BiSupport className="text-blue-500 w-16 h-16" />
         </div>
-        <h1 className="text-3xl font-extrabold text-center text-gray-800">Support</h1>
-        <p className="text-center text-gray-600">Have any questions or need help? Fill out the form below, and we will get back to you as soon as possible.</p>
+        <h1 className="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-200">Support</h1>
+        <p className="text-center text-gray-600 dark:text-gray-400">Have any questions or need help? Fill out the form below, and we will get back to you as soon as possible.</p>
         
         {success && <p className="text-green-500 text-center font-semibold">{success}</p>}
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-lg font-medium text-gray-700">Email</label>
+            <label className="block text-lg font-medium text-gray-700 dark:text-gray-400">Email</label>
             <input
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              className="mt-2 p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+              className="mt-2 p-3 border border-gray-400 dark:border-gray-600 rounded-lg w-full dark:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
               placeholder="Enter your email"
               required
             />
           </div>
           <div>
-            <label className="block text-lg font-medium text-gray-700">Message</label>
+            <label className="block text-lg font-medium text-gray-700 dark:text-gray-400">Message</label>
             <textarea
               value={message}
               onChange={(e) => setMessage(e.target.value)}
-              className="mt-2 p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+              className="mt-2 p-3 border border-gray-400 dark:border-gray-600 rounded-lg w-full dark:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
               placeholder="Enter your message"
               rows="5"
               required
diff --git a/src/components/VCardForm.js b/src/components/VCardForm.js
index b2cf802..d3d9bb1 100644
--- a/src/components/VCardForm.js
+++ b/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 my-4 bg-purple-100 dark:bg-[#2b2661] rounded-lg shadow-md max-w-4xl mx-auto">
       <div className="space-y-6">
         {[
           { name: 'fullName', label: 'Full Name', icon: faUser, placeholder: 'John Doe' },
@@ -27,10 +27,10 @@ export default function VCardForm({ vCardDetails, setVCardDetails, setText }) {
           { name: 'birthday', label: 'Birthday', icon: faCalendarAlt, type: 'date' },
           { name: 'url', label: 'URL', icon: faLink, placeholder: 'http://example.com' }
         ].map(({ name, label, icon, placeholder, type = 'text' }) => (
-          <div key={name} className="flex items-center space-x-4">
-            <FontAwesomeIcon icon={icon} className="text-gray-600" />
-            <div className="flex-1">
-              <label htmlFor={name} className="block text-gray-700 font-medium mb-1 capitalize">{label}</label>
+          <div key={name} className="">
+            <label htmlFor={name} className="block ml-6 text-gray-700 dark:text-gray-200 font-medium mb-1 capitalize">{label}</label>
+            <div className="flex space-x-3 items-center">
+            <FontAwesomeIcon icon={icon} className="text-gray-600 dark:text-gray-200" />
               <input
                 type={type}
                 id={name}
@@ -38,7 +38,7 @@ export default function VCardForm({ vCardDetails, setVCardDetails, setText }) {
                 value={vCardDetails[name] || ''}
                 onChange={handleVCardInputChange}
                 placeholder={placeholder}
-                className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+                className="w-full p-3 border bg-transparent dark:text-gray-200 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
               />
             </div>
           </div>
diff --git a/src/components/WifiForm.js b/src/components/WifiForm.js
index 55ddbf4..27efe15 100644
--- a/src/components/WifiForm.js
+++ b/src/components/WifiForm.js
@@ -16,17 +16,17 @@ 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 my-4 bg-white dark:bg-[#2b2661] rounded-lg shadow-md max-w-4xl mx-auto">
       <div className="space-y-6">
         {[
           { name: 'ssid', label: 'SSID', icon: faWifi, placeholder: 'Your Network Name' },
           { name: 'encryption', label: 'Encryption', icon: faLock, placeholder: 'WPA/WPA2' },
           { name: 'password', label: 'Password', icon: faNetworkWired, placeholder: 'Your Network Password' }
         ].map(({ name, label, icon, placeholder }) => (
-          <div key={name} className="flex items-center space-x-4">
-            <FontAwesomeIcon icon={icon} className="text-gray-600" />
-            <div className="flex-1">
-              <label htmlFor={name} className="block text-gray-700 font-medium mb-1 capitalize">{label}</label>
+          <div key={name} className="">
+              <label htmlFor={name} className="block ml-6 text-gray-700 dark:text-gray-200 font-medium mb-1 capitalize">{label}</label>
+            <div className="flex space-x-3 items-center">
+            <FontAwesomeIcon icon={icon} className="text-gray-600 dark:text-gray-200" />
               <input
                 type="text"
                 id={name}
@@ -34,7 +34,7 @@ export default function WifiForm({ wifiDetails, setWifiDetails, setText }) {
                 value={wifiDetails[name] || ''}
                 onChange={handleWifiInputChange}
                 placeholder={placeholder}
-                className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 transition-transform duration-300 ease-in-out"
+                className="w-full p-3 border bg-transparent dark:text-gray-200 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 transition-transform duration-300 ease-in-out"
               />
             </div>
           </div>
diff --git a/src/context/ThemeContext.js b/src/context/ThemeContext.js
index d73ec24..46d9092 100644
--- a/src/context/ThemeContext.js
+++ b/src/context/ThemeContext.js
@@ -1,24 +1,37 @@
-import { createContext, useState, useEffect } from 'react';
+import { createContext, useState, useEffect } from "react";
 
-const ThemeContext = createContext();
+export const ThemeContext = createContext();
 
-const ThemeProvider = ({ children }) => {
-  // Check localStorage for the darkMode preference on initial load
-  const [darkMode, setDarkMode] = useState(() => {
-    const storedPreference = localStorage.getItem('qr-web-darkMode');
-    return storedPreference ? JSON.parse(storedPreference) : false; // Default to false(light theme)
-  });
+export const ThemeProvider = ({ children }) => {
+  const getInitialTheme = () => {
+    if (typeof window !== "undefined") {
+      return (
+        localStorage.getItem("theme") ||
+        (window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light")
+      );
+    }
+    return "light"; // Default to light theme if window is not defined
+  };
+
+  const [theme, setTheme] = useState(getInitialTheme);
 
-  // Update localStorage whenever it changes
   useEffect(() => {
-    localStorage.setItem('qr-web-darkMode', JSON.stringify(darkMode));
-  }, [darkMode]);
+    // Remove the previous theme and add the new one
+    document.documentElement.classList.remove("dark", "light");
+    document.documentElement.classList.add(theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  };
 
   return (
-    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
       {children}
     </ThemeContext.Provider>
   );
 };
-
-export { ThemeProvider, ThemeContext };
diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js
index 5d57b92..175e90f 100644
--- a/src/pages/DashboardPage.js
+++ b/src/pages/DashboardPage.js
@@ -17,7 +17,6 @@ import { ThemeContext } from "../context/ThemeContext";
 import { useAuth } from "../context/AuthContext";
 
 export default function DashboardPage() {
-  const { darkMode } = useContext(ThemeContext);
   const { logout } = useAuth();
   const navigate = useNavigate();
   const dasHBoardCards = [
@@ -112,13 +111,11 @@ export default function DashboardPage() {
     }
   };
   return (
+    <div className="p-2">
     <div
-      className={`min-h-screen bg-gradient-to-r p-8 ${
-        darkMode
-          ? "bg-gradient-to-r from-[#192646] to-[#00050e]"
-          : " bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500"
-      }`}
+      className="min-h-screen rounded-3xl bg-gradient-to-r p-8 from-violet-500 via-purple-500 to-pink-500 dark:from-violet-950 dark:to-indigo-950"
     >
+    {/* bg-gradient-to-r from-[#192646] to-[#00050e] */}
       <h1 className="text-5xl font-extrabold text-center text-white mb-12">
         Dashboard
       </h1>
@@ -132,9 +129,7 @@ export default function DashboardPage() {
                 boxShadow: "0px 15px 30px rgba(0, 0, 0, 0.2)",
               }}
               whileTap={{ scale: 0.98 }}
-              className={`p-6 ${
-                darkMode ? `${bgColor} filter brightness-100 ` : `${bgColor}`
-              } rounded-2xl shadow-lg transition-transform duration-300`}
+              className={`p-6 ${bgColor} dark:filter dark:brightness-100 rounded-2xl shadow-lg transition-transform duration-300`}
             >
               <Link to={to} className="text-center flex flex-col items-center">
                 <div
@@ -158,9 +153,7 @@ export default function DashboardPage() {
             boxShadow: "0px 15px 30px rgba(0, 0, 0, 0.2)",
           }}
           whileTap={{ scale: 0.98 }}
-          className={`p-6 ${
-            darkMode ? `bg-gray-600 filter brightness-100 ` : `bg-gray-600`
-          } rounded-2xl shadow-lg transition-transform duration-300 cursor-pointer`}
+          className="p-6 bg-gray-600 dark:filter dark:brightness-100 rounded-2xl shadow-lg transition-transform duration-300 cursor-pointer"
         >
           <div
             className="text-center flex flex-col items-center"
@@ -175,6 +168,6 @@ export default function DashboardPage() {
           </div>
         </motion.div>
       </div>
-    </div>
+    </div></div>
   );
 }
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 4eb05fc..9acffa4 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { FaQrcode, FaSignInAlt } from "react-icons/fa";
 import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from "react-icons/fa";
@@ -8,8 +8,10 @@ import TwitterLogo from "../assets/twitter.png";
 import MetaLogo from "../assets/meta.png";
 import InstagramLogo from "../assets/instagram.png";
 import { useAuth } from "../context/AuthContext";
+import { ThemeContext } from "../context/ThemeContext";
 
 export default function Home() {
+  // const { darkMode, setDarkMode } = useContext(ThemeContext);
   const { currentUser } = useAuth();
   const processStepCrads = [
     {
@@ -27,16 +29,17 @@ export default function Home() {
   ];
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gradient-to-r from-indigo-600 to-purple-600">
+    <div className="flex justify-center items-center min-h-screen p-2 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800">
+      
       <motion.div
-        className="text-center p-8 bg-white bg-opacity-90 rounded-3xl shadow-2xl"
+        className="text-center p-8 bg-white dark:bg-indigo-950 bg-opacity-90 rounded-3xl shadow-2xl"
         initial={{ opacity: 0, scale: 0.8 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.5, ease: "easeOut" }}
       >
         {/* QR Code Icon */}
         <motion.div
-          className="mx-auto text-gray-800 text-6xl mb-4"
+          className="mx-auto text-gray-800 dark:text-gray-200 text-6xl mb-4"
           initial={{ rotate: -45 }}
           animate={{ rotate: 0 }}
           transition={{ duration: 0.7, ease: "easeOut" }}
@@ -46,7 +49,7 @@ export default function Home() {
 
         {/* Welcome Message */}
         <motion.h1
-          className="text-5xl font-extrabold mb-6 text-gray-900"
+          className="text-5xl font-extrabold mb-6 text-gray-900 dark:text-gray-200"
           initial={{ y: -50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ duration: 0.7, delay: 0.2, ease: "easeOut" }}
@@ -56,7 +59,7 @@ export default function Home() {
 
         {/* Introductory Text */}
         <motion.p
-          className="text-lg mb-8 text-gray-700"
+          className="text-lg mb-8 text-gray-700 dark:text-gray-300"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.7, delay: 0.4, ease: "easeOut" }}
@@ -68,15 +71,15 @@ export default function Home() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {/* Card 1: Why use QR Codes? */}
           <motion.div
-            className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50"
+            className="bg-white dark:bg-indigo-900 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50 dark:hover:bg-indigo-900"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.7, delay: 0.5, ease: "easeOut" }}
           >
-            <p className="text-lg text-gray-700 mb-4">
+            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">
               💡 <span className="font-semibold">Why use QR Codes?</span>
             </p>
-            <p className="text-md text-gray-600">
+            <p className="text-md text-gray-600 dark:text-gray-300">
               QR codes are a versatile tool for businesses and personal use.
               They can link to websites, contact information, and even payment
               options. With our tool, you can create custom QR codes that match
@@ -86,15 +89,15 @@ export default function Home() {
 
           {/* Card 2: Intro to QR Codes */}
           <motion.div
-            className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate  duration-300 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50"
+            className="bg-white dark:bg-indigo-900 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50 dark:hover:bg-indigo-900"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.7, delay: 0.6, ease: "easeOut" }}
           >
-            <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-4">
               I’m new to QR Codes. What should I know?
             </h2>
-            <p className="text-md text-gray-600 mb-4">
+            <p className="text-md text-gray-600 dark:text-gray-300 mb-4">
               QR Code is a two-dimensional version of the barcode, typically
               made up of black and white pixel patterns. It was developed to
               accelerate logistics processes for automobile production. Now, it
@@ -102,7 +105,7 @@ export default function Home() {
             </p>
             <Link
               to="/more-info"
-              className="text-blue-600 hover:text-blue-800 transition-colors duration-300 hover:underline"
+              className="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 text-lg transition-colors duration-300 hover:underline"
             >
               Tell me more
             </Link>
@@ -135,10 +138,10 @@ export default function Home() {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.7, delay: 0.9, ease: "easeOut" }}
           >
-            <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
               How do I create a free QR Code?
             </h2>
-            <p className="text-md text-gray-600 mb-4">
+            <p className="text-md text-gray-600 dark:text-gray-400 mb-4">
               We’ll show you how in just three simple steps:
             </p>
           </motion.div>
@@ -150,15 +153,15 @@ export default function Home() {
             return (
               <motion.div
                 key={index}
-                className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-200 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50"
+                className="bg-white dark:bg-indigo-900 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-200 transform hover:-translate-y-2 hover:scale-105 hover:bg-purple-50 dark:hover:bg-indigo-900"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.7, delay: 1, ease: "easeOut" }}
               >
-                <h3 className="text-lg font-semibold text-gray-800 mb-2">
+                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">
                   {processStepCrad.heading}
                 </h3>
-                <p className="text-md text-gray-600 mb-4">
+                <p className="text-md text-gray-600 dark:text-gray-300 mb-4">
                   {processStepCrad.desc}
                 </p>
               </motion.div>
@@ -168,24 +171,24 @@ export default function Home() {
 
         {/* Centered Pro Tip Card */}
         <motion.div
-          className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-[102%] col-span-1 md:col-span-2"
+          className="bg-white dark:bg-indigo-900 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-[102%] col-span-1 md:col-span-2 text-gray-500 dark:text-gray-200 space-y-2"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.7, delay: 1.3, ease: "easeOut" }}
         >
-          <p className="text-gray-500 mb-2">
+          <p className="">
             Pro Tip: You can install this app on your mobile device by using
             Chrome's "Add to Home Screen" feature for quick access!
           </p>
-          <p className="text-gray-500 mb-2">
+          <p className="">
             Explore the endless possibilities with QR codes, from simplifying
             your business operations to enhancing your marketing efforts.
           </p>
-          <p className="text-gray-500">
+          <p className="">
             Don't have an account?
             <Link
               to="/register"
-              className="text-blue-600 hover:text-blue-800 transition-colors duration-300 hover:underline ml-1"
+              className="text-blue-600 dark:text-blue-400 hover:text-blue-700 transition-colors duration-300 hover:underline ml-1"
             >
               Sign up here
             </Link>
@@ -194,15 +197,15 @@ export default function Home() {
         </motion.div>
         {/* Follow Us on Social Section */}
         <motion.div
-          className="bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-[102%] col-span-1 md:col-span-2 mt-8"
+          className="bg-white dark:bg-indigo-900 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-translate duration-300 transform hover:-translate-y-2 hover:scale-[102%] col-span-1 md:col-span-2 mt-8"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.7, delay: 1.3, ease: "easeOut" }}
         >
-          <h3 className="text-xl font-bold text-gray-800">
+          <h3 className="text-xl font-bold text-gray-800 dark:text-gray-100 ">
             Follow Us on Social
           </h3>
-          <h4 className="mb-4">
+          <h4 className="mb-4 dark:text-gray-100">
             Follow us on social media to keep up with new features and exciting
             news!
           </h4>
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 81e5e4e..fb30295 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -8,7 +8,7 @@ export default function ProfilePage() {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.8, ease: 'easeOut' }}
-      className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-6"
+      className="min-h-screen flex flex-col items-center justify-center p-6"
     >
       <motion.h1
         initial={{ y: -20, opacity: 0 }}
diff --git a/src/pages/QRCodePage.js b/src/pages/QRCodePage.js
index a378a9b..5ccf642 100644
--- a/src/pages/QRCodePage.js
+++ b/src/pages/QRCodePage.js
@@ -3,8 +3,8 @@ import QRCodeGenerator from '../components/QRCodeGenerator';
 
 export default function QRCodePage() {
   return (
-    <div className="p-6">
-      <h1 className="text-3xl font-bold mb-4">QR Code Generator</h1>
+    <div className="p-6  bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800">
+      <h1 className="text-3xl font-bold mb-4 dark:text-gray-100 text-center">QR Code Generator</h1>
       <QRCodeGenerator />
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 1490793..fc01f8a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  darkMode: 'selector',
   theme: {
     extend: {},
   },

From d1c08890d6a6c1d7601af101290a2542bda1ec7f Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Fri, 4 Oct 2024 20:30:25 +0530
Subject: [PATCH 2/6] Resolved conflicts

---
 .env | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/.env b/.env
index 1cd2613..0f0e025 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,14 @@
-REACT_APP_FIREBASE_API_KEY=""
-REACT_APP_FIREBASE_AUTH_DOMAIN=""
-REACT_APP_FIREBASE_PROJECT_ID=""
-REACT_APP_FIREBASE_STORAGE_BUCKET=""
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
-REACT_APP_FIREBASE_APP_ID=""
-REACT_APP_FIREBASE_MEASUREMENT_ID=""
+# REACT_APP_FIREBASE_API_KEY=""
+# REACT_APP_FIREBASE_AUTH_DOMAIN=""
+# REACT_APP_FIREBASE_PROJECT_ID=""
+# REACT_APP_FIREBASE_STORAGE_BUCKET=""
+# REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
+# REACT_APP_FIREBASE_APP_ID=""
+# REACT_APP_FIREBASE_MEASUREMENT_ID=""
+REACT_APP_FIREBASE_API_KEY="AIzaSyDZzrBHFaZl6p-xCvOdAxHuRVqPAUlp5Ns"
+REACT_APP_FIREBASE_AUTH_DOMAIN="qr-generator-ff212.firebaseapp.com"
+REACT_APP_FIREBASE_PROJECT_ID="qr-generator-ff212"
+REACT_APP_FIREBASE_STORAGE_BUCKET="qr-generator-ff212.appspot.com"
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID="148362074435"
+REACT_APP_FIREBASE_APP_ID="1:148362074435:web:cab629f66a6f3b378d37f6"
+REACT_APP_FIREBASE_MEASUREMENT_ID="G-PYJSRKZEFN"

From 358b9a3a9ef6d00b37499048a0e7c9f76a565a70 Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Fri, 4 Oct 2024 23:13:40 +0530
Subject: [PATCH 3/6] Resolved conflicts

---
 .github/PULL_REQUEST_TEMPLATE.md           |  23 ++++
 .github/workflows/codeql.yml               |  92 +++++++++++++
 .github/workflows/discord-notification.yml |  64 +++++++++
 README.md                                  |  13 +-
 package-lock.json                          |  24 ++++
 package.json                               |   1 +
 src/App.js                                 |   5 +-
 src/components/CategorySelector.js         |   8 +-
 src/components/ColorPicker.js              |  24 ++--
 src/components/Login.js                    |   8 +-
 src/components/Navbar.js                   | 153 ++++++++++++++++++---
 src/components/Profile.js                  |  77 ++++++++---
 src/components/QRCodeGenerator.js          | 138 +++++++++++--------
 src/components/QRScanner.js                |   4 +-
 src/components/Register.js                 |   9 +-
 src/components/Setting.js                  |  61 ++++++--
 src/components/SizeSlider.js               |   6 +-
 src/components/VCardForm.js                |   2 +-
 src/components/WifiForm.js                 |   2 +-
 src/context/ThemeContext.js                |  27 ++--
 src/css/tailwind.css                       |  11 ++
 src/pages/DashboardPage.js                 |  46 ++++++-
 22 files changed, 638 insertions(+), 160 deletions(-)
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md
 create mode 100644 .github/workflows/codeql.yml
 create mode 100644 .github/workflows/discord-notification.yml

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..2bd1d41
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,23 @@
+## Description
+Please provide a brief summary of the changes made in this pull request. Include any relevant context or background information.
+
+## Related Issue
+Link to the issue this PR addresses (if applicable):
+- Fixes #[issue number]
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Documentation update
+- [ ] Other (please describe):
+
+## Checklist
+- [ ] I have read the contributing guidelines.
+- [ ] I have followed the code style of this project.
+- [ ] My code implements the changes requested in the issue.
+- [ ] I have added tests to cover my changes (if applicable).
+- [ ] I have updated the documentation (if necessary).
+- [ ] This PR is ready for review.
+
+## Additional Notes
+Any other information that reviewers should know about this PR.
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000..f9eb1d9
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,92 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '24 10 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"
diff --git a/.github/workflows/discord-notification.yml b/.github/workflows/discord-notification.yml
new file mode 100644
index 0000000..c8e0f69
--- /dev/null
+++ b/.github/workflows/discord-notification.yml
@@ -0,0 +1,64 @@
+name: Discord Notifications
+
+on:
+  issues:
+    types: [opened, closed, reopened]
+  pull_request:
+    types: [opened, closed, reopened, merged]
+  push:
+    branches:
+      - main  # You can specify other branches as well
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send Discord Notification
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}  # Set your webhook URL in repo secrets
+        run: |
+          DISCORD_MESSAGE="🔔 **GitHub Event Notification** 🔔\n"
+          DISCORD_MESSAGE+="---------------------------------------------\n"
+          DISCORD_MESSAGE+="**Event Type**: ${GITHUB_EVENT_NAME}\n"
+          DISCORD_MESSAGE+="**Repository**: [${GITHUB_REPOSITORY}](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY})\n"
+          DISCORD_MESSAGE+="**Triggered by**: ${GITHUB_ACTOR}\n"
+          DISCORD_MESSAGE+="**Timestamp**: $(date)\n"
+          DISCORD_MESSAGE+="---------------------------------------------\n"
+
+          # Handle pull request events
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            PR_TITLE=$(jq -r '.pull_request.title' "${GITHUB_EVENT_PATH}")
+            PR_NUMBER=$(jq -r '.pull_request.number' "${GITHUB_EVENT_PATH}")
+            PR_URL=$(jq -r '.pull_request.html_url' "${GITHUB_EVENT_PATH}")
+            PR_BRANCH=$(jq -r '.pull_request.head.ref' "${GITHUB_EVENT_PATH}")
+            PR_ACTION=$(jq -r '.action' "${GITHUB_EVENT_PATH}")
+            DISCORD_MESSAGE+="🚀 **Pull Request** [#${PR_NUMBER} - ${PR_TITLE}](${PR_URL})\n"
+            DISCORD_MESSAGE+="**Action**: ${PR_ACTION}\n"
+            DISCORD_MESSAGE+="**Branch**: ${PR_BRANCH}\n"
+          fi
+
+          # Handle issue events
+          if [[ "${{ github.event_name }}" == "issues" ]]; then
+            ISSUE_TITLE=$(jq -r '.issue.title' "${GITHUB_EVENT_PATH}")
+            ISSUE_NUMBER=$(jq -r '.issue.number' "${GITHUB_EVENT_PATH}")
+            ISSUE_URL=$(jq -r '.issue.html_url' "${GITHUB_EVENT_PATH}")
+            ISSUE_ACTION=$(jq -r '.action' "${GITHUB_EVENT_PATH}")
+            DISCORD_MESSAGE+="📄 **Issue** [#${ISSUE_NUMBER} - ${ISSUE_TITLE}](${ISSUE_URL})\n"
+            DISCORD_MESSAGE+="**Action**: ${ISSUE_ACTION}\n"
+          fi
+
+          # Handle push events
+          if [[ "${{ github.event_name }}" == "push" ]]; then
+            COMMIT_MESSAGE=$(jq -r '.head_commit.message' "${GITHUB_EVENT_PATH}")
+            COMMIT_URL=$(jq -r '.head_commit.url' "${GITHUB_EVENT_PATH}")
+            PUSH_BRANCH=$(jq -r '.ref' "${GITHUB_EVENT_PATH}")
+            DISCORD_MESSAGE+="🛠️ **Push Event**\n"
+            DISCORD_MESSAGE+="**Branch**: ${PUSH_BRANCH}\n"
+            DISCORD_MESSAGE+="**Commit Message**: ${COMMIT_MESSAGE}\n"
+            DISCORD_MESSAGE+="🔗 [View Commit](${COMMIT_URL})\n"
+          fi
+
+          # Send the notification to Discord
+          curl -H "Content-Type: application/json" \
+               -d "{\"content\": \"$DISCORD_MESSAGE\"}" \
+               $DISCORD_WEBHOOK_URL
diff --git a/README.md b/README.md
index a703297..089c8a9 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@
    5. [Getting Started](#getting-started)
    6. [FAQ](#faq)
    7. [Contact](#contact)
+   8. [Code of Conduct](#code-of-conduct)
 </details>
 <hr>
 
@@ -39,7 +40,7 @@
 
   
 ## <div>
-<h2><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="35" height="35" />Technologies Used</h2>
+<h2><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="35" height="35" /> Technologies Used</h2>
 </div>
 
 - **Front-end:** HTML, CSS, JavaScript, Bootstrap for a responsive design.
@@ -50,7 +51,7 @@
 
 <hr>
 
-## :sparkles:Contributing
+## ✨Contributing
 
 We welcome contributions from the open-source community! If you'd like to contribute:
 
@@ -59,6 +60,12 @@ We welcome contributions from the open-source community! If you'd like to contri
 3. Commit your changes *(git commit -m 'Add some feature').*
 4. Push to the branch *(git push origin feature/your-feature).*
 5. Open a Pull Request.
+   
+To maintain quality and consistency, please adhere to the following guidelines:
+1. Code Style: Follow the coding style used throughout the project. Clean, readable code with comments is always appreciated.
+2. Commits: Write meaningful commit messages.
+3. Pull Requests: Make sure PRs are focused, well-explained, and reference any issues they address.
+4. Testing: Ensure that your changes are well-tested locally and don’t break existing functionality.
 
 <hr>
 
@@ -167,7 +174,9 @@ For Queries and issue related question you can contact me on Discord
 
 *Discord Username:* akshaypatell_
 
+## 🪄Code of conduct
 
+Want to be part of the community? Check out our **[Code of Conduct](https://github.com/VesperAkshay/qr-code-generator/blob/main/Code_Of_Conduct.md)**
 
 <hr>
 <div>
diff --git a/package-lock.json b/package-lock.json
index 69894f6..cfe3668 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react": "^18.3.1",
         "react-color": "^2.19.3",
         "react-dom": "^18.3.1",
+        "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
         "react-qr-code": "^2.0.15",
         "react-router-dom": "^6.26.0",
@@ -9812,6 +9813,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -15992,6 +16001,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
diff --git a/package.json b/package.json
index 33816d6..7a61535 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.26.0",
diff --git a/src/App.js b/src/App.js
index d56fd12..c10c0d3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
@@ -16,6 +16,8 @@ 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";
+
 export default function App() {
   return (
     <AuthProvider>
@@ -39,6 +41,7 @@ export default function App() {
               <Route path="/pdf-qr-code" element={<PdfQRCodeGenerator />} />
             </Routes>
           </div>
+          <Toaster />
         </Router>
       </ThemeProvider>
     </AuthProvider>
diff --git a/src/components/CategorySelector.js b/src/components/CategorySelector.js
index 04fdec7..50a54b0 100644
--- a/src/components/CategorySelector.js
+++ b/src/components/CategorySelector.js
@@ -35,13 +35,13 @@ export default function CategorySelector({ category, handleCategoryChange }) {
           }}
         >
           <motion.div
-            className={`text-2xl mb-2 p-2 rounded-full ${
-              category === name ? 'bg-white text-blue-500' : 'bg-gray-200 text-gray-700'
+            className={`text-2xl mb-2 p-2 rounded-full bg-white${
+              category === name ? 'text-blue-500' : ' text-gray-700'
             }`}
             whileHover={{
-              scale: 1.25,
+              // scale: 1.25,
               backgroundColor: category === name ? '#FFFFFF' : '#E5E7EB',
-              transition: { duration: 0.1 },
+              // transition: { duration: 0.1 },
             }}
           >
             <FontAwesomeIcon icon={icon} />
diff --git a/src/components/ColorPicker.js b/src/components/ColorPicker.js
index 4a50c73..9b099d1 100644
--- a/src/components/ColorPicker.js
+++ b/src/components/ColorPicker.js
@@ -7,55 +7,55 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8 p-4 bg-white dark:bg-[#2b2661] rounded-xl shadow-lg">
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaPalette className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-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 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaPalette className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-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 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaPalette className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-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 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaSquare className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -66,13 +66,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaBorderStyle className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -83,13 +83,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 font-bold">
           <FaCircle className="mr-2 text-indigo-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 dark:bg-indigo-950 dark:border-gray-900"
+          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-indigo-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
diff --git a/src/components/Login.js b/src/components/Login.js
index 4c89b49..c3d7b78 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -4,6 +4,7 @@ import { auth } from '../firebase';
 import { useNavigate } from 'react-router-dom';
 import { FcGoogle } from "react-icons/fc";
 import { motion } from 'framer-motion';
+import toast from 'react-hot-toast';
 
 export default function Login() {
   const [email, setEmail] = useState('');
@@ -15,8 +16,10 @@ export default function Login() {
     try {
       await signInWithEmailAndPassword(auth, email, password);
       navigate('/dashboard');
+      toast.success("Login Successful");
     } catch (error) {
-      alert(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
     }
   };
 
@@ -26,7 +29,8 @@ export default function Login() {
       await signInWithPopup(auth, provider);
       navigate('/dashboard');
     } catch (error) {
-      alert(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
     }
   };
 
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 1e4291c..d20467f 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -2,7 +2,6 @@ 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 { AnimatePresence, motion } from "framer-motion";
 
 import {
   FaUser,
@@ -24,12 +23,62 @@ export default function Navbar() {
   const { theme, toggleTheme } = useContext(ThemeContext);
 
   const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/"); // Redirect to the home page after logout
-    } catch (error) {
-      console.error("Failed to log out", error);
-    }
+    // Show a confirmation toast
+    const confirmation = toast(
+      (t) => (
+        <div>
+          <p>Are you sure you want to log out?</p>
+          <div className="flex justify-between">
+            <button
+              onClick={() => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+              }}
+              className="text-blue-600 hover:bg-blue-200 px-4 py-2 bg-blue-100 m-2 mt-4 rounded-md "
+            >
+              Cancel
+            </button>
+            <button
+              onClick={async () => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+                try {
+                  await logout(); // Proceed with logout
+                  navigate("/"); // Redirect to the home page after logout
+                  toast.success("Logged out");
+                } catch (error) {
+                  console.error("Failed to log out", error);
+                  toast.error("Logout failed. Please try again."); // Show an error message
+                }
+              }}
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+            >
+              Log out
+            </button>
+          </div>
+        </div>
+      ),
+      {
+        duration: 0, // Keep the toast open until dismissed
+        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;
+    });
   };
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -39,7 +88,6 @@ export default function Navbar() {
   const toggleDropdown = () => {
     setDropdownOpen((prev) => !prev);
   };
-  
 
   // Close the dropdown if clicked outside
   useEffect(() => {
@@ -53,21 +101,17 @@ export default function Navbar() {
         setDropdownOpen(false); // Only close the dropdown when clicking outside
       }
     };
-  
+
     document.addEventListener("mousedown", handleClickOutside);
-  
+
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [dropdownRef, buttonRef]);
-  
 
   return (
-    <nav
-      className="p-4"
-    >
-      
-      <div className="container mx-auto flex justify-between items-center px-3">
+    <nav className="p-4">
+      <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" />
           <Link
@@ -148,8 +192,8 @@ export default function Navbar() {
                             onClick={toggleTheme}
                             className="md:hidden flex rounded-xl items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-cyan-500 text-lg hover:text-white transition duration-300 w-full"
                           >
-                            {theme === 'dark'  ? <MdLightMode /> : <FaMoon />}
-                            {theme === 'dark'  ? "Light Mode" : "Dark Mode"}
+                            {theme === "dark" ? <MdLightMode /> : <FaMoon />}
+                            {theme === "dark" ? "Light Mode" : "Dark Mode"}
                           </button>
                         </div>
                       </motion.div>
@@ -157,6 +201,14 @@ export default function Navbar() {
                   </AnimatePresence>
                 </div>
               </div>
+              <button
+                onClick={() => {
+                  setDarkMode(!darkMode);
+                }}
+                className="text-white hover:text-indigo-200 transition duration-300 text-xl"
+              >
+                {darkMode ? <MdLightMode /> : <FaMoon />}
+              </button>
             </>
           ) : (
             <>
@@ -180,10 +232,73 @@ export default function Navbar() {
             onClick={toggleTheme}
             className="max-md:hidden text-white hover:text-indigo-200 transition duration-300 text-xl"
           >
-            {theme==='dark' ? <MdLightMode /> : <FaMoon />}
+            {theme === "dark" ? <MdLightMode /> : <FaMoon />}
           </button>
         </div>
       </div>
+      {/* Mobile Dropdown Menu */}
+      {dropdownOpen && (
+        <div className="md:hidden mt-2 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg py-2 z-20">
+          {currentUser ? (
+            <>
+              <Link
+                to="/dashboard"
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+              >
+                <FaUser className="mr-2" />
+                Dashboard
+              </Link>
+              <Link
+                to="/profile"
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+              >
+                <FaUser className="mr-2" />
+                Profile
+              </Link>
+              <Link
+                to="/settings"
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+              >
+                <FaCog className="mr-2" />
+                Settings
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-red-500 hover:text-white transition duration-300 w-full"
+              >
+                <FaSignOutAlt className="mr-2" />
+                Logout
+              </button>
+              <button
+                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
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                to="/login"
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+              >
+                <FaSignInAlt className="mr-2" />
+                Login
+              </Link>
+              <Link
+                to="/register"
+                className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
+              >
+                <FaUserPlus className="mr-2" />
+                Register
+              </Link>
+            </>
+          )}
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/src/components/Profile.js b/src/components/Profile.js
index f107243..365e696 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -6,6 +6,7 @@ import { FaUserEdit, FaLock, FaSignOutAlt, FaEdit } from "react-icons/fa";
 import { MdMarkEmailRead } from "react-icons/md"; // Make sure the path is correct
 import { motion } from "framer-motion";
 import AvatarSelectionModal from "./AvatarSelectionModel";
+import toast from "react-hot-toast";
 
 const avatars = [
   "/avatars/avatar1.png",
@@ -38,10 +39,13 @@ export default function Profile() {
         displayName,
         photoURL: selectedAvatar,
       });
-      setSuccess("Profile updated successfully!");
+      toast.success("Profile updated successfully!");
+      // setSuccess("Profile updated successfully!");
       setError("");
     } catch (error) {
-      setError(error.message);
+      toast.error("Cannot update Profile");
+      // setError(error.message);
+      console.error(error.message);
       setSuccess("");
     }
   };
@@ -50,23 +54,57 @@ export default function Profile() {
     try {
       if (newPassword) {
         await updatePassword(currentUser, newPassword);
-        setSuccess("Password updated successfully!");
+        // setSuccess("Password updated successfully!");
+        toast.success("Password updated successfully!");
         setError("");
       }
     } catch (error) {
-      setError(error.message);
+      toast.error("Cannot update Password");
+      // setError(error.message);
+      console.error(error.message);
       setSuccess("");
     }
   };
 
   const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/");
-    } catch (error) {
-      setError("Failed to log out: " + error.message);
-      setSuccess("");
-    }
+    // Show a confirmation toast
+    const confirmation = toast(
+      (t) => (
+        <div>
+          <p>Are you sure you want to log out?</p>
+          <div className="flex justify-between">
+            <button
+              onClick={() => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+              }}
+              className="text-blue-600 hover:bg-blue-200 px-4 py-2 bg-blue-100 m-2 mt-4 rounded-md "
+            >
+              Cancel
+            </button>
+            <button
+              onClick={async () => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+                try {
+                  await logout(); // Proceed with logout
+                  navigate("/"); // Redirect to the home page after logout
+                  toast.success("Logged out");
+                } catch (error) {
+                  console.error("Failed to log out", error);
+                  toast.error("Logout failed. Please try again."); // Show an error message
+                }
+              }}
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+            >
+              Log out
+            </button>
+          </div>
+        </div>
+      ),
+      {
+        duration: 0, // Keep the toast open until dismissed
+        position: 'top-center', // Adjust position if needed
+      }
+    )
   };
 
   const openModal = () => setIsModalOpen(true);
@@ -138,15 +176,14 @@ 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-400" />
-            <input
-              type="email"
-              value={currentUser.email}
-              disabled
-              className="font-semibold pl-12 py-3 border border-gray-400 dark:text-gray-200 dark:bg-indigo-950 rounded-lg w-full bg-gray-200 cursor-not-allowed text-gray-900"
-              placeholder="Your email address"
-            />
-          </div>
+            <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>
         </motion.div>
 
         <motion.div
diff --git a/src/components/QRCodeGenerator.js b/src/components/QRCodeGenerator.js
index 68bf161..c6e53cb 100644
--- a/src/components/QRCodeGenerator.js
+++ b/src/components/QRCodeGenerator.js
@@ -1,18 +1,14 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import QRCodeStyling from 'qr-code-styling';
-import { useAuth } from '../context/AuthContext';
-import { db } from '../firebase';
-import { doc, getDoc, setDoc, updateDoc } from 'firebase/firestore';
-
 import { motion } from 'framer-motion';
 import CategorySelector from './CategorySelector';
 import VCardForm from './VCardForm';
 import WifiForm from './WifiForm';
 import ColorPicker from './ColorPicker';
-import QRCodeCanvas from './QRCodeCanvas';
 import SizeSlider from './SizeSlider';
 import FileUploader from './FileUploader';
 import DownloadButton from './DownloadButton';
+import toast from 'react-hot-toast';
 
 export default function QRCodeGenerator() {
   const [text, setText] = useState('');
@@ -36,81 +32,108 @@ export default function QRCodeGenerator() {
     encryption: 'WPA',
     password: '',
   });
+
   const qrCodeRef = useRef(null);
-  const { currentUser } = useAuth();
-  const [qrCode, setQrCode] = useState(null);
+  const qrCodeInstance = useRef(null); // To keep QR code instance reference
   const [downloadFormat, setDownloadFormat] = useState('png');
+  const [qrGenerated, setQrGenerated] = useState(false); // State to track if QR code is generated
 
-  useEffect(() => {
-    const qrCodeInstance = new QRCodeStyling({
+  // Initialize QRCodeStyling instance once
+  if (!qrCodeInstance.current) {
+    qrCodeInstance.current = new QRCodeStyling({
       width: size,
       height: size,
-      data: text,
-      dotsOptions: { color, type: shape },
+      data: '',
+      dotsOptions: { color: color, type: shape },
       cornersSquareOptions: { type: frame },
       cornersDotOptions: { type: eyeShape, color: eyeColor },
       backgroundOptions: { color: bgColor },
     });
-    setQrCode(qrCodeInstance);
-  }, [text, color, bgColor, size, shape, frame, eyeShape, eyeColor]);
+  }
 
   const handleGenerate = async () => {
+
+    // Check for required fields based on selected category
+    if (category === 'vCard') {
+      if (!vCardDetails.fullName || !vCardDetails.organization || !vCardDetails.phone || !vCardDetails.email) {
+        toast.error("Please fill in all fields for vCard.");
+        return;
+      }
+      setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
+    } else if (category === 'wifi') {
+      if (!wifiDetails.ssid || !wifiDetails.password) {
+        toast.error("Please fill in the SSID and password for WiFi.");
+        return;
+      }
+      setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
+    } else if (category === 'text' || category === 'URL') {
+      if (!text.trim()) {
+        toast.error("Text field is empty. Please enter valid data.");
+        return;
+      }
+    } else if ( category === 'URL') {
+      if (!text.trim()) {
+        toast.error("Please fill in URL field");
+        return;
+      }
+    }
+
+    setQrGenerated(false); // Reset QR generated state
+
+    // Clear previous QR code if present
     if (qrCodeRef.current) {
-      qrCodeRef.current.innerHTML = ''; // Clear the previous QR code
+      qrCodeRef.current.innerHTML = '';
     }
 
-    let logoURL = '';
-    if (logoFile) {
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        logoURL = event.target.result;
-        qrCode.update({
-          data: text,
-          dotsOptions: { color, type: shape },
-          cornersSquareOptions: { type: frame },
-          cornersDotOptions: { type: eyeShape, color: eyeColor },
-          backgroundOptions: { color: bgColor },
-          image: logoURL,
-        });
-        qrCode.append(qrCodeRef.current);
-      };
-      reader.readAsDataURL(logoFile);
-    } else {
-      qrCode.update({
+    // Create a promise to handle logo loading if applicable
+    const updateQRCode = (logoURL = '') => {
+      qrCodeInstance.current.update({
         data: text,
         dotsOptions: { color, type: shape },
         cornersSquareOptions: { type: frame },
         cornersDotOptions: { type: eyeShape, color: eyeColor },
         backgroundOptions: { color: bgColor },
+        image: logoURL, // Use logo URL if present
       });
-      qrCode.append(qrCodeRef.current);
-    }
 
-    const userRef = doc(db, "users", currentUser.uid);
-    const docSnap = await getDoc(userRef);
+      qrCodeInstance.current.append(qrCodeRef.current);
 
-    if (docSnap.exists()) {
-      const userData = docSnap.data();
-      if (userData.qrCount >= 10) {
-        alert("You have reached the daily limit of QR codes.");
-      } else {
-        await updateDoc(userRef, { qrCount: userData.qrCount + 1 });
-      }
+      // Delay a bit to ensure it's appended, then update state
+      setTimeout(() => {
+        setQrGenerated(true); // Mark QR code as generated
+      }, 500); // Set delay to ensure QR is rendered
+    };
+
+    if (logoFile) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const logoURL = event.target.result;
+        updateQRCode(logoURL);
+      };
+      reader.readAsDataURL(logoFile);
     } else {
-      await setDoc(userRef, { qrCount: 1 });
+      updateQRCode(); // No logo case
     }
   };
 
   const handleDownload = () => {
-    qrCode.download({ name: "qr_code", extension: downloadFormat });
+    qrCodeInstance.current.download({ name: "qr_code", extension: downloadFormat });
   };
 
   const handleCategoryChange = (category) => {
     setCategory(category);
+    setQrGenerated(false); // Reset QR generated state
+    setText(''); // Clear text input
+
+    // Clear previous QR code if present
+    if (qrCodeRef.current) {
+      qrCodeRef.current.innerHTML = '';
+    }
+
     if (category === 'vCard') {
       setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
     } else if (category === 'URL') {
-      setText('https://example.com');
+      setText('');
     } else if (category === 'wifi') {
       setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
     } else if (category === 'text') {
@@ -120,11 +143,11 @@ export default function QRCodeGenerator() {
 
   return (
     <motion.div
-      className="p-8 max-w-lg mx-auto bg-indigo-100 dark:bg-indigo-950 rounded-xl shadow-lg mt-10"
+      className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-lg mt-10"
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.5, ease: 'easeOut' }}
-      whileHover={{ scale: 1.02 }}
+      whileHover={{ scale: 1 }}
     >
       <motion.h1
         className="text-4xl font-bold mb-6 text-center text-gray-800 dark:text-gray-100"
@@ -192,13 +215,18 @@ export default function QRCodeGenerator() {
         Generate QR Code
       </motion.button>
 
-      <DownloadButton
-        handleDownload={handleDownload}
-        downloadFormat={downloadFormat}
-        setDownloadFormat={setDownloadFormat}
-      />
 
-      <QRCodeCanvas qrCodeRef={qrCodeRef} />
+      {/* QR code will appear only if it's been generated */}
+      <div className='flex justify-center items-center' ref={qrCodeRef}></div>
+
+      {/* Only show download options if QR code has been generated */}
+      {qrGenerated && (
+        <DownloadButton
+          handleDownload={handleDownload}
+          downloadFormat={downloadFormat}
+          setDownloadFormat={setDownloadFormat}
+        />
+      )}
     </motion.div>
   );
 }
diff --git a/src/components/QRScanner.js b/src/components/QRScanner.js
index cac2ac1..4eb1f03 100644
--- a/src/components/QRScanner.js
+++ b/src/components/QRScanner.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { FaClipboard, FaCamera, FaImage, FaTimes, FaCheck, FaLightbulb } from 'react-icons/fa';
 import QrScanner from "qr-scanner";
+import toast from 'react-hot-toast';
 
 export default function QRScanner() {
     const [scannedData, setScannedData] = useState({});
@@ -114,9 +115,10 @@ export default function QRScanner() {
     const copyToClipboard = () => {
         navigator.clipboard.writeText(scannedData.result)
             .then(() => {
-                alert('Copied to clipboard');
+                toast.success('Copied to clipboard');
             })
             .catch(err => {
+                toast.error('Failed to copy');
                 console.error('Failed to copy: ', err);
             });
     };
diff --git a/src/components/Register.js b/src/components/Register.js
index 4470027..beed8af 100644
--- a/src/components/Register.js
+++ b/src/components/Register.js
@@ -4,6 +4,7 @@ import { auth } from '../firebase';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { FcGoogle } from 'react-icons/fc';
+import toast from 'react-hot-toast';
 
 export default function Register() {
   const [email, setEmail] = useState('');
@@ -15,8 +16,10 @@ export default function Register() {
     try {
       await createUserWithEmailAndPassword(auth, email, password);
       navigate('/dashboard');
+      toast.success('Registered successfully');
     } catch (error) {
-      alert(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
     }
   };
 
@@ -25,8 +28,10 @@ export default function Register() {
     try {
       await signInWithPopup(auth, provider);
       navigate('/dashboard');
+      toast.success('Registered successfully');
     } catch (error) {
-      alert(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
     }
   };
 
diff --git a/src/components/Setting.js b/src/components/Setting.js
index d8b8770..2e5c306 100644
--- a/src/components/Setting.js
+++ b/src/components/Setting.js
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext';
 import { updateProfile, updateEmail, updatePassword } from 'firebase/auth';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import toast from 'react-hot-toast';
 
 export default function Settings() {
   const { currentUser, logout } = useAuth();
@@ -19,10 +20,11 @@ export default function Settings() {
   const handleUpdateProfile = async () => {
     try {
       await updateProfile(currentUser, { displayName });
-      setSuccess('Profile updated successfully!');
+      toast.success('Profile updated successfully!');
       setError('');
     } catch (error) {
-      setError(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
       setSuccess('');
     }
   };
@@ -32,11 +34,12 @@ export default function Settings() {
     try {
       if (email) {
         await updateEmail(currentUser, email);
-        setSuccess('Email updated successfully!');
+        toast.success('Email updated successfully!');
         setError('');
       }
     } catch (error) {
-      setError(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
       setSuccess('');
     }
   };
@@ -46,24 +49,56 @@ export default function Settings() {
     try {
       if (newPassword) {
         await updatePassword(currentUser, newPassword);
-        setSuccess('Password updated successfully!');
+        toast.success('Password updated successfully!');
         setError('');
       }
     } catch (error) {
-      setError(error.message);
+      toast.error('Something went wrong');
+      console.error(error.message);
       setSuccess('');
     }
   };
 
   // Function to handle logout
   const handleLogout = async () => {
-    try {
-      await logout();
-      navigate('/'); // Redirect to the home page after logout
-    } catch (error) {
-      setError('Failed to log out: ' + error.message);
-      setSuccess('');
-    }
+    // Show a confirmation toast
+    const confirmation = toast(
+      (t) => (
+        <div>
+          <p>Are you sure you want to log out?</p>
+          <div className="flex justify-between">
+            <button
+              onClick={() => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+              }}
+              className="text-blue-600 hover:bg-blue-200 px-4 py-2 bg-blue-100 m-2 mt-4 rounded-md "
+            >
+              Cancel
+            </button>
+            <button
+              onClick={async () => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+                try {
+                  await logout(); // Proceed with logout
+                  navigate("/"); // Redirect to the home page after logout
+                  toast.success("Logged out");
+                } catch (error) {
+                  console.error("Failed to log out", error);
+                  toast.error("Logout failed. Please try again."); // Show an error message
+                }
+              }}
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+            >
+              Log out
+            </button>
+          </div>
+        </div>
+      ),
+      {
+        duration: 0, // Keep the toast open until dismissed
+        position: 'top-center', // Adjust position if needed
+      }
+    )
   };
 
   return (
diff --git a/src/components/SizeSlider.js b/src/components/SizeSlider.js
index 107891d..f85c486 100644
--- a/src/components/SizeSlider.js
+++ b/src/components/SizeSlider.js
@@ -4,8 +4,8 @@ import { FaExpandArrowsAlt } from 'react-icons/fa';
 export default function SizeSlider({ size, setSize }) {
   return (
     <div className="mb-6">
-      <label className=" mb-2 text-gray-600 dark:text-gray-300 flex items-center">
-        <FaExpandArrowsAlt className="mr-2" />
+      <label className=" mb-2 text-gray-700 flex items-center">
+        <FaExpandArrowsAlt className="mr-2 text-gray-500" />
         Size
       </label>
       <div className="relative">
@@ -15,7 +15,7 @@ export default function SizeSlider({ size, setSize }) {
           max="600"
           value={size}
           onChange={(e) => setSize(e.target.value)}
-          className="w-full h-2 bg-gray-300 dark:bg-[#2b2661] rounded-lg appearance-none cursor-pointer slider-thumb"
+          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"
diff --git a/src/components/VCardForm.js b/src/components/VCardForm.js
index d3d9bb1..1e3d811 100644
--- a/src/components/VCardForm.js
+++ b/src/components/VCardForm.js
@@ -16,7 +16,7 @@ export default function VCardForm({ vCardDetails, setVCardDetails, setText }) {
   };
 
   return (
-    <div className="p-4 my-4 bg-purple-100 dark:bg-[#2b2661] rounded-lg shadow-md max-w-4xl mx-auto">
+    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto">
       <div className="space-y-6">
         {[
           { name: 'fullName', label: 'Full Name', icon: faUser, placeholder: 'John Doe' },
diff --git a/src/components/WifiForm.js b/src/components/WifiForm.js
index 27efe15..50d1fe8 100644
--- a/src/components/WifiForm.js
+++ b/src/components/WifiForm.js
@@ -16,7 +16,7 @@ export default function WifiForm({ wifiDetails, setWifiDetails, setText }) {
   };
 
   return (
-    <div className="p-4 my-4 bg-white dark:bg-[#2b2661] rounded-lg shadow-md max-w-4xl mx-auto">
+    <div className="p-4 bg-white rounded-lg shadow-md max-w-4xl mx-auto">
       <div className="space-y-6">
         {[
           { name: 'ssid', label: 'SSID', icon: faWifi, placeholder: 'Your Network Name' },
diff --git a/src/context/ThemeContext.js b/src/context/ThemeContext.js
index 46d9092..033c732 100644
--- a/src/context/ThemeContext.js
+++ b/src/context/ThemeContext.js
@@ -1,31 +1,22 @@
-import { createContext, useState, useEffect } from "react";
+// src/context/ThemeContext.js
+import { createContext, useState, useEffect } from 'react';
 
+// Create the context
 export const ThemeContext = createContext();
 
+// ThemeContext provider
 export const ThemeProvider = ({ children }) => {
-  const getInitialTheme = () => {
-    if (typeof window !== "undefined") {
-      return (
-        localStorage.getItem("theme") ||
-        (window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light")
-      );
-    }
-    return "light"; // Default to light theme if window is not defined
-  };
-
-  const [theme, setTheme] = useState(getInitialTheme);
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
 
   useEffect(() => {
-    // Remove the previous theme and add the new one
-    document.documentElement.classList.remove("dark", "light");
     document.documentElement.classList.add(theme);
-    localStorage.setItem("theme", theme);
+    localStorage.setItem('theme', theme);
   }, [theme]);
 
   const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    document.documentElement.classList.remove(theme);
+    document.documentElement.classList.add(newTheme);
     setTheme(newTheme);
   };
 
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index de227ad..b199097 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -34,6 +34,17 @@ body {
     
   }
   
+  /* CSS for qrcode size slider */
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Remove default appearance */
+    height: 24px; /* Height of the thumb */
+    width: 24px; /* Width of the thumb */
+    background: #4f46e5; /* Color of the thumb (change this to desired color) */
+    border-radius: 50%; /* Make it circular */
+    cursor: pointer; /* Pointer cursor on hover */
+    margin-top: 0px; /* Center thumb vertically */
+}
+
   @supports not selector(::-webkit-scrollbar) {
     body {
       scrollbar-color: var(--sb-thumb-color)
diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js
index 175e90f..81c3b01 100644
--- a/src/pages/DashboardPage.js
+++ b/src/pages/DashboardPage.js
@@ -15,6 +15,7 @@ import {
 import { motion } from "framer-motion";
 import { ThemeContext } from "../context/ThemeContext";
 import { useAuth } from "../context/AuthContext";
+import toast from "react-hot-toast";
 
 export default function DashboardPage() {
   const { logout } = useAuth();
@@ -103,13 +104,46 @@ export default function DashboardPage() {
   ];
 
   const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/"); // Redirect to the home page after logout
-    } catch (error) {
-      console.error("Failed to log out", error);
-    }
+    // Show a confirmation toast
+    const confirmation = toast(
+      (t) => (
+        <div>
+          <p>Are you sure you want to log out?</p>
+          <div className="flex justify-between">
+            <button
+              onClick={() => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+              }}
+              className="text-blue-600 hover:bg-blue-200 px-4 py-2 bg-blue-100 m-2 mt-4 rounded-md "
+            >
+              Cancel
+            </button>
+            <button
+              onClick={async () => {
+                toast.dismiss(t.id); // Dismiss the confirmation toast
+                try {
+                  await logout(); // Proceed with logout
+                  navigate("/"); // Redirect to the home page after logout
+                  toast.success("Logged out");
+                } catch (error) {
+                  console.error("Failed to log out", error);
+                  toast.error("Logout failed. Please try again."); // Show an error message
+                }
+              }}
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+            >
+              Log out
+            </button>
+          </div>
+        </div>
+      ),
+      {
+        duration: 0, // Keep the toast open until dismissed
+        position: 'top-center', // Adjust position if needed
+      }
+    )
   };
+  
   return (
     <div className="p-2">
     <div

From 6828d23c7fa1ac1355987de64f2f2734e5e889f5 Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Sat, 5 Oct 2024 01:50:10 +0530
Subject: [PATCH 4/6] formatting

Signed-off-by: varunvaatsalya <a.varungupta23@gmail.com>
---
 src/components/Navbar.js          |  18 ++--
 src/components/QRCodeGenerator.js | 147 +++++++++++++++++-------------
 src/components/SocialMedia.js     | 101 ++++++++++++++------
 3 files changed, 167 insertions(+), 99 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index ae702e0..dd48ccd 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -51,7 +51,7 @@ export default function Navbar() {
                   toast.error("Logout failed. Please try again."); // Show an error message
                 }
               }}
-              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md"
             >
               Log out
             </button>
@@ -67,14 +67,14 @@ export default function Navbar() {
 
   const handleToggleTheme = () => {
     toggleTheme();
-      toast(`Theme changed to ${theme==="light" ? "Dark" : "Light"} mode!`, {
-        icon: `${theme==="light" ? "🌙" : "☀️"}`,
-        style: {
-          borderRadius: "10px",
-          background: `${theme==="light" ? "#333" : "#fff"} `,
-          color: `${theme==="light" ? "#fff" : "#333"}`,
-        },
-      });
+    toast(`Theme changed to ${theme === "light" ? "Dark" : "Light"} mode!`, {
+      icon: `${theme === "light" ? "🌙" : "☀️"}`,
+      style: {
+        borderRadius: "10px",
+        background: `${theme === "light" ? "#333" : "#fff"} `,
+        color: `${theme === "light" ? "#fff" : "#333"}`,
+      },
+    });
   };
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
diff --git a/src/components/QRCodeGenerator.js b/src/components/QRCodeGenerator.js
index 13537fd..a1980ab 100644
--- a/src/components/QRCodeGenerator.js
+++ b/src/components/QRCodeGenerator.js
@@ -1,41 +1,41 @@
-import React, { useState, useRef, useEffect } from 'react';
-import QRCodeStyling from 'qr-code-styling';
-import { motion } from 'framer-motion';
-import CategorySelector from './CategorySelector';
-import VCardForm from './VCardForm';
-import WifiForm from './WifiForm';
-import ColorPicker from './ColorPicker';
-import SizeSlider from './SizeSlider';
-import FileUploader from './FileUploader';
-import DownloadButton from './DownloadButton';
-import toast from 'react-hot-toast';
+import React, { useState, useRef, useEffect } from "react";
+import QRCodeStyling from "qr-code-styling";
+import { motion } from "framer-motion";
+import CategorySelector from "./CategorySelector";
+import VCardForm from "./VCardForm";
+import WifiForm from "./WifiForm";
+import ColorPicker from "./ColorPicker";
+import SizeSlider from "./SizeSlider";
+import FileUploader from "./FileUploader";
+import DownloadButton from "./DownloadButton";
+import toast from "react-hot-toast";
 
 export default function QRCodeGenerator() {
-  const [text, setText] = useState('');
-  const [color, setColor] = useState('#000000');
-  const [bgColor, setBgColor] = useState('#ffffff');
+  const [text, setText] = useState("");
+  const [color, setColor] = useState("#000000");
+  const [bgColor, setBgColor] = useState("#ffffff");
   const [logoFile, setLogoFile] = useState(null);
   const [size, setSize] = useState(300);
-  const [shape, setShape] = useState('square');
-  const [frame, setFrame] = useState('square');
-  const [eyeShape, setEyeShape] = useState('square');
-  const [eyeColor, setEyeColor] = useState('#000000');
-  const [category, setCategory] = useState('text');
+  const [shape, setShape] = useState("square");
+  const [frame, setFrame] = useState("square");
+  const [eyeShape, setEyeShape] = useState("square");
+  const [eyeColor, setEyeColor] = useState("#000000");
+  const [category, setCategory] = useState("text");
   const [vCardDetails, setVCardDetails] = useState({
-    fullName: '',
-    organization: '',
-    phone: '',
-    email: '',
+    fullName: "",
+    organization: "",
+    phone: "",
+    email: "",
   });
   const [wifiDetails, setWifiDetails] = useState({
-    ssid: '',
-    encryption: 'WPA',
-    password: '',
+    ssid: "",
+    encryption: "WPA",
+    password: "",
   });
 
   const qrCodeRef = useRef(null);
   const qrCodeInstance = useRef(null); // To keep QR code instance reference
-  const [downloadFormat, setDownloadFormat] = useState('png');
+  const [downloadFormat, setDownloadFormat] = useState("png");
   const [qrGenerated, setQrGenerated] = useState(false); // State to track if QR code is generated
 
   // Initialize QRCodeStyling instance once
@@ -43,7 +43,7 @@ export default function QRCodeGenerator() {
     qrCodeInstance.current = new QRCodeStyling({
       width: size,
       height: size,
-      data: '',
+      data: "",
       dotsOptions: { color: color, type: shape },
       cornersSquareOptions: { type: frame },
       cornersDotOptions: { type: eyeShape, color: eyeColor },
@@ -52,26 +52,34 @@ export default function QRCodeGenerator() {
   }
 
   const handleGenerate = async () => {
-
     // Check for required fields based on selected category
-    if (category === 'vCard') {
-      if (!vCardDetails.fullName || !vCardDetails.organization || !vCardDetails.phone || !vCardDetails.email) {
+    if (category === "vCard") {
+      if (
+        !vCardDetails.fullName ||
+        !vCardDetails.organization ||
+        !vCardDetails.phone ||
+        !vCardDetails.email
+      ) {
         toast.error("Please fill in all fields for vCard.");
         return;
       }
-      setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
-    } else if (category === 'wifi') {
+      setText(
+        `BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`
+      );
+    } else if (category === "wifi") {
       if (!wifiDetails.ssid || !wifiDetails.password) {
         toast.error("Please fill in the SSID and password for WiFi.");
         return;
       }
-      setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
-    } else if (category === 'text' || category === 'URL') {
+      setText(
+        `WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`
+      );
+    } else if (category === "text" || category === "URL") {
       if (!text.trim()) {
         toast.error("Text field is empty. Please enter valid data.");
         return;
       }
-    } else if ( category === 'URL') {
+    } else if (category === "URL") {
       if (!text.trim()) {
         toast.error("Please fill in URL field");
         return;
@@ -82,11 +90,11 @@ export default function QRCodeGenerator() {
 
     // Clear previous QR code if present
     if (qrCodeRef.current) {
-      qrCodeRef.current.innerHTML = '';
+      qrCodeRef.current.innerHTML = "";
     }
 
     // Create a promise to handle logo loading if applicable
-    const updateQRCode = (logoURL = '') => {
+    const updateQRCode = (logoURL = "") => {
       qrCodeInstance.current.update({
         data: text,
         dotsOptions: { color, type: shape },
@@ -117,27 +125,34 @@ export default function QRCodeGenerator() {
   };
 
   const handleDownload = () => {
-    qrCodeInstance.current.download({ name: "qr_code", extension: downloadFormat });
+    qrCodeInstance.current.download({
+      name: "qr_code",
+      extension: downloadFormat,
+    });
   };
 
   const handleCategoryChange = (category) => {
     setCategory(category);
     setQrGenerated(false); // Reset QR generated state
-    setText(''); // Clear text input
+    setText(""); // Clear text input
 
     // Clear previous QR code if present
     if (qrCodeRef.current) {
-      qrCodeRef.current.innerHTML = '';
+      qrCodeRef.current.innerHTML = "";
     }
 
-    if (category === 'vCard') {
-      setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
-    } else if (category === 'URL') {
-      setText('');
-    } else if (category === 'wifi') {
-      setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
-    } else if (category === 'text') {
-      setText('');
+    if (category === "vCard") {
+      setText(
+        `BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`
+      );
+    } else if (category === "URL") {
+      setText("");
+    } else if (category === "wifi") {
+      setText(
+        `WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`
+      );
+    } else if (category === "text") {
+      setText("");
     }
   };
 
@@ -146,32 +161,43 @@ export default function QRCodeGenerator() {
       className="p-8 max-w-lg mx-auto bg-purple-100 dark:bg-indigo-950 rounded-xl shadow-lg mt-10"
       initial={{ opacity: 0, scale: 1 }}
       animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5, ease: 'easeOut' }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
       whileHover={{ scale: 1 }}
     >
       <motion.h1
         className="text-4xl font-bold mb-6 text-center text-gray-800 dark:text-gray-100"
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1, duration: 0.5, ease: 'easeOut' }}
+        transition={{ delay: 0.1, duration: 0.5, ease: "easeOut" }}
       >
         Generate QR Code
       </motion.h1>
 
-      <CategorySelector category={category} handleCategoryChange={handleCategoryChange} />
+      <CategorySelector
+        category={category}
+        handleCategoryChange={handleCategoryChange}
+      />
 
-      {category === 'vCard' && (
-        <VCardForm vCardDetails={vCardDetails} setVCardDetails={setVCardDetails} setText={setText} />
+      {category === "vCard" && (
+        <VCardForm
+          vCardDetails={vCardDetails}
+          setVCardDetails={setVCardDetails}
+          setText={setText}
+        />
       )}
-      {category === 'wifi' && (
-        <WifiForm wifiDetails={wifiDetails} setWifiDetails={setWifiDetails} setText={setText} />
+      {category === "wifi" && (
+        <WifiForm
+          wifiDetails={wifiDetails}
+          setWifiDetails={setWifiDetails}
+          setText={setText}
+        />
       )}
-      {(category === 'text' || category === 'URL') && (
+      {(category === "text" || category === "URL") && (
         <motion.div
           className="mb-6"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: 0.2, duration: 0.5, ease: 'easeOut' }}
+          transition={{ delay: 0.2, duration: 0.5, ease: "easeOut" }}
         >
           <label className="block mb-2 text-gray-700 dark:text-gray-200 capitalize">
             {category} Input
@@ -210,14 +236,13 @@ export default function QRCodeGenerator() {
         whileTap={{ scale: 0.95 }}
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3, duration: 0.5, ease: 'easeOut' }}
+        transition={{ delay: 0.3, duration: 0.5, ease: "easeOut" }}
       >
         Generate QR Code
       </motion.button>
 
-
       {/* QR code will appear only if it's been generated */}
-      <div className='flex justify-center items-center' ref={qrCodeRef}></div>
+      <div className="flex justify-center items-center" ref={qrCodeRef}></div>
 
       {/* Only show download options if QR code has been generated */}
       {qrGenerated && (
diff --git a/src/components/SocialMedia.js b/src/components/SocialMedia.js
index 4f8099f..e26c61e 100644
--- a/src/components/SocialMedia.js
+++ b/src/components/SocialMedia.js
@@ -1,29 +1,60 @@
-import React, { useState, useRef } from 'react';
-import { QRCodeCanvas } from 'qrcode.react';
-import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin, FaWhatsapp } from 'react-icons/fa';
-import { motion } from 'framer-motion';
+import React, { useState, useRef } from "react";
+import { QRCodeCanvas } from "qrcode.react";
+import {
+  FaFacebook,
+  FaTwitter,
+  FaInstagram,
+  FaLinkedin,
+  FaWhatsapp,
+} from "react-icons/fa";
+import { motion } from "framer-motion";
 
 // Assuming you have the logos as local images
-import FacebookLogo from '../assets/facebook-logo.png';
-import TwitterLogo from '../assets/twitter-logo.png';
-import InstagramLogo from '../assets/instagram-logo.png';
-import LinkedInLogo from '../assets/linkedin-logo.png';
-import WhatsappLogo from '../assets/whatsapp.png';
+import FacebookLogo from "../assets/facebook-logo.png";
+import TwitterLogo from "../assets/twitter-logo.png";
+import InstagramLogo from "../assets/instagram-logo.png";
+import LinkedInLogo from "../assets/linkedin-logo.png";
+import WhatsappLogo from "../assets/whatsapp.png";
 
 const socialMediaOptions = [
-  { name: 'Facebook', icon: <FaFacebook />, color: '#1877F2', logoUrl: FacebookLogo },
-  { name: 'Twitter', icon: <FaTwitter />, color: '#1DA1F2', logoUrl: TwitterLogo },
-  { name: 'Instagram', icon: <FaInstagram />, color: '#E1306C', logoUrl: InstagramLogo },
-  { name: 'LinkedIn', icon: <FaLinkedin />, color: '#0077B5', logoUrl: LinkedInLogo },
-  { name: 'Whatsapp', icon: <FaWhatsapp />, color: '#25D366', logoUrl: WhatsappLogo },
+  {
+    name: "Facebook",
+    icon: <FaFacebook />,
+    color: "#1877F2",
+    logoUrl: FacebookLogo,
+  },
+  {
+    name: "Twitter",
+    icon: <FaTwitter />,
+    color: "#1DA1F2",
+    logoUrl: TwitterLogo,
+  },
+  {
+    name: "Instagram",
+    icon: <FaInstagram />,
+    color: "#E1306C",
+    logoUrl: InstagramLogo,
+  },
+  {
+    name: "LinkedIn",
+    icon: <FaLinkedin />,
+    color: "#0077B5",
+    logoUrl: LinkedInLogo,
+  },
+  {
+    name: "Whatsapp",
+    icon: <FaWhatsapp />,
+    color: "#25D366",
+    logoUrl: WhatsappLogo,
+  },
 ];
 
 export default function SocialMedia() {
-  const [socialMedia, setSocialMedia] = useState('');
-  const [text, setText] = useState('');
+  const [socialMedia, setSocialMedia] = useState("");
+  const [text, setText] = useState("");
   const [size, setSize] = useState(256);
-  const [bgColor, setBgColor] = useState('#ffffff');
-  const [fgColor, setFgColor] = useState('#000000');
+  const [bgColor, setBgColor] = useState("#ffffff");
+  const [fgColor, setFgColor] = useState("#000000");
   const qrRef = useRef();
 
   const handleSocialMediaChange = (platform) => {
@@ -31,28 +62,34 @@ export default function SocialMedia() {
     setFgColor(platform.color);
   };
 
-  const selectedPlatform = socialMediaOptions.find(option => option.name === socialMedia);
+  const selectedPlatform = socialMediaOptions.find(
+    (option) => option.name === socialMedia
+  );
 
   const downloadQRCode = () => {
-    const canvas = qrRef.current.querySelector('canvas');
+    const canvas = qrRef.current.querySelector("canvas");
     if (canvas) {
-      const link = document.createElement('a');
-      link.href = canvas.toDataURL('image/png');
-      link.download = 'qrcode.png';
+      const link = document.createElement("a");
+      link.href = canvas.toDataURL("image/png");
+      link.download = "qrcode.png";
       link.click();
     }
   };
 
   return (
     <div className="p-8 bg-indigo-100 dark:bg-indigo-950 shadow-lg rounded-lg max-w-lg mx-auto">
-      <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800 dark:text-gray-200">Generate Social Media QR Code</h1>
+      <h1 className="text-4xl font-extrabold mb-6 text-center text-gray-800 dark:text-gray-200">
+        Generate Social Media QR Code
+      </h1>
 
       <div className="flex flex-wrap justify-center mb-6">
         {socialMediaOptions.map((platform) => (
           <motion.button
             key={platform.name}
             onClick={() => handleSocialMediaChange(platform)}
-            className={`p-4 m-2 rounded-full shadow-lg transition-transform duration-300 ease-in-out ${socialMedia === platform.name ? 'transform scale-110' : ''}`}
+            className={`p-4 m-2 rounded-full shadow-lg transition-transform duration-300 ease-in-out ${
+              socialMedia === platform.name ? "transform scale-110" : ""
+            }`}
             style={{ backgroundColor: platform.color }}
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.95 }}
@@ -73,7 +110,9 @@ export default function SocialMedia() {
       </div>
 
       <div className="mb-4">
-        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">Size</label>
+        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">
+          Size
+        </label>
         <input
           type="range"
           min="128"
@@ -82,13 +121,17 @@ export default function SocialMedia() {
           onChange={(e) => setSize(e.target.value)}
           className="w-full h-3 bg-gray-300 rounded-lg appearance-none cursor-pointer"
           style={{
-            background: `linear-gradient(to right, #4f46e5 ${((size - 128) / 384) * 100}%, #d1d5db ${((size - 128) / 384) * 100}%)`,
+            background: `linear-gradient(to right, #4f46e5 ${
+              ((size - 128) / 384) * 100
+            }%, #d1d5db ${((size - 128) / 384) * 100}%)`,
           }}
         />
       </div>
 
       <div className="mb-4">
-        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">Background Color</label>
+        <label className="block mb-2 text-lg font-semibold dark:text-gray-200">
+          Background Color
+        </label>
         <input
           type="color"
           value={bgColor}
@@ -108,7 +151,7 @@ export default function SocialMedia() {
             includeMargin={false}
             renderAs="canvas"
             imageSettings={{
-              src: selectedPlatform?.logoUrl || '',
+              src: selectedPlatform?.logoUrl || "",
               x: null,
               y: null,
               height: 50,

From 8dc6e310c359186c9596d23d42dcd4dc148ef2a0 Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Sat, 5 Oct 2024 02:12:35 +0530
Subject: [PATCH 5/6] added some info

Signed-off-by: varunvaatsalya <a.varungupta23@gmail.com>
---
 .env | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/.env b/.env
index 4b14502..7048cfc 100644
--- a/.env
+++ b/.env
@@ -1,19 +1,3 @@
-<<<<<<< HEAD
-# REACT_APP_FIREBASE_API_KEY=""
-# REACT_APP_FIREBASE_AUTH_DOMAIN=""
-# REACT_APP_FIREBASE_PROJECT_ID=""
-# REACT_APP_FIREBASE_STORAGE_BUCKET=""
-# REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
-# REACT_APP_FIREBASE_APP_ID=""
-# REACT_APP_FIREBASE_MEASUREMENT_ID=""
-REACT_APP_FIREBASE_API_KEY="AIzaSyDZzrBHFaZl6p-xCvOdAxHuRVqPAUlp5Ns"
-REACT_APP_FIREBASE_AUTH_DOMAIN="qr-generator-ff212.firebaseapp.com"
-REACT_APP_FIREBASE_PROJECT_ID="qr-generator-ff212"
-REACT_APP_FIREBASE_STORAGE_BUCKET="qr-generator-ff212.appspot.com"
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID="148362074435"
-REACT_APP_FIREBASE_APP_ID="1:148362074435:web:cab629f66a6f3b378d37f6"
-REACT_APP_FIREBASE_MEASUREMENT_ID="G-PYJSRKZEFN"
-=======
 REACT_APP_FIREBASE_API_KEY= ""
 REACT_APP_FIREBASE_AUTH_DOMAIN= ""
 REACT_APP_FIREBASE_PROJECT_ID= ""
@@ -21,4 +5,3 @@ REACT_APP_FIREBASE_STORAGE_BUCKET= ""
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID= ""
 REACT_APP_FIREBASE_APP_ID= ""
 REACT_APP_FIREBASE_MEASUREMENT_ID=""
->>>>>>> ad7b0850fd7779e589a50e8542144f5ef19b0def

From 9f795635178d42328fdf1da7f15dc7ca47be8d11 Mon Sep 17 00:00:00 2001
From: varunvaatsalya <a.varungupta23@gmail.com>
Date: Sat, 5 Oct 2024 12:44:07 +0530
Subject: [PATCH 6/6] some bug

Signed-off-by: varunvaatsalya <a.varungupta23@gmail.com>
---
 src/App.js               | 45 +-------------------------------
 src/components/Navbar.js | 55 +++-------------------------------------
 2 files changed, 5 insertions(+), 95 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4b54e78..a637a7d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -18,42 +17,20 @@ import QRScanner from "./components/QRScanner";
 import PdfQRCodeGenerator from "./components/PDFToQR";
 import { ThemeProvider } from "./context/ThemeContext";
 import { Toaster } from "react-hot-toast";
-=======
-// App.js
-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 ProtectedRoute from './components/ProtectedRoute';
->>>>>>> 72622978bd56c1314144541f8f7aed64be9bdc4d
 
 export default function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
         <Router>
-<<<<<<< HEAD
           <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 />
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/login" element={<Login />} />
               <Route path="/register" element={<Register />} />
-              <Route path="/dashboard" element={<DashboardPage />} />
+              <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
               <Route path="/qr-code" element={<QRCodePage />} />
               <Route path="/profile" element={<ProfilePage />} />
               <Route path="/support" element={<Support />} />
@@ -66,26 +43,6 @@ export default function App() {
             </Routes>
           </div>
           <Toaster />
-=======
-          <Navbar />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
-            <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
-            <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 />} />
-            {/* Remove the line for Verify */}
-            {/* <Route path="/verify" element={<Verify />} /> */}
-          </Routes>
->>>>>>> 72622978bd56c1314144541f8f7aed64be9bdc4d
         </Router>
       </ThemeProvider>
     </AuthProvider>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 7a799f2..f2d94ad 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -17,11 +17,11 @@ import {
   FaBars, // Icon for dropdown
 } from "react-icons/fa";
 import { MdLightMode } from "react-icons/md";
+import toast from "react-hot-toast";
 
 export default function Navbar() {
   const { currentUser, logout } = useAuth();
   const navigate = useNavigate();
-<<<<<<< HEAD
 
   const { theme, toggleTheme } = useContext(ThemeContext);
 
@@ -82,6 +82,7 @@ export default function Navbar() {
   const dropdownRef = useRef(null);
   const buttonRef = useRef(null); // Button ke liye separate ref
 
+
   const toggleDropdown = () => {
     setDropdownOpen((prev) => !prev);
   };
@@ -107,17 +108,8 @@ 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"
-      }`}
-    >
->>>>>>> 72622978bd56c1314144541f8f7aed64be9bdc4d
+
       <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" />
@@ -157,7 +149,6 @@ export default function Navbar() {
                   <FaBars className="text-2xl ml-2 md:hidden" />
                 </button>
                 <div className="relative" ref={dropdownRef}>
-<<<<<<< HEAD
                   <AnimatePresence>
                     {dropdownOpen && (
                       <motion.div
@@ -210,45 +201,7 @@ export default function Navbar() {
                 </div>
               </div>
               {/* <button
-=======
-                  {dropdownOpen && (
-                    <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-2 z-20">
-                      {currentUser.emailVerified && ( // Check if the user is verified
-                        <Link
-                          to="/dashboard"
-                          className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-                        >
-                          <FaUser className="mr-2" />
-                          Dashboard
-                        </Link>
-                      )}
-                      <Link
-                        to="/profile"
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-                      >
-                        <FaUser className="mr-2" />
-                        Profile
-                      </Link>
-                      <Link
-                        to="/settings"
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-indigo-500 hover:text-white transition duration-300"
-                      >
-                        <FaCog className="mr-2" />
-                        Settings
-                      </Link>
-                      <button
-                        onClick={handleLogout}
-                        className="flex items-center px-4 py-2 text-gray-700 dark:text-white hover:bg-red-500 hover:text-white transition duration-300 w-full"
-                      >
-                        <FaSignOutAlt className="mr-2" />
-                        Logout
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </div>
-              <button
->>>>>>> 72622978bd56c1314144541f8f7aed64be9bdc4d
+
                 onClick={() => {
                   setDarkMode(!darkMode);
                 }}