diff --git a/client/app/components/ChatBot/ChatBot.tsx b/client/app/components/ChatBot/ChatBot.tsx index 7d1f7f9..783f236 100644 --- a/client/app/components/ChatBot/ChatBot.tsx +++ b/client/app/components/ChatBot/ChatBot.tsx @@ -2,7 +2,10 @@ import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; -import { ArrowUpIcon, ChatBubbleLeftRightIcon } from "@heroicons/react/24/solid"; +import { + ArrowUpIcon, + ChatBubbleLeftRightIcon, +} from "@heroicons/react/24/solid"; interface Message { content: string; @@ -12,7 +15,8 @@ interface Message { const ChatBot: React.FC = () => { const [messages, setMessages] = useState([ { - content: "Greetings! I'm here to help with any blockchain questions you have", + content: + "Greetings! I'm here to help with any blockchain questions you have", role: "assistant", }, ]); @@ -54,8 +58,12 @@ const ChatBot: React.FC = () => { }; return ( -
- +
+ { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className={`flex ${msg.role === "assistant" ? "justify-start" : "justify-end"}`} + className={`flex ${ + msg.role === "assistant" ? "justify-start" : "justify-end" + }`} >
{ placeholder="Type your message..." className="flex-grow px-4 py-2 focus:outline-none" /> -
diff --git a/client/app/components/Header/Header.tsx b/client/app/components/Header/Header.tsx index 0bd2e0d..08ceb5c 100644 --- a/client/app/components/Header/Header.tsx +++ b/client/app/components/Header/Header.tsx @@ -4,6 +4,7 @@ import React from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { motion } from "framer-motion"; +import { ThemeToggle } from "../Helper/ThemeToggle"; import { PlusCircleIcon, UserIcon, @@ -23,12 +24,12 @@ const Header = () => { return ( -
+
{ src="/aossie.png" alt="Agora Blockchain" /> -

+

Agora Blockchain

-
diff --git a/client/app/components/Helper/ThemeProvider.tsx b/client/app/components/Helper/ThemeProvider.tsx new file mode 100644 index 0000000..ee7b7bf --- /dev/null +++ b/client/app/components/Helper/ThemeProvider.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { + createContext, + ReactNode, + useContext, + useEffect, + useState, +} from "react"; + +type ThemeContextType = { + darkMode: boolean; + toggleTheme: () => void; +}; + +const ThemeContext = createContext(undefined); + +export const ThemeProvider = ({ children }: { children: ReactNode }) => { + const [darkMode, setDarkMode] = useState(() => { + if (typeof window !== "undefined") { + return localStorage.getItem("theme") === "dark"; + } + return false; // Default + }); + + useEffect(() => { + if (darkMode) { + document.documentElement.classList.add("dark"); + localStorage.setItem("theme", "dark"); + } else { + document.documentElement.classList.remove("dark"); + localStorage.setItem("theme", "light"); + } + }, [darkMode]); + + const toggleTheme = () => setDarkMode((prev) => !prev); + + return ( + + {children} + + ); +}; + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (!context) { + throw new Error("useTheme must be used within a ThemeProvider"); + } + return context; +}; diff --git a/client/app/components/Helper/ThemeToggle.tsx b/client/app/components/Helper/ThemeToggle.tsx new file mode 100644 index 0000000..2860610 --- /dev/null +++ b/client/app/components/Helper/ThemeToggle.tsx @@ -0,0 +1,21 @@ +import { useTheme } from "../Helper/ThemeProvider"; // Import useTheme hook +import { FaMoon } from "react-icons/fa"; +import { BsSunFill } from "react-icons/bs"; + +export const ThemeToggle = () => { + const { darkMode, toggleTheme } = useTheme(); // Use theme context + + return ( +
+ +
+ +
+ ); +}; diff --git a/client/app/components/Pages/HomePage.tsx b/client/app/components/Pages/HomePage.tsx index 06f1ce5..b0af753 100644 --- a/client/app/components/Pages/HomePage.tsx +++ b/client/app/components/Pages/HomePage.tsx @@ -5,7 +5,7 @@ import Dashboard from "./Dashboard"; const HomePage = () => { const { isConnected } = useAccount(); return ( -
+
{isConnected ? : }
); diff --git a/client/app/create/page.tsx b/client/app/create/page.tsx index fc55314..99a1c7f 100644 --- a/client/app/create/page.tsx +++ b/client/app/create/page.tsx @@ -75,33 +75,38 @@ const CreatePage: React.FC = () => { initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} - className="min-h-screen w-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4" + className="min-h-screen w-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4 dark:bg-dark" > -

+

Create New Election

-
+ -
-