Extract email presentation configuration layer to streamline email branding

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/emails/src/MagicLink.tsx

@@ -10,11 +10,11 @@ import EmailLayout, {
 export const MagicLink = () => {
   return (
     <EmailLayout subject="Probo Magic Link">
-      <Text style={bodyText}>Please use this link to connect to Probo:</Text>
+      <Text style={bodyText}>{"Please use this link to connect to {{.OrganizationName}}'s Compliance Page:"}</Text>
 
       <Section style={buttonContainer}>
         <Button style={button} href={"{{.MagicLinkURL}}"}>
-          Connect to Probo
+          Connect
         </Button>
       </Section>
 

packages/emails/src/components/EmailLayout.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@react-email/components';
 import * as React from 'react';
-import { ProboLogo } from './ProboLogo';
+import { Logo } from './Logo';
 
 interface EmailLayoutProps {
   subject: string;
@@ -33,19 +33,19 @@ export const EmailLayout = ({
         <Container style={container}>
           <Section style={content}>
             <Section style={logoSection}>
-              <Link href="https://www.getprobo.com">
-                <ProboLogo />
+              <Link href="{{.SenderCompanyWebsiteURL}}">
+                <Logo />
               </Link>
             </Section>
 
-            <Text style={text}>Hi {'{{.FullName}}'},</Text>
+            <Text style={text}>Hi {'{{.RecipientFullName}}'},</Text>
 
             {children}
           </Section>
 
           <Section style={footerSection}>
             <Text style={footerAddress}>
-              Probo Inc, 490 Post St, STE 640, San Francisco, CA, 94102, US
+              {"{{.SenderCompanyHeadquarterAddress}}"}
             </Text>
           </Section>
         </Container>

packages/emails/src/components/Logo.tsx

@@ -0,0 +1,13 @@
+import { Img } from '@react-email/components';
+import * as React from 'react';
+
+export function Logo() {
+  return (
+    <Img
+      className="max-width-[220px]"
+      src="{{.SenderCompanyLogoURL}}"
+      alt="{{.SenderCompanyName}}"
+      height="60"
+    />
+  );
+}

packages/emails/src/components/ProboLogo.tsx

@@ -1,13 +0,0 @@
-import { Img } from '@react-email/components';
-import * as React from 'react';
-
-export function ProboLogo() {
-  return (
-    <Img
-      src={'{{.LogoURL}}'}
-      alt="Probo"
-      width="220"
-      height="60"
-    />
-  );
-}