Update emails design (#165)

packages/email-templates/src/components/body-style.tsx

@@ -3,10 +3,10 @@ export function BodyStyle() {
     <style>
       {`
         body {
-          background-color: #fff;
+          background-color: #fafafa;
           margin: auto;
           font-family: sans-serif;
-          color: #484848;
+          color: #242424;
         }
     `}
     </style>

packages/email-templates/src/components/content.tsx

@@ -1,18 +1,19 @@
 import { Container } from '@react-email/components';
 
-export function EmailContent(
-  props: React.PropsWithChildren<{
-    className?: string;
-  }>,
-) {
+export function EmailContent({
+  children,
+  className,
+}: React.PropsWithChildren<{
+  className?: string;
+  displayLogo?: boolean;
+}>) {
   return (
     <Container
       className={
-        'mx-auto my-[8px] rounded-xl border border-solid border-[#eeeeee] px-[24px] py-[12px] ' +
-          props.className || ''
+        'mx-auto rounded-xl bg-white px-[48px] py-[36px] ' + className || ''
       }
     >
-      {props.children}
+      {children}
     </Container>
   );
 }

packages/email-templates/src/components/cta-button.tsx

@@ -7,7 +7,7 @@ export function CtaButton(
 ) {
   return (
     <Button
-      className="rounded-smbg-[#000000] w-full py-3 text-center text-[14px] font-semibold text-white no-underline"
+      className="w-full bg-[#000000] rounded text-white text-[16px] font-semibold no-underline text-center py-3"
       href={props.href}
     >
       {props.children}

packages/email-templates/src/components/footer.tsx

@@ -3,7 +3,7 @@ import { Container, Text } from '@react-email/components';
 export function EmailFooter(props: React.PropsWithChildren) {
   return (
     <Container>
-      <Text className="px-4 text-[12px] leading-[24px] text-gray-300">
+      <Text className="px-4 text-[12px] leading-[20px] text-gray-300">
         {props.children}
       </Text>
     </Container>

packages/email-templates/src/components/header.tsx

@@ -1,5 +1,11 @@
-import { Container } from '@react-email/components';
+import { Container, Section } from '@react-email/components';
 
 export function EmailHeader(props: React.PropsWithChildren) {
-  return <Container>{props.children}</Container>;
+  return (
+    <Container>
+      <Section>
+        {props.children}
+      </Section>
+    </Container>
+  );
 }

packages/email-templates/src/components/heading.tsx

@@ -2,7 +2,7 @@ import { Heading } from '@react-email/components';
 
 export function EmailHeading(props: React.PropsWithChildren) {
   return (
-    <Heading className="mx-0 p-0 font-sans text-[20px] font-normal tracking-tight text-black">
+    <Heading className="mx-0 p-0 font-sans text-[22px] font-semibold text-[#242424]">
       {props.children}
     </Heading>
   );

packages/email-templates/src/components/wrapper.tsx

@@ -8,19 +8,20 @@ export function EmailWrapper(
   return (
     <Container
       style={{
-        backgroundColor: '#fff',
+        backgroundColor: '#fafafa',
         margin: 'auto',
         fontFamily: 'sans-serif',
-        color: '#484848',
+        color: '#242424',
+        width: '100%',
       }}
     >
       <Container
         style={{
-          maxWidth: '535px',
-          backgroundColor: '#fff',
+          maxWidth: '720px',
+          backgroundColor: '#fafafa',
           margin: 'auto',
         }}
-        className={'mx-auto my-[36px] px-4 ' + props.className || ''}
+        className={'mx-auto px-[20px] py-[40px] ' + props.className || ''}
       >
         {props.children}
       </Container>