theme correction

notrustverify · Jan 4, 2025 · c649215 · c649215
1 parent 6864b40
commit c649215
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 51 deletions.
diff --git a/appv2/src/app/burn/page.js b/appv2/src/app/burn/page.js
@@ -150,9 +150,10 @@ function BurnHistory() {
   const [topTokens, setTopTokens] = useState([]);
 
   useEffect(() => {
+    document.body.className = '';
     document.body.classList.add(theme);
-    document.body.classList.add("font-urbanist",);
-  }, []);
+    document.body.classList.add("font-urbanist");
+  }, [theme]);
 
   useEffect(() => {
     console.log('Setting up node provider...');
@@ -314,7 +315,7 @@ function BurnHistory() {
 
   if (isLoading) {
     return (
-      <div className={`min-h-screen flex flex-col relative`}>
+      <div className="min-h-screen flex flex-col relative">
         <main className="flex-grow container mx-auto px-4 py-8 max-w-7xl mt-16">
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <div className="lg:col-span-2">
@@ -363,10 +364,14 @@ function BurnHistory() {
     );
   }
 
-  if (error) return <div>Error: {error}</div>;
+  if (error) return (
+    <div className="min-h-screen flex flex-col relative">
+      Error: {error}
+    </div>
+  );
 
   return (
-    <div className={`min-h-screen flex flex-col relative`}>
+    <div className="min-h-screen flex flex-col relative">
       <main className="flex-grow container mx-auto px-4 py-8 max-w-7xl mt-16">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           <div className="lg:col-span-2">

diff --git a/appv2/src/app/components/navbar.js b/appv2/src/app/components/navbar.js
@@ -20,17 +20,21 @@ export default function Navbar() {
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const { currentLanguage, setCurrentLanguage, t } = useLanguage();
   const { theme, toggleTheme } = useTheme();
+  const isDark = theme === 'dark';
 
   if (isMobile) {
     return (
       <>
-        <motion.div className="fixed bottom-0 left-0 right-0 h-16 bg-gray-800/90 backdrop-blur-xl border-t border-gray-700/50 z-[99]">
+        <motion.div className={`fixed bottom-0 left-0 right-0 h-16 backdrop-blur-xl border-t z-[99] transition-colors duration-200 ${
+          isDark 
+            ? 'bg-gray-800/90 border-gray-700/50' 
+            : 'bg-white/90 border-gray-200/50'
+        }`}>
           <div className="flex justify-around items-center h-full px-6">
             <NavLink href="/" icon={<Coins size={24} />} text={t('burn')} isMobile={true} />
             <NavLink href="/burn" icon={<BookOpen size={24} />} text={t('history')} isMobile={true} />
           </div>
         </motion.div>
-        <MobileMenu />
         <div className="fixed top-6 right-6 z-[97]">
           <AlephiumConnectButton />
         </div>
@@ -48,25 +52,29 @@ export default function Navbar() {
         initial={{ width: isCollapsed ? '5rem' : '16rem' }}
         animate={{ width: isCollapsed ? '5rem' : '16rem' }}
         transition={{ duration: 0.3 }}
-        className={`fixed left-0 top-0 h-full ${
-          theme === 'dark'
+        className={`fixed left-0 top-0 h-full backdrop-blur-xl border-r transition-colors duration-200 ${
+          isDark
             ? 'bg-gray-800/50 border-gray-700/50'
             : 'bg-white/50 border-gray-200/50'
-        } backdrop-blur-xl border-r`}
+        }`}
       >
         <motion.button
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
           onClick={() => setIsCollapsed(!isCollapsed)}
-          className="absolute -right-3 top-8 p-1.5 bg-gray-800 border border-gray-700 rounded-full text-gray-400 hover:text-white"
+          className={`absolute -right-3 top-8 p-1.5 rounded-full transition-colors duration-200 ${
+            isDark 
+              ? 'bg-gray-800 border-gray-700 text-gray-400 hover:text-white' 
+              : 'bg-white border-gray-200 text-gray-600 hover:text-gray-900'
+          } border`}
         >
           {isCollapsed ? <FaChevronRight size={14} /> : <FaChevronLeft size={14} />}
         </motion.button>
 
         <div className="p-6">
           <Link href="/" className="flex items-center justify-center">
-            <span className={`${isCollapsed ? 'text-sm' : 'text-xl'} font-bold ${
-              theme === 'dark' ? 'text-white' : 'text-gray-900'
+            <span className={`${isCollapsed ? 'text-sm' : 'text-xl'} font-bold transition-colors duration-200 ${
+              isDark ? 'text-white' : 'text-gray-900'
             }`}>
               {isCollapsed ? 'TF' : 'Token Furnace'}
             </span>
@@ -80,13 +88,19 @@ export default function Navbar() {
           </nav>
         </div>
 
-        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700/50">
+        <div className={`absolute bottom-0 left-0 right-0 p-4 border-t transition-colors duration-200 ${
+          isDark ? 'border-gray-700/50' : 'border-gray-200/50'
+        }`}>
           {!isCollapsed ? (
             <>
               <div className="flex justify-center items-center gap-2 mb-3">
                 <button
                   onClick={() => setCurrentLanguage(currentLanguage === 'en' ? 'fr' : 'en')}
-                  className="flex items-center space-x-2 px-2 py-1 rounded-lg hover:bg-gray-700/50 transition-colors"
+                  className={`flex items-center space-x-2 px-2 py-1 rounded-lg transition-colors duration-200 ${
+                    isDark 
+                      ? 'hover:bg-gray-700/50' 
+                      : 'hover:bg-gray-200/50'
+                  }`}
                 >
                   <Image
                     src={`/images/flags/${currentLanguage === 'en' ? 'en' : 'fr'}.png`}
@@ -95,31 +109,33 @@ export default function Navbar() {
                     height={20}
                     className="rounded-sm"
                   />
-                  <span className="text-sm text-gray-400">
+                  <span className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                     {currentLanguage === 'en' ? 'English' : 'Français'}
                   </span>
                 </button>
                 <button
                   onClick={toggleTheme}
-                  className={`p-2 rounded-lg transition-colors ${
-                    theme === 'dark'
+                  className={`p-2 rounded-lg transition-colors duration-200 ${
+                    isDark
                       ? 'hover:bg-gray-700/50 text-gray-400 hover:text-white'
                       : 'hover:bg-gray-200/50 text-gray-600 hover:text-gray-900'
                   }`}
                 >
-                  {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+                  {isDark ? <Sun size={20} /> : <Moon size={20} />}
                 </button>
               </div>
               <div className="flex justify-center gap-6">
-                <SocialLink href="https://x.com/notrustverif" icon={<FaTwitter size={16} />} className={theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} />
-                <SocialLink href="https://github.com/notrustverify/token-furnace" icon={<FaGithub size={16} />} className={theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} />
+                <SocialLink href="https://x.com/notrustverif" icon={<FaTwitter size={16} />} />
+                <SocialLink href="https://github.com/notrustverify/token-furnace" icon={<FaGithub size={16} />} />
               </div>
             </>
           ) : (
             <div className="flex flex-col items-center space-y-3">
               <button
                 onClick={() => setCurrentLanguage(currentLanguage === 'en' ? 'fr' : 'en')}
-                className="p-2 rounded-lg hover:bg-gray-700/50 transition-colors"
+                className={`p-2 rounded-lg transition-colors duration-200 ${
+                  isDark ? 'hover:bg-gray-700/50' : 'hover:bg-gray-200/50'
+                }`}
               >
                 <Image
                   src={`/images/flags/${currentLanguage === 'en' ? 'en' : 'fr'}.png`}
@@ -129,8 +145,8 @@ export default function Navbar() {
                   className="rounded-sm"
                 />
               </button>
-              <SocialLink href="https://x.com/notrustverif" icon={<FaTwitter size={16} />} className={theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} />
-              <SocialLink href="https://github.com/notrustverify/token-furnace" icon={<FaGithub size={16} />} className={theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} />
+              <SocialLink href="https://x.com/notrustverif" icon={<FaTwitter size={16} />} />
+              <SocialLink href="https://github.com/notrustverify/token-furnace" icon={<FaGithub size={16} />} />
             </div>
           )}
         </div>
@@ -142,6 +158,7 @@ export default function Navbar() {
 function NavLink({ href, icon, text, isCollapsed, soon = false, isMobile = false, onClick }) {
   const pathname = usePathname();
   const { theme } = useTheme();
+  const isDark = theme === 'dark';
 
   if (isMobile) {
     return (
@@ -209,15 +226,18 @@ function NavLink({ href, icon, text, isCollapsed, soon = false, isMobile = false
   );
 }
 
-function SocialLink({ href, icon, className }) {
+function SocialLink({ href, icon }) {
   const { theme } = useTheme();
-
+  const isDark = theme === 'dark';
+
   return (
     <motion.a
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.9 }}
       href={href}
-      className={className}
+      className={`transition-colors duration-200 ${
+        isDark ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'
+      }`}
       target="_blank"
       rel="noopener noreferrer"
     >

diff --git a/appv2/src/app/layout.js b/appv2/src/app/layout.js
@@ -39,11 +39,12 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" dir="LTR">
-      <body className={`${urbanist.variable}`}>
-        <ThemeProvider>
-          <AlephiumWalletProvider theme="midnight" network={"mainnet"} addressGroup={0}>
-            <LanguageProvider>
+    <html lang="en" className={`${urbanist.variable}`}>
+
+      <ThemeProvider>
+        <LanguageProvider>
+          <body className={`min-h-screen transition-colors duration-200 dark:bg-gray-900 bg-gray-50 font-urbanist ${urbanist.className}`}>
+            <AlephiumWalletProvider theme="midnight" network={"mainnet"} addressGroup={0}>
               <div className="flex min-h-screen">
                 <Navbar />
                 <main className="flex-1 overflow-x-hidden overflow-y-auto md:ml-56 lg:ml-64 xl:ml-72 pb-16 md:pb-0 px-4 md:px-8">
@@ -52,10 +53,10 @@ export default function RootLayout({ children }) {
                   </div>
                 </main>
               </div>
-            </LanguageProvider>
-          </AlephiumWalletProvider>
-        </ThemeProvider>
-      </body>
+            </AlephiumWalletProvider>
+          </body>
+        </LanguageProvider>
+      </ThemeProvider>
     </html>
   );
 }
diff --git a/appv2/src/app/not-found.js b/appv2/src/app/not-found.js
@@ -1,26 +1,42 @@
-"use client"; // This is a client component 👈🏽
+"use client";
 import React, { useEffect } from "react";
 import Link from 'next/link';
 import { ArrowLeft } from "lucide-react";
 import { useTheme } from './context/ThemeContext';
 
 export default function Custom404() {
-    const { theme, isDark } = useTheme();
+    const { theme } = useTheme();
+
     useEffect(() => {
-        document.documentElement.classList.add(theme);
-        document.body.classList.add("font-urbanist",);
-      }, []);
+        document.body.className = '';
+        document.body.classList.add(theme);
+        document.body.classList.add("font-urbanist");
+    }, [theme]);
+
     return (
-        <>
-            <section className="relative flex items-center justify-center h-screen">
-                <div className="text-center">
+        <div className="min-h-screen flex flex-col relative">
+            <section className="flex items-center justify-center h-screen">
+                <div className={`text-center backdrop-blur-xl rounded-2xl p-8 border transition-colors duration-200 ${
+                    theme === 'dark' 
+                        ? 'bg-gray-800/50 text-white border-gray-700/50' 
+                        : 'bg-white/50 text-gray-900 border-gray-200/50'
+                }`}>
                     <h1 className="text-5xl font-bold text-orange-400 mb-4">Page Not Found?</h1>
-                    <p className="text-slate-400 mb-8">Whoops, this is embarrassing. <br /> Looks like the page you were looking for was not found.</p>
+                    <p className="text-slate-400 mb-8">
+                        Whoops, this is embarrassing. <br /> 
+                        Looks like the page you were looking for was not found.
+                    </p>
                     <div className="mt-6 flex justify-center">
-                        <Link href="/" className="btn bg-orange-400 hover:bg-orange-500 border-orange-400 hover:border-orange-500 text-white rounded-xl flex items-center gap-2"> <ArrowLeft className="w-4 h-4" /> Back to Home</Link>
+                        <Link 
+                            href="/" 
+                            className="btn bg-orange-400 hover:bg-orange-500 border-orange-400 hover:border-orange-500 text-white rounded-xl flex items-center gap-2 px-4 py-2"
+                        > 
+                            <ArrowLeft className="w-4 h-4" /> 
+                            Back to Home
+                        </Link>
                     </div>
                 </div>
             </section>
-        </>
-    )
+        </div>
+    );
 }
diff --git a/appv2/src/app/page.js b/appv2/src/app/page.js
@@ -25,9 +25,10 @@ function BurnInterface() {
   const [burnSummary, setBurnSummary] = useState(null);
 
   useEffect(() => {
+    document.body.className = '';
     document.body.classList.add(theme);
-    document.body.classList.add("font-urbanist",);
-  }, []);
+    document.body.classList.add("font-urbanist");
+  }, [theme]);
 
   useEffect(() => {
     const fetchTokens = async () => {
@@ -116,7 +117,7 @@ function BurnInterface() {
   };
 
   return (
-    <div className={`min-h-screen flex flex-col relative transition-colors duration-200`}>
+    <div className="min-h-screen flex flex-col relative">
       <main className="flex-grow container mx-auto px-4 py-8 max-w-2xl mt-16">
         <motion.div
           initial={{ opacity: 0, y: 20 }}