VoiceVisualization + Theme Toggler PR ( #192) from 4darsh-Dev/voice-chat

Voice chat Improvement

frontend/src/components/ChatMessage.jsx

@@ -4,28 +4,28 @@ import { BotMessageSquare, User } from 'lucide-react';
 const ChatMessage = ({ message, type }) => {
   const isBot = type === 'bot';
 
-  return (
+return (
     <div className={`flex items-start space-x-3 mb-4 ${isBot ? 'flex-row' : 'flex-row-reverse'}`}>
-      <div className={`
-        p-3 rounded-xl max-w-[70%]
-        ${isBot 
-          ? 'bg-gray-700 text-white' 
-          : 'bg-blue-600 text-white self-end'
-        }
-      `}>
-        <p>{message}</p>
-      </div>
-      <div className={`
-        rounded-full p-2 
-        ${isBot 
-          ? 'bg-gray-600 text-white' 
-          : 'bg-blue-500 text-white'
-        }
-      `}>
-        {isBot ? <BotMessageSquare size={20} /> : <User size={20} />}
-      </div>
+        <div className={`
+            p-3 rounded-xl max-w-[70%] m-0 mx-2
+            ${isBot 
+                ? 'bg-gray-700 text-white' 
+                : 'bg-blue-600 text-white self-end'
+            }
+        `}>
+            <p>{message}</p>
+        </div>
+        <div className={`
+            rounded-full p-2 m-0 mx-2
+            ${isBot 
+                ? 'bg-gray-600 text-white' 
+                : 'bg-blue-500 text-white'
+            }
+        `}>
+            {isBot ? <BotMessageSquare size={20} /> : <User size={20} />}
+        </div>
     </div>
-  );
+);
 };
 
 export default ChatMessage;

frontend/src/components/Navbar.jsx

@@ -4,13 +4,15 @@ import { Search, Menu, X } from 'lucide-react'
 import logo from '../assets/decentrade-logo.png'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import './Navbar.css'
+import '../styles/Navbar.css'
 import { connectWallet, mintNFT } from '../utils/ethereum'
+import ThemeToggle from './ThemeToggle'
+
 
 const Navbar = ({ wallet, setWallet }) => {
     const [tokenURI, setTokenURI] = useState('')
     const [showMintOption, setShowMintOption] = useState(false)
-    const [darkMode, setDarkMode] = useState(false)
+    // const [darkMode, setDarkMode] = useState(false)
     const [isMenuOpen, setIsMenuOpen] = useState(false)
 
     const handleGithubClick = () => {
@@ -38,11 +40,8 @@ const Navbar = ({ wallet, setWallet }) => {
         }
     }
 
-    const toggleDarkMode = () => {
-        setDarkMode(!darkMode)
-        document.body.classList.toggle('dark', !darkMode)
-    }
 
+
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen)
     }
@@ -87,9 +86,7 @@ const Navbar = ({ wallet, setWallet }) => {
                     </Link>
                 ))}
                 <div className="mode-toggle">
-                    <button onClick={toggleDarkMode} className="toggle-button">
-                        {darkMode ? '🌞' : '🌙'}
-                    </button>
+                    <ThemeToggle />
                 </div>
             </div>
 

frontend/src/components/ThemeToggle.jsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion';
+// import { Sun, Moon } from 'lucide-react'; // Lucide React icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+
+
+const ThemeToggle = () => {
+    const [darkMode, setDarkMode] = useState(false)
+
+    const toggleDarkMode = () => {
+        setDarkMode((prevMode) => !prevMode)
+        document.body.classList.toggle('dark', !darkMode)
+    }
+
+    useEffect(() => {
+        const savedMode = localStorage.getItem('darkMode') === 'true'
+        setDarkMode(savedMode)
+        document.body.classList.toggle('dark', savedMode)
+    }, [])
+
+    useEffect(() => {
+        localStorage.setItem('darkMode', darkMode)
+    }, [darkMode])
+
+    return (
+        <motion.div
+            onClick={toggleDarkMode}
+            className={`relative w-24 h-12 rounded-full cursor-pointer flex items-center px-2 ${
+                darkMode ? 'bg-[#002855]' : 'bg-[#FFD966]'
+            }`}
+            layout
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+        >
+            <AnimatePresence>
+                {darkMode ? (
+                    <motion.div
+                        key="moon"
+                        initial={{ x: -40, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        exit={{ x: 40, opacity: 0 }}
+                        transition={{ duration: 0.5 }}
+                        className="absolute left-1 text-blue-400"
+                    >
+                        <FontAwesomeIcon icon={faMoon} size="lg" />
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        key="sun"
+                        initial={{ x: 40, opacity: 0 }}
+                        animate={{ x: 0, opacity: 1 }}
+                        exit={{ x: -40, opacity: 0 }}
+                        transition={{ duration: 0.5 }}
+                        className="absolute right-1 text-yellow-500"
+                    >
+                        <FontAwesomeIcon icon={faSun} size="lg" />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <motion.div
+                className="w-10 h-10 bg-white rounded-full shadow-md"
+                layout
+                transition={{ type: 'spring', stiffness: 700, damping: 30 }}
+                style={{
+                    x: darkMode ? '100%' : '0%',
+                }}
+            ></motion.div>
+        </motion.div>
+    )
+}
+
+export default ThemeToggle;
+
+