feat: Make sure design is responsive

Author: gdangelo

emails/confirm-email.html

@@ -346,10 +346,7 @@
           >
             <tr>
               <td class="email-masthead">
-                <a
-                  href="http://localhost:3000"
-                  class="f-fallback email-masthead_name"
-                >
+                <a href="{{base_url}}" class="f-fallback email-masthead_name">
                   ⚡ Magic NextAuth
                 </a>
               </td>

emails/welcome.html

@@ -349,10 +349,7 @@
           >
             <tr>
               <td class="email-masthead">
-                <a
-                  href="https://localhost:3000"
-                  class="f-fallback email-masthead_name"
-                >
+                <a href="{{base_url}}" class="f-fallback email-masthead_name">
                   ⚡ Magic NextAuth
                 </a>
               </td>

pages/api/auth/[...nextauth].js

@@ -34,6 +34,7 @@ const sendVerificationRequest = ({ identifier, url }) => {
     to: identifier,
     subject: 'Your sign-in link for Magic NextAuth',
     html: emailTemplate({
+      base_url: process.env.NEXTAUTH_URL,
       signin_url: url,
       email: identifier,
     }),
@@ -53,6 +54,7 @@ const sendWelcomeEmail = async user => {
       to: email,
       subject: 'Welcome to Magic NextAuth! 🎉',
       html: emailTemplate({
+        base_url: process.env.NEXTAUTH_URL,
         support_email: 'support@alterclass.io',
       }),
     });

pages/auth/confirm-request.js

@@ -19,10 +19,14 @@ const ConfirmRequest = () => {
         <p>Redirecting...</p>
       ) : (
         <>
-          <CheckCircleIcon className="w-16 h-16 text-blue-600 flex-shrink-0" />
-          <h1 className="text-4xl font-bold mt-6">You&apos;re logged in!</h1>
-          <p className="text-2xl mt-4">Go back to your original tab.</p>
-          <p className="text-gray-500 text-lg mt-6">
+          <CheckCircleIcon className="w-14 h-14 sm:w-16 sm:h-16 text-blue-600 flex-shrink-0" />
+          <h1 className="text-2xl sm:text-4xl font-bold mt-4">
+            You&apos;re logged in!
+          </h1>
+          <p className="text-lg sm:text-2xl mt-4">
+            Go back to your original tab.
+          </p>
+          <p className="text-normal sm:text-lg text-gray-500 mt-6">
             You can close this window or click{' '}
             <Link href="/">
               <a className="text-blue-500 hover:underline hover:text-blue-600">

pages/auth/signin.js

@@ -78,14 +78,14 @@ const SignIn = () => {
 
   return (
     <>
-      <div className="min-h-screen flex flex-col items-center justify-center">
-        <LightningBoltIcon className="flex-shrink-0 w-16 h-16 text-blue-500" />
-        <h1 className="mt-2 text-4xl text-center font-bold">
+      <div className="min-h-screen flex flex-col items-center justify-center px-4 py-12">
+        <LightningBoltIcon className="flex-shrink-0 w-14 h-14 sm:w-16 sm:h-16 text-blue-500" />
+        <h1 className="mt-2 text-2xl sm:text-4xl text-center font-bold">
           Sign in to your account
         </h1>
         <form
           onSubmit={handleSignIn}
-          className="mt-8 rounded-lg shadow-md bg-white p-8 space-y-6 w-full max-w-md"
+          className="mt-8 rounded-lg shadow-md bg-white px-4 py-6 sm:px-8 sm:py-8 space-y-6 w-full max-w-md"
         >
           <div className="flex flex-col space-y-1">
             <label htmlFor="email" className="text-gray-500 text-sm">

pages/index.js

@@ -9,13 +9,13 @@ export default function Home() {
   return (
     <div className="min-h-screen flex flex-col">
       <main className="flex-1 container mx-auto px-6 py-12 flex flex-col items-center justify-center">
-        <h1 className="inline-flex items-center space-x-2">
-          <LightningBoltIcon className="flex-shrink-0 w-16 h-16 text-blue-500" />
-          <span className="h-16 text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-700">
+        <h1 className="inline-flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-2">
+          <LightningBoltIcon className="flex-shrink-0 w-14 h-14 sm:w-16 sm:h-16 text-blue-500" />
+          <span className="sm:h-16 text-4xl sm:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-700 text-center">
             Magic NextAuth
           </span>
         </h1>
-        <p className="mt-4 text-gray-500 text-2xl">
+        <p className="mt-4 text-gray-500 text-xl sm:text-2xl text-center">
           Magic Link Authentication in Next.js with NextAuth and Fauna
         </p>
         <div className="mt-8">