Small style improvements to the emails

triggerdotdev · May 9, 2024 · a823421 · a823421
1 parent 0e919f5
commit a823421
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 14 deletions.
diff --git a/apps/webapp/public/emails/logo-mono.png b/apps/webapp/public/emails/logo-mono.png
diff --git a/packages/emails/emails/alert-attempt-failure.tsx b/packages/emails/emails/alert-attempt-failure.tsx
@@ -72,13 +72,13 @@ export default function Email(props: z.infer<typeof AlertAttemptEmailSchema>) {
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "32px",
+              marginBottom: "50px",
             }}
           >
             Investigate this error
           </Link>
 
-          <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
+          <Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
           <Footer />
         </Container>
       </Body>

diff --git a/packages/emails/emails/components/Footer.tsx b/packages/emails/emails/components/Footer.tsx
@@ -7,10 +7,10 @@ export function Footer() {
     <>
       <Hr style={hr} />
       <Text style={footer}>
+        ©Trigger.dev, 1111B S Governors Ave STE 6433, Dover, DE 19904 |{" "}
         <Link style={footerAnchor} href="https://trigger.dev/">
           Trigger.dev
         </Link>
-        . ©Trigger.dev, 1111B S Governors Ave STE 6433, Dover, DE 19904
       </Text>
     </>
   );

diff --git a/packages/emails/emails/components/styles.ts b/packages/emails/emails/components/styles.ts
@@ -104,7 +104,7 @@ export const footerItalic = {
 };
 
 export const footerAnchor = {
-  color: "#826DFF",
+  color: "#878C99",
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
   fontSize: "12px",

diff --git a/packages/emails/emails/deployment-failure.tsx b/packages/emails/emails/deployment-failure.tsx
@@ -65,13 +65,13 @@ export default function Email(props: z.infer<typeof AlertDeploymentFailureEmailS
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "32px",
+              marginBottom: "50px",
             }}
           >
             Investigate this error
           </Link>
 
-          <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
+          <Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
           <Footer />
         </Container>
       </Body>

diff --git a/packages/emails/emails/deployment-success.tsx b/packages/emails/emails/deployment-success.tsx
@@ -45,13 +45,13 @@ export default function Email(props: z.infer<typeof AlertDeploymentSuccessEmailS
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "32px",
+              marginBottom: "50px",
             }}
           >
             View Deployment
           </Link>
 
-          <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
+          <Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
           <Footer />
         </Container>
       </Body>

diff --git a/packages/emails/emails/invite.tsx b/packages/emails/emails/invite.tsx
@@ -34,13 +34,13 @@ export default function Email({
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "32px",
+              marginBottom: "50px",
             }}
           >
             Click here to view the invitation
           </Link>
 
-          <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
+          <Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
           <Footer />
         </Container>
       </Body>

diff --git a/packages/emails/emails/magic-link.tsx b/packages/emails/emails/magic-link.tsx
@@ -1,7 +1,7 @@
 import { Body, Container, Head, Html, Link, Preview, Text } from "@react-email/components";
 import { Footer } from "./components/Footer";
 import { Image } from "./components/Image";
-import { anchor, container, h1, main, paragraph } from "./components/styles";
+import { anchor, container, h1, main, paragraphLight } from "./components/styles";
 
 export default function Email({ magicLink }: { magicLink: string }) {
   return (
@@ -17,15 +17,20 @@ export default function Email({ magicLink }: { magicLink: string }) {
             style={{
               ...anchor,
               display: "block",
-              marginBottom: "32px",
             }}
           >
             Click here to log in with this magic link
           </Link>
-          <Text style={paragraph}>
+          <Text
+            style={{
+              ...paragraphLight,
+              display: "block",
+              marginBottom: "50px",
+            }}
+          >
             If you didn&apos;t try to log in, you can safely ignore this email.
           </Text>
-          <Image path="/emails/logo-mono.png" width="156" height="28" alt="Trigger.dev" />
+          <Image path="/emails/logo-mono.png" width="120" height="22" alt="Trigger.dev" />
           <Footer />
         </Container>
       </Body>