💄 Refactor email templates and components for improved styling (#2451)

packages/react-email/ui/Callout.tsx

@@ -3,20 +3,44 @@ import { Section, Text } from "@react-email/components"
 type CalloutProps = React.PropsWithChildren
 
 export const Callout = ({ children }: CalloutProps) => (
-  <Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
-    {children}
-  </Section>
+  <Section style={calloutStyle}>{children}</Section>
 )
 
 type DetailProps = { label: string; value: string }
 
 export const Detail = ({ label, value }: DetailProps) => (
-  <Text className="m-0 my-3">
-    <span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
-      {label}
-    </span>
-    <span className="block text-sm font-semibold break-all font-mono mt-1">
-      {value}
-    </span>
+  <Text style={detailStyle}>
+    <span style={labelStyle}>{label}</span>
+    <br />
+    <span style={valueStyle}>{value}</span>
   </Text>
 )
+
+const calloutStyle = {
+  backgroundColor: "#f2f8f7",
+  borderLeft: "3px solid #00897b",
+  margin: "24px 0 28px",
+  padding: "6px 18px",
+}
+
+const detailStyle = {
+  margin: "12px 0",
+}
+
+const labelStyle = {
+  color: "#64748b",
+  fontSize: "11px",
+  fontWeight: "700",
+  letterSpacing: "1px",
+  lineHeight: "16px",
+  textTransform: "uppercase" as const,
+}
+
+const valueStyle = {
+  color: "#1e293b",
+  fontFamily: 'Consolas, "Courier New", monospace',
+  fontSize: "14px",
+  fontWeight: "700",
+  lineHeight: "22px",
+  wordBreak: "break-all" as const,
+}