refactor(auth): replace anchor navigation links with Button components and improve auth page styling

src/features/auth/AuthPage.server.js

@@ -14,7 +14,7 @@ export default async function AuthPage({ params, searchParams }) {
   const session = await getSession();
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4 md:p-8">
+    <div className="min-h-screen flex items-center justify-center p-4 md:p-8 bg-neutral-50 dark:bg-black">
       <div className="max-w-md w-full">
         <AuthPageClient
           params={params}

src/features/auth/pages/ForgotPasswordPage.client.js

@@ -108,6 +108,7 @@ export default function ForgotPasswordPage({ onSubmit, onNavigate, currentUser =
         <Button
           type="submit"
           variant="primary"
+          size="lg"
           loading={isLoading}
           disabled={!!success || !!currentUser}
           className="w-full mt-2"

src/features/auth/pages/LoginPage.client.js

@@ -151,6 +151,7 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
         <Button
           type="button"
           variant="primary"
+          size="lg"
           loading={isLoading}
           disabled={!!success || !!currentUser}
           onClick={handleSubmit}
@@ -160,18 +161,15 @@ export default function LoginPage({ onSubmit, onNavigate, onSetSessionCookie, re
         </Button>
       </div>
 
-      <div className={`mt-6 text-center transition-opacity duration-200 ${currentUser ? 'opacity-50 pointer-events-none' : ''}`}>
+      <div className={`mt-6 flex justify-center transition-opacity duration-200 ${currentUser ? 'opacity-50 pointer-events-none' : ''}`}>
-        <a
+        <Button
-          href="#"
+          type="button"
-          onClick={(e) => {
+          variant="ghost"
-            e.preventDefault();
+          disabled={!!currentUser}
-            if (!currentUser) onNavigate('register');
+          onClick={() => { if (!currentUser) onNavigate('register'); }}
-          }}
-          className="group flex items-center justify-center gap-2"
         >
-          <span className="text-sm text-neutral-600 dark:text-neutral-400">Pas de compte ? </span>
+          Pas de compte ? S'inscrire
-          <span className="text-sm text-neutral-900 group-hover:text-neutral-600 font-medium transition-colors duration-200 dark:text-white dark:group-hover:text-neutral-300">S'inscrire</span>
+        </Button>
-        </a>
       </div>
     </Card>
   );

src/features/auth/pages/RegisterPage.client.js

@@ -208,6 +208,7 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
         <Button
           type="submit"
           variant="primary"
+          size="lg"
           loading={isLoading}
           disabled={!!success || !!currentUser || !isFormValid()}
           className="w-full mt-2"
@@ -216,18 +217,15 @@ export default function RegisterPage({ onSubmit, onNavigate, currentUser = null
         </Button>
       </form>
 
-      <div className={`mt-6 text-center transition-opacity duration-200 ${currentUser ? 'opacity-50 pointer-events-none' : ''}`}>
+      <div className={`mt-6 flex justify-center transition-opacity duration-200 ${currentUser ? 'opacity-50 pointer-events-none' : ''}`}>
-        <a
+        <Button
-          href="#"
+          type="button"
-          onClick={(e) => {
+          variant="ghost"
-            e.preventDefault();
+          disabled={!!currentUser}
-            if (!currentUser) onNavigate('login');
+          onClick={() => { if (!currentUser) onNavigate('login'); }}
-          }}
-          className="group flex items-center justify-center gap-2"
         >
-          <span className="text-sm text-neutral-600 dark:text-neutral-400">Vous avez déjà un compte ? </span>
+          Vous avez déjà un compte ? Se connecter
-          <span className="text-sm text-neutral-900 group-hover:text-neutral-600 font-medium transition-colors duration-200 dark:text-white dark:group-hover:text-neutral-300">Se connecter</span>
+        </Button>
-        </a>
       </div>
     </Card>
   );

src/features/auth/pages/ResetPasswordPage.client.js

@@ -129,6 +129,7 @@ export default function ResetPasswordPage({ onSubmit, onNavigate, email, token }
         <Button
           type="submit"
           variant="primary"
+          size="lg"
           loading={isLoading}
           disabled={!!success || !isFormValid()}
           className="w-full mt-2"

src/shared/components/Button.js

@@ -27,29 +27,29 @@ const Button = ({
     };
 
     const sizes = {
-        sm: '',
+        sm: 'px-[10px] py-[5px] text-[12px] gap-1',
         md: 'px-[12px] py-[7px] text-[13px] gap-1.5',
-        lg: ''
+        lg: 'px-[14px] py-[9px] text-[14px] gap-2'
     };
 
     const iconOnlySizes = {
-        sm: '',
+        sm: 'p-[5px] text-[12px]',
         md: 'p-[7px] text-[13px]',
-        lg: ''
+        lg: 'p-[9px] text-[14px]'
     };
 
     const isIconOnly = icon && !children;
 
     const iconSizes = {
-        sm: '',
+        sm: 'w-3.5 h-3.5',
         md: 'w-4 h-4',
-        lg: ''
+        lg: 'w-4.5 h-4.5'
     };
 
     const textSizes = {
-        sm: '',
+        sm: 'min-h-3.5',
         md: 'min-h-4',
-        lg: ''
+        lg: 'min-h-4.5'
     };
 
     const LoadingSpinner = () => (