diff --git a/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx b/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx
index a323fe00dd0..68aa4e935a3 100644
--- a/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx
+++ b/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx
@@ -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 (
+ {title}
-
+
Hello {userName},
- 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{' '}
+ {workspaceDisplayName} workspace.
Please note that the account is due for deactivation soon, and all
@@ -30,7 +37,7 @@ export const CleanInactiveWorkspaceEmail = ({ title, daysLeft, userName }) => {
No need for concern, though! Simply log in to your workspace within
the next 10 days to retain access.
-
+
diff --git a/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx b/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx
index d77646f2f5e..490eff28ee8 100644
--- a/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx
+++ b/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx
@@ -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 ;
+ return (
+
+ );
};
diff --git a/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx b/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx
index 79019c83b3e..e2b5a1b8928 100644
--- a/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx
+++ b/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx
@@ -11,6 +11,7 @@ const highlightedStyle = {
borderRadius: '4px',
background: '#f1f1f1',
padding: '4px 8px',
+ margin: 0,
fontSize: '16px',
fontWeight: 600,
color: '#333',
diff --git a/packages/twenty-server/src/workspace/emails/components/Logo.tsx b/packages/twenty-server/src/workspace/emails/components/Logo.tsx
new file mode 100644
index 00000000000..7c0888d3bc3
--- /dev/null
+++ b/packages/twenty-server/src/workspace/emails/components/Logo.tsx
@@ -0,0 +1,17 @@
+import { Img } from '@react-email/components';
+
+const logoStyle = {
+ marginBottom: '40px',
+};
+
+export const Logo = () => {
+ return (
+
+ );
+};
diff --git a/packages/twenty-server/src/workspace/emails/components/MainText.tsx b/packages/twenty-server/src/workspace/emails/components/MainText.tsx
new file mode 100644
index 00000000000..c8565bd124a
--- /dev/null
+++ b/packages/twenty-server/src/workspace/emails/components/MainText.tsx
@@ -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 {children};
+};
diff --git a/packages/twenty-server/src/workspace/toto.command.ts b/packages/twenty-server/src/workspace/toto.command.ts
index 67fe92e3a36..ef3827d2b01 100644
--- a/packages/twenty-server/src/workspace/toto.command.ts
+++ b/packages/twenty-server/src/workspace/toto.command.ts
@@ -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,
+ );
+};
diff --git a/packages/twenty-server/src/workspace/emails/components/MainText.tsx b/packages/twenty-server/src/workspace/emails/components/MainText.tsx
new file mode 100644
index 00000000000..c8565bd124a
--- /dev/null
+++ b/packages/twenty-server/src/workspace/emails/components/MainText.tsx
@@ -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