major ui tweaks and refactoring

server/emails/templates/components/ButtonLink.tsx

@@ -0,0 +1,18 @@
+export default function ButtonLink({
+    href,
+    children,
+    className = ""
+}: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <a
+            href={href}
+            className={`rounded-full bg-primary px-4 py-2 text-center font-semibold text-white text-xl no-underline inline-block ${className}`}
+        >
+            {children}
+        </a>
+    );
+}

server/emails/templates/components/CopyCodeBox.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function CopyCodeBox({ text }: { text: string }) {
+    return (
+        <div className="flex items-center justify-center rounded-lg bg-neutral-100 p-2">
+            <span className="text-2xl font-mono text-neutral-600 tracking-wide">
+                {text}
+            </span>
+        </div>
+    );
+}

server/emails/templates/components/Email.tsx

@@ -0,0 +1,91 @@
+import { Container } from "@react-email/components";
+import React from "react";
+
+// EmailContainer: Wraps the entire email layout
+export function EmailContainer({ children }: { children: React.ReactNode }) {
+    return (
+        <Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8 rounded-lg">
+            {children}
+        </Container>
+    );
+}
+
+// EmailLetterHead: For branding or logo at the top
+export function EmailLetterHead() {
+    return (
+        <div className="mb-4">
+            <table
+                role="presentation"
+                width="100%"
+                style={{
+                    marginBottom: "24px"
+                }}
+            >
+                <tr>
+                    <td
+                        style={{
+                            fontSize: "14px",
+                            fontWeight: "bold",
+                            color: "#F97317"
+                        }}
+                    >
+                        Pangolin
+                    </td>
+                    <td
+                        style={{
+                            fontSize: "14px",
+                            textAlign: "right",
+                            color: "#6B7280"
+                        }}
+                    >
+                        {new Date().getFullYear()}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    );
+}
+
+// EmailHeading: For the primary message or headline
+export function EmailHeading({ children }: { children: React.ReactNode }) {
+    return (
+        <h1 className="text-2xl font-semibold text-gray-800 text-center">
+            {children}
+        </h1>
+    );
+}
+
+export function EmailGreeting({ children }: { children: React.ReactNode }) {
+    return <p className="text-lg text-gray-700 my-4">{children}</p>;
+}
+
+// EmailText: For general text content
+export function EmailText({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <p className={`my-2 text-base text-gray-700 ${className}`}>
+            {children}
+        </p>
+    );
+}
+
+// EmailSection: For visually distinct sections (like OTP)
+export function EmailSection({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return <div className={`text-center my-4 ${className}`}>{children}</div>;
+}
+
+// EmailFooter: For closing or signature
+export function EmailFooter({ children }: { children: React.ReactNode }) {
+    return <div className="text-sm text-gray-500 mt-6">{children}</div>;
+}

server/emails/templates/components/LetterHead.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-
-export function LetterHead() {
-    return (
-        <table
-            role="presentation"
-            width="100%"
-            style={{
-                marginBottom: "24px"
-            }}
-        >
-            <tr>
-                <td
-                    style={{
-                        fontSize: "14px",
-                        fontWeight: "bold",
-                        color: "#F97317"
-                    }}
-                >
-                    Pangolin
-                </td>
-                <td
-                    style={{
-                        fontSize: "14px",
-                        textAlign: "right",
-                        color: "#6B7280"
-                    }}
-                >
-                    {new Date().getFullYear()}
-                </td>
-            </tr>
-        </table>
-    );
-}
-
-export default LetterHead;