From 00791c3cd554f74aa53e42179ce33077e379b557 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:09:08 +0530
Subject: [PATCH] Email invite design improvements (#8681)
closes #7140
---
packages/twenty-emails/src/common-style.ts | 5 +++++
.../src/components/HighlightedContainer.tsx | 18 ++++++------------
.../src/components/HighlightedText.tsx | 12 ++----------
packages/twenty-emails/src/components/Link.tsx | 14 ++++++++++----
.../src/components/WhatIsTwenty.tsx | 4 +---
.../src/emails/send-invite-link.email.tsx | 9 +++++++--
6 files changed, 31 insertions(+), 31 deletions(-)
diff --git a/packages/twenty-emails/src/common-style.ts b/packages/twenty-emails/src/common-style.ts
index aa1419666..9a66772c0 100644
--- a/packages/twenty-emails/src/common-style.ts
+++ b/packages/twenty-emails/src/common-style.ts
@@ -22,6 +22,10 @@ const grayScale = {
gray0: '#ffffff',
};
+const colors = {
+ blue40: '#5e90f2',
+};
+
export const emailTheme = {
font: {
colors: {
@@ -29,6 +33,7 @@ export const emailTheme = {
primary: grayScale.gray50,
tertiary: grayScale.gray35,
inverted: grayScale.gray0,
+ blue: colors.blue40,
},
family: 'Trebuchet MS', // Google Inter not working, we need to use a web safe font, see https://templates.mailchimp.com/design/typography/
weight: {
diff --git a/packages/twenty-emails/src/components/HighlightedContainer.tsx b/packages/twenty-emails/src/components/HighlightedContainer.tsx
index c9a40dac7..9dd674a0b 100644
--- a/packages/twenty-emails/src/components/HighlightedContainer.tsx
+++ b/packages/twenty-emails/src/components/HighlightedContainer.tsx
@@ -1,25 +1,15 @@
+import { Column, Container, Row } from '@react-email/components';
import React, { PropsWithChildren } from 'react';
-import { Container } from '@react-email/components';
import { emailTheme } from 'src/common-style';
type HighlightedContainerProps = PropsWithChildren;
const highlightedContainerStyle = {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
background: emailTheme.background.colors.highlight,
border: `1px solid ${emailTheme.border.color.highlighted}`,
borderRadius: emailTheme.border.radius.md,
padding: '24px 48px',
- gap: '24px',
-};
-
-const divStyle = {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
} as React.CSSProperties;
export const HighlightedContainer = ({
@@ -27,7 +17,11 @@ export const HighlightedContainer = ({
}: HighlightedContainerProps) => {
return (
- {children}
+ {React.Children.map(children, (child) => (
+
+ {child}
+
+ ))}
);
};
diff --git a/packages/twenty-emails/src/components/HighlightedText.tsx b/packages/twenty-emails/src/components/HighlightedText.tsx
index b60444158..a884b0faf 100644
--- a/packages/twenty-emails/src/components/HighlightedText.tsx
+++ b/packages/twenty-emails/src/components/HighlightedText.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
import { Text } from '@react-email/text';
+import { ReactNode } from 'react';
import { emailTheme } from 'src/common-style';
@@ -12,19 +12,11 @@ const highlightedStyle = {
color: emailTheme.font.colors.highlighted,
};
-const divStyle = {
- display: 'flex',
-};
-
type HighlightedTextProps = {
value: ReactNode;
centered?: boolean;
};
export const HighlightedText = ({ value }: HighlightedTextProps) => {
- return (
-
- {value}
-
- );
+ return {value};
};
diff --git a/packages/twenty-emails/src/components/Link.tsx b/packages/twenty-emails/src/components/Link.tsx
index 30fe5638e..40ab75885 100644
--- a/packages/twenty-emails/src/components/Link.tsx
+++ b/packages/twenty-emails/src/components/Link.tsx
@@ -1,21 +1,27 @@
-import { ReactNode } from 'react';
import { Link as EmailLink } from '@react-email/components';
+import { ReactNode } from 'react';
import { emailTheme } from 'src/common-style';
const linkStyle = {
- color: emailTheme.font.colors.tertiary,
textDecoration: 'underline',
};
type LinkProps = {
value: ReactNode;
href: string;
+ color?: string;
};
-export const Link = ({ value, href }: LinkProps) => {
+export const Link = ({ value, href, color }: LinkProps) => {
return (
-
+
{value}
);
diff --git a/packages/twenty-emails/src/components/WhatIsTwenty.tsx b/packages/twenty-emails/src/components/WhatIsTwenty.tsx
index 3a380385e..9b3913f78 100644
--- a/packages/twenty-emails/src/components/WhatIsTwenty.tsx
+++ b/packages/twenty-emails/src/components/WhatIsTwenty.tsx
@@ -1,16 +1,14 @@
import { Column, Row } from '@react-email/components';
-
import { Link } from 'src/components/Link';
import { MainText } from 'src/components/MainText';
import { ShadowText } from 'src/components/ShadowText';
import { SubTitle } from 'src/components/SubTitle';
-
export const WhatIsTwenty = () => {
return (
<>
- A software to help businesses manage their customer data and
+ It's a CRM, a software to help businesses manage their customer data and
relationships efficiently.
diff --git a/packages/twenty-emails/src/emails/send-invite-link.email.tsx b/packages/twenty-emails/src/emails/send-invite-link.email.tsx
index e1c3e70ca..97d519e88 100644
--- a/packages/twenty-emails/src/emails/send-invite-link.email.tsx
+++ b/packages/twenty-emails/src/emails/send-invite-link.email.tsx
@@ -1,4 +1,5 @@
import { Img } from '@react-email/components';
+import { emailTheme } from 'src/common-style';
import { BaseEmail } from 'src/components/BaseEmail';
import { CallToAction } from 'src/components/CallToAction';
@@ -33,8 +34,12 @@ export const SendInviteLinkEmail = ({
{capitalize(sender.firstName)} (
- ) has invited you to
- join a workspace called {workspace.name}
+
+ ) has invited you to join a workspace called {workspace.name}