Tweak verify-email layout

Centered + secondary button + use TextLink

Author: hugosaintemarie

resources/js/pages/auth/verify-email.tsx

@@ -1,8 +1,9 @@
 // Components
-import { Head, Link, useForm } from '@inertiajs/react';
+import { Head, useForm } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { FormEventHandler } from 'react';
 
+import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import AuthLayout from '@/layouts/auth-layout';
 
@@ -25,22 +26,15 @@ export default function VerifyEmail({ status }: { status?: string }) {
                 </div>
             )}
 
-            <form onSubmit={submit}>
-                <div className="mt-4 flex items-center justify-between">
-                    <Button disabled={processing}>
-                        {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
+            <form onSubmit={submit} className="space-y-6 text-center">
+                <Button disabled={processing} variant="secondary">
+                    {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                     Resend verification email
-                    </Button>
-
-                    <Link
-                        href={route('logout')}
-                        method="post"
-                        as="button"
-                        className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
-                    >
-                        Log Out
-                    </Link>
-                </div>
+                </Button>
+
+                <TextLink href={route('logout')} method="post" className="mx-auto block text-sm">
+                    Log out
+                </TextLink>
             </form>
         </AuthLayout>
     );