Email

midday-ai · Nov 14, 2023 · db1e7e4 · db1e7e4
1 parent 6a4514a
commit db1e7e4
Showing 1 changed file with 33 additions and 22 deletions.
diff --git a/packages/email/emails/transactions.tsx b/packages/email/emails/transactions.tsx
@@ -97,16 +97,16 @@ export const TransactionsEmail = ({
           fontFamily="Instrument Sans"
           fallbackFontFamily="Helvetica"
           webFont={{
-            url: "https://fonts.gstatic.com/s/instrumentsans/v1/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0She1ZuWi3hKpA.woff2",
+            url: "https://fonts.gstatic.com/s/instrumentsans/v1/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npST3-TfykywN2u7ZWwU.woff2",
             format: "woff2",
           }}
-          fontWeight={600}
+          fontWeight={500}
         />
       </Head>
       <Preview>{previewText}</Preview>
       <Tailwind>
-        <Body className="bg-white my-auto mx-auto font-sans">
-          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[560px]">
+        <Body className="bg-[#F0EFEC] my-auto mx-auto font-sans">
+          <Container className="border border-solid border-[#DCDAD2] rounded my-[40px] mx-auto p-[20px] w-[560px]">
             <Section className="mt-[32px]">
               <Img
                 src={`${baseUrl}/logo.png`}
@@ -116,33 +116,35 @@ export const TransactionsEmail = ({
                 className="my-0 mx-auto"
               />
             </Section>
-            <Heading className="text-black text-[21px] font-normal text-center p-0 my-[30px] mx-0">
-              You have <span className="font-medium">5 transactions</span> thats
-              missing <br />
+            <Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
+              You have <span className="font-semibold">5 transactions</span>{" "}
+              thats missing <br />
               receipts.
             </Heading>
-            <Text className="text-black text-[14px] leading-[24px]">
-              Hi {firstName}, We found{" "}
-              <span className="font-medium">5 transactions</span> thats missing
-              receipts. Feel free to attach them to ease your own or your
-              accountants work for upcoming declerations.
+            <Text className="text-[#121212] text-[14px] leading-[24px]">
+              Hi {firstName},<br /> <br />
+              We found <span className="font-semibold">
+                5 transactions
+              </span>{" "}
+              thats missing receipts. Feel free to attach them to ease your own
+              or your accountants work for upcoming declerations.
             </Text>
 
-            <table style={{ width: "100%" }}>
+            <table style={{ width: "100%" }} className="border-collapse w-full">
               <thead>
-                <tr style={{ borderBottom: "1px solid black" }}>
+                <tr className="border-0 border-t-[1px] border-b-[1px] border-solid border-[#DCDAD2] h-[45px]">
                   <th align="left">
-                    <Text className="text-[14px] font-medium m-0 p-0">
+                    <Text className="text-[14px] font-semibold m-0 p-0">
                       Date
                     </Text>
                   </th>
                   <th align="left" style={{ width: "50%" }}>
-                    <Text className="text-[14px] font-medium m-0 p-0">
+                    <Text className="text-[14px] font-semibold m-0 p-0">
                       To/From
                     </Text>
                   </th>
                   <th align="left">
-                    <Text className="text-[14px] font-medium m-0 p-0">
+                    <Text className="text-[14px] font-semibold m-0 p-0">
                       Amount
                     </Text>
                   </th>
@@ -151,7 +153,10 @@ export const TransactionsEmail = ({
 
               <tbody>
                 {transactions?.map((transaction) => (
-                  <tr key={transaction.id}>
+                  <tr
+                    key={transaction.id}
+                    className="border-0 border-b-[1px] border-solid border-[#DCDAD2] h-[45px]"
+                  >
                     <td align="left">
                       <Text className="text-[14px] m-0 p-0 mt-1 pb-1">
                         {format(new Date(transaction.date), "MMM d")}
@@ -161,7 +166,7 @@ export const TransactionsEmail = ({
                       <Link
                         href={`${baseAppUrl}/transactions?id=${transaction.id}`}
                         className={cn(
-                          "text-black",
+                          "text-[#121212]",
                           transaction.amount > 0 && "text-[#00C969]"
                         )}
                       >
@@ -190,23 +195,29 @@ export const TransactionsEmail = ({
 
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                className="bg-[#000000] rounded-xl text-white text-[12px] font-semibold no-underline text-center"
+                className="bg-[#000000] rounded-xl text-white text-[12px] font-semibold no-underline text-center px-6 py-3"
                 href={`${baseAppUrl}/transactions?from_id=${
                   transactions.at(0)?.id
                 }`}
               >
                 View transactions
               </Button>
             </Section>
-            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
-            <Text className="text-[#666666] text-[12px] leading-[24px]">
+            <Hr className="border border-solid border-[#DCDAD2] my-[45px] mx-0 w-full" />
+            <Text className="text-[#878787] text-[12px] leading-[24px]">
               Nam imperdiet congue volutpat. Nulla quis facilisis lacus. Vivamus
               convallis sit amet lectus eget tincidunt. Vestibulum vehicula
               rutrum nisl, sed faucibus neque. Donec lacus mi, rhoncus at dictum
               eget, pulvinar at metus. Donec cursus tellus erat, a hendrerit
               elit rutrum ut. Fusce quis tristique ligula. Etiam sit amet enim
               vitae mauris auctor blandit id et nibh.
             </Text>
+
+            <Link href={`${baseAppUrl}/settings/notifications`}>
+              <Text className="text-[#878787] text-[12px] underline">
+                Notification preferences
+              </Text>
+            </Link>
           </Container>
         </Body>
       </Tailwind>