From 375d92f55e483444ea39c0681c00ddeeeb3ca927 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 3 Aug 2025 22:41:14 +0200
Subject: [PATCH] Fix buttons

---
 app/Header.tsx       | 12 +++++++-----
 lib/client/theme.tsx |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/Header.tsx b/app/Header.tsx
index 91db6843..8e9ae80e 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -25,6 +25,8 @@ export default function Header() {
     return () => window.removeEventListener('resize', checkScreenSize);
   }, []);
 
+  const fontStyle = "transition px-2 py-2 text-sm font-medium xs:text-xs"
+
   return (
     <header className="w-full
     {/*shadow-md*/}
@@ -44,7 +46,7 @@ export default function Header() {
           <div className="flex items-center space-x-2">
             <Link
               href="/learn-more"
-              className="px-2 py-2 text-sm xs:text-xs font-medium bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition"
+              className={`${fontStyle} bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500`}
             >
               Learn More
             </Link>
@@ -54,7 +56,7 @@ export default function Header() {
               <div className="flex items-center space-x-2">
                 <Link
                   href="/profile"
-                  className="text-blue-600 dark:text-blue-100 hover:text-blue-800 dark:hover:text-blue-300 px-2 py-2 text-sm font-medium xs:text-xs"
+                  className={`${fontStyle} text-blue-600 dark:text-blue-100 hover:text-blue-800 dark:hover:text-blue-300`}
                 >
                   My Profile
                 </Link>
@@ -66,7 +68,7 @@ export default function Header() {
                 {/*</Link>*/}
                 <button
                   onClick={() => signOut({callbackUrl: "/"})}
-                  className="bg-red-500 text-white px-2 py-2 rounded-lg hover:bg-red-600 transition text-sm xs:text-xs font-medium"
+                  className={`${fontStyle} bg-red-500 text-white rounded-lg hover:bg-red-600`}
                 >
                   Sign Out
                 </button>
@@ -74,11 +76,11 @@ export default function Header() {
             </>
           ) : (
             <>
-              <Link href="/login" className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition xs:text-xs">
+              <Link href="/login" className={`${fontStyle} bg-blue-500 text-white rounded-lg hover:bg-blue-600 `}>
                 Sign In
               </Link>
               <Link href="/register"
-                    className="bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600 transition xs:text-xs">
+                    className={`${fontStyle} bg-blue-500 text-white rounded-lg hover:bg-blue-600`}>
                 Sign Up
               </Link>
             </>
diff --git a/lib/client/theme.tsx b/lib/client/theme.tsx
index 7d330b3c..35d5b787 100644
--- a/lib/client/theme.tsx
+++ b/lib/client/theme.tsx
@@ -18,7 +18,7 @@ export default function ThemeToggle() {
   return (
     <button
       onClick={() => setTheme(isDark ? 'light' : 'dark')}
-      className={`relative inline-flex h-8 items-center rounded-full border-4 transition-colors duration-300`}
+      className={`relative inline-flex items-center rounded-full border-4 transition-colors duration-300`}
       aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
     >
       <div className="flex items-center justify-between px-2 w-16">