feat: ✨ improve and upgrade stuff

improve settings form, auth form, verification mail template upgrade to react email v3.0.1, resend v4
moinulmoin · Oct 12, 2024 · d46fd24 · d46fd24
1 parent 8e47d39
commit d46fd24
Show file tree

Hide file tree

Showing 8 changed files with 893 additions and 1,126 deletions.
diff --git a/emails/verification.tsx b/emails/verification.tsx
@@ -1,6 +1,5 @@
 import {
   Body,
-  Button,
   Column,
   Container,
   Head,
@@ -22,23 +21,23 @@ interface VerificationTemplateProps {
 }
 
 const VerificationTemp: React.FC<Readonly<VerificationTemplateProps>> = ({
-  userName,
-  code,
+  userName = "X",
+  code = "46590",
 }) => (
   <Html>
     <Head />
     <Preview>Verify your email</Preview>
     <Tailwind>
-      <Body className="bg-white">
-        <Container className="mx-auto py-20">
+      <Body className="bg-gray-100">
+        <Container className="m-10 mx-auto bg-white p-10">
           <Section className="mx-auto text-center">
             <Row>
               <Column align="right">
                 <Img
                   src={`${siteUrl}/chad-next.png`}
                   height="50"
                   alt="ChadNext logo"
-                  className="inline-block "
+                  className="inline-block"
                 />
               </Column>
               <Column align="left">
@@ -47,23 +46,21 @@ const VerificationTemp: React.FC<Readonly<VerificationTemplateProps>> = ({
             </Row>
           </Section>
           <Text className="my-4 text-lg">Hi, {userName.split(" ")[0]}</Text>
-          <Text className="text-center text-base font-semibold ">
-            Click the link below to login to your account.
+          <Text className="text-center text-base font-semibold">
+            Here is your verification code.
           </Text>
-          <Section className="mt-8 text-center">
-            <div
-              className="bg-bg-white inline-block rounded-md bg-slate-900 tracking-wider px-6 py-3 text-base text-gray-100"
-            >
+          <Section className="mt-4 text-center">
+            <div className="inline-block px-6 py-3 text-xl font-bold tracking-[10px] text-slate-900">
               {code}
             </div>
-            <Text className="mt-2.5 text-sm ">
-              This link expires in 10 minutes and can only be used once.
+            <Text className="mt-2.5 text-sm">
+              This code expires in 3 minutes and can only be used once.
             </Text>
           </Section>
-          <Text className="mt-8 ">
+          <Text className="mt-8 text-base">
             Best,
             <br />
-            ChadNext team
+            <span className="font-bold">ChadNext</span>
           </Text>
         </Container>
       </Body>

diff --git a/package.json b/package.json
@@ -34,18 +34,18 @@
     "dayjs": "^1.11.10",
     "input-otp": "^1.2.4",
     "lucia": "3.2.0",
-    "lucide-react": "^0.341.0",
+    "lucide-react": "^0.447.0",
     "nanoid": "^5.0.4",
-    "next": "14.2.4",
+    "next": "14.2.14",
     "next-international": "^1.1.4",
     "next-themes": "^0.3.0",
     "oslo": "^1.2.1",
     "postcss": "8.4.35",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-email": "1.10.0",
+    "react-email": "3.0.1",
     "react-hook-form": "^7.49.2",
-    "resend": "^3.4.0",
+    "resend": "^4.0.0",
     "stripe": "^14.8.0",
     "uploadthing": "^7.0.2",
     "zod": "^3.22.4"