Fixed colours

frontend/src/components/Layout/Layout.jsx

@@ -1,9 +1,9 @@
 // frontend/src/components/Layout/Layout.jsx
 
-import { Moon, Sun } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { getToken } from '../../services/api';
+import ThemeButton from "../UI/ThemeButton";
 import Navbar from './Navbar';
 
 export default function Layout({ darkMode, setDarkMode }) {
@@ -40,15 +40,7 @@ export default function Layout({ darkMode, setDarkMode }) {
                 <Outlet context={{ setNavTitle, setNavSubtitle, isAdmin, showSettings, setShowSettings }} />
             </main>
 
-            <div className="fixed bottom-6 sm:bottom-8 right-6 sm:right-8 z-40 print:hidden">
-                <button
-                    onClick={() => setDarkMode(!darkMode)}
-                    title="Toggle Theme"
-                    className="p-4 sm:p-5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-[1.5rem] sm:rounded-[2rem] shadow-2xl transition hover:scale-110 active:scale-95 border-2 border-zinc-700 dark:border-zinc-300 group"
-                >
-                    {darkMode ? <Sun size={24} strokeWidth={2.5} className="sm:size-7" /> : <Moon size={24} strokeWidth={2.5} className="sm:size-7" />}
-                </button>
-            </div>
+            <ThemeButton darkMode={darkMode} setDarkMode={setDarkMode} />
         </div>
     );
 }