Pull up downstream changes

server/emails/templates/components/Email.tsx

@@ -1,47 +1,26 @@
-import { Container } from "@react-email/components";
 import React from "react";
+import { Container, Img } from "@react-email/components";
 
 // 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">
+        <Container className="bg-white border border-solid border-gray-200 max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-sm">
             {children}
         </Container>
     );
 }
 
-// EmailLetterHead: For branding or logo at the top
+// EmailLetterHead: For branding with logo on dark background
 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 className="px-6 pt-8 pb-2 text-center">
+            <Img
+                src="https://fossorial-public-assets.s3.us-east-1.amazonaws.com/word_mark_black.png"
+                alt="Fossorial"
+                width="120"
+                height="auto"
+                className="mx-auto"
+            />
         </div>
     );
 }
@@ -49,14 +28,22 @@ export function EmailLetterHead() {
 // 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>
+        <div className="px-6 pt-4 pb-1">
+            <h1 className="text-2xl font-semibold text-gray-900 text-center leading-tight">
+                {children}
+            </h1>
+        </div>
     );
 }
 
 export function EmailGreeting({ children }: { children: React.ReactNode }) {
-    return <p className="text-base text-gray-700 my-4">{children}</p>;
+    return (
+        <div className="px-6">
+            <p className="text-base text-gray-700 leading-relaxed">
+                {children}
+            </p>
+        </div>
+    );
 }
 
 // EmailText: For general text content
@@ -68,9 +55,13 @@ export function EmailText({
     className?: string;
 }) {
     return (
-        <p className={`my-2 text-base text-gray-700 ${className}`}>
-            {children}
-        </p>
+        <div className="px-6">
+            <p
+                className={`text-base text-gray-700 leading-relaxed ${className}`}
+            >
+                {children}
+            </p>
+        </div>
     );
 }
 
@@ -82,20 +73,70 @@ export function EmailSection({
     children: React.ReactNode;
     className?: string;
 }) {
-    return <div className={`text-center my-6 ${className}`}>{children}</div>;
+    return (
+        <div className={`px-6 py-6 text-center ${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>;
+    return (
+        <div className="px-6 py-6 border-t border-gray-100 bg-gray-50">
+            {children}
+            <p className="text-xs text-gray-400 mt-4">
+                For any questions or support, please contact us at:
+                <br />
+                support@fossorial.io
+            </p>
+            <p className="text-xs text-gray-300 text-center mt-4">
+                &copy; {new Date().getFullYear()} Fossorial, Inc. All rights
+                reserved.
+            </p>
+        </div>
+    );
 }
 
 export function EmailSignature() {
     return (
-        <p>
-            Best regards,
-            <br />
-            Fossorial
-        </p>
+        <div className="text-sm text-gray-600">
+            <p className="mb-2">
+                Best regards,
+                <br />
+                <strong>The Fossorial Team</strong>
+            </p>
+        </div>
+    );
+}
+
+// EmailInfoSection: For structured key-value info (like resource details)
+export function EmailInfoSection({
+    title,
+    items
+}: {
+    title?: string;
+    items: { label: string; value: React.ReactNode }[];
+}) {
+    return (
+        <div className="px-6 py-4">
+            {title && (
+                <div className="mb-2 font-semibold text-gray-900 text-base">
+                    {title}
+                </div>
+            )}
+            <table className="w-full text-sm text-left">
+                <tbody>
+                    {items.map((item, idx) => (
+                        <tr key={idx}>
+                            <td className="pr-4 py-1 text-gray-600 align-top whitespace-nowrap">
+                                {item.label}
+                            </td>
+                            <td className="py-1 text-gray-900 break-all">
+                                {item.value}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
     );
 }