diff --git a/src/email/EmailShell.tsx b/src/email/EmailShell.tsx index 6eaa606..fdfd4ee 100644 --- a/src/email/EmailShell.tsx +++ b/src/email/EmailShell.tsx @@ -48,6 +48,17 @@ function IconPhone() { ) } +function IconMapPin() { + return ( + + ) +} + function telHref(phone: string) { // Remove spaces and dashes so tel links work reliably across clients. const cleaned = phone.replace(/[\\s-]/g, '') @@ -56,15 +67,17 @@ function telHref(phone: string) { function ContactLine({ icon, + iconColor, children, }: { icon: ReactNode + iconColor: string children: ReactNode }) { return ( - - {icon} + + {icon} {children} @@ -113,42 +126,58 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr backgroundColor: 'rgba(255,255,255,0.55)', }} > - {brand.footer.address ? ( - - {brand.footer.address} - - ) : null} + + Contact + - {brand.footer.email ? ( - }> - - - {brand.footer.email} - - - - ) : null} + + + {brand.footer.address ? ( + } iconColor={brand.primaryColor}> + + {brand.footer.address} + + + ) : null} + - {brand.footer.phone1 || brand.footer.phone2 ? ( - }> - - {brand.footer.phone1 ? ( - - {brand.footer.phone1} + + {brand.footer.email ? ( + } iconColor={brand.primaryColor}> + + {brand.footer.email} - ) : null} - {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''} - {brand.footer.phone2 ? ( - - {brand.footer.phone2} - - ) : null} - - - ) : null} + + ) : null} + + {brand.footer.phone1 || brand.footer.phone2 ? ( + } iconColor={brand.primaryColor}> + + {brand.footer.phone1 ? ( + + {brand.footer.phone1} + + ) : null} + {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''} + {brand.footer.phone2 ? ( + + {brand.footer.phone2} + + ) : null} + + + ) : null} + +