Update email template

2024-01-10 15:29:32 +01:00
parent e39aee06e1
commit c745260020
6 changed files with 62 additions and 7 deletions
@@ -1,27 +1,34 @@
 import * as React from 'react';
 import { Html } from '@react-email/html';
-import { Text } from '@react-email/text';
 import { Container, Heading } from '@react-email/components';

 import { BaseHead } from 'src/workspace/emails/components/BaseHead';
 import { HighlightedText } from 'src/workspace/emails/components/HighlightedText';
 import { CallToAction } from 'src/workspace/emails/components/CallToAction';
+import { MainText } from 'src/workspace/emails/components/MainText';
+import { Logo } from 'src/workspace/emails/components/Logo';

-export const CleanInactiveWorkspaceEmail = ({ title, daysLeft, userName }) => {
+export const CleanInactiveWorkspaceEmail = ({
+  title,
+  daysLeft,
+  userName,
+  workspaceDisplayName,
+}) => {
  const daysLeftInfo = daysLeft > 1 ? `${daysLeft} days left` : `One day left`;

  return (
    <Html lang="en">
      <BaseHead />
      <Container width={290}>
+        <Logo />
        <Heading as="h1">{title}</Heading>
        <HighlightedText value={daysLeftInfo} />
-        <Text>
+        <MainText>
          Hello {userName},
          <br />
          <br />
-          It appears that there has been a period of inactivity on your Stripe
-          workspace.
+          It appears that there has been a period of inactivity on your{' '}
+          <b>{workspaceDisplayName}</b> workspace.
          <br />
          <br />
          Please note that the account is due for deactivation soon, and all
@@ -30,7 +37,7 @@ export const CleanInactiveWorkspaceEmail = ({ title, daysLeft, userName }) => {
          <br />
          No need for concern, though! Simply log in to your workspace within
          the next 10 days to retain access.
-        </Text>
+        </MainText>
        <CallToAction href="https://app.twenty.com" value="Connect to Twenty" />
      </Container>
    </Html>
@@ -1,6 +1,23 @@
 import { Button } from '@react-email/button';
 import * as React from 'react';

+const callToActionStyle = {
+  display: 'flex',
+  padding: '8px 32px',
+  borderRadius: '8px',
+  border: '1px solid var(--Transparent-Light, rgba(0, 0, 0, 0.04))',
+  background: 'radial-gradient(50% 62.62% at 50% 0%, #505050 0%, #333 100%)',
+  boxShadow:
+    '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
+  color: '#fff',
+  fontSize: '13px',
+  fontWeight: 600,
+};
+
 export const CallToAction = ({ value, href }) => {
-  return <Button href={href}>{value}</Button>;
+  return (
+    <Button href={href} style={callToActionStyle}>
+      {value}
+    </Button>
+  );
 };
@@ -11,6 +11,7 @@ const highlightedStyle = {
  borderRadius: '4px',
  background: '#f1f1f1',
  padding: '4px 8px',
+  margin: 0,
  fontSize: '16px',
  fontWeight: 600,
  color: '#333',
@@ -0,0 +1,17 @@
+import { Img } from '@react-email/components';
+
+const logoStyle = {
+  marginBottom: '40px',
+};
+
+export const Logo = () => {
+  return (
+    <Img
+      src="https://docs.twenty.com/img/logo-square-dark.svg"
+      alt="Cat"
+      width="40"
+      height="40"
+      style={logoStyle}
+    />
+  );
+};
@@ -0,0 +1,12 @@
+import { Text } from '@react-email/text';
+import * as React from 'react';
+
+const mainTextStyle = {
+  fontSize: '13px',
+  fontWeight: 400,
+  color: '#666',
+};
+
+export const MainText = ({ children }) => {
+  return <Text style={mainTextStyle}>{children}</Text>;
+};
@@ -17,6 +17,7 @@ export class TotoCommand extends CommandRunner {
      title: 'Inactive Workspace 😴',
      daysLeft: 10,
      userName: 'Martin Müller',
+      workspaceDisplayName: 'Stripe',
    };
    const html = render(CleanInactiveWorkspaceEmail(emailData), {
      pretty: true,