Email invite design improvements (#8681)

closes #7140 

![image](https://github.com/user-attachments/assets/d3a31a49-8b37-4456-98e3-a16fbccb3786)

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: {

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 (
     <Container style={highlightedContainerStyle}>
-      <div style={divStyle}>{children}</div>
+      {React.Children.map(children, (child) => (
+        <Row>
+          <Column align="center">{child}</Column>
+        </Row>
+      ))}
     </Container>
   );
 };

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 (
+  return <Text style={highlightedStyle}>{value}</Text>;
-    <div style={divStyle}>
-      <Text style={highlightedStyle}>{value}</Text>
-    </div>
-  );
 };

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 (
-    <EmailLink href={href} style={linkStyle}>
+    <EmailLink
+      href={href}
+      style={{
+        ...linkStyle,
+        color: color ?? emailTheme.font.colors.tertiary,
+      }}
+    >
       {value}
     </EmailLink>
   );

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 (
     <>
       <SubTitle value="What is Twenty?" />
       <MainText>
-        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.
       </MainText>
       <Row>

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 = ({
       <Title value="Join your team on Twenty" />
       <MainText>
         {capitalize(sender.firstName)} (
-        <Link href={sender.email} value={sender.email} />) has invited you to
+        <Link
-        join a workspace called <b>{workspace.name}</b>
+          href={sender.email}
+          value={sender.email}
+          color={emailTheme.font.colors.blue}
+        />
+        ) has invited you to join a workspace called <b>{workspace.name}</b>
         <br />
       </MainText>
       <HighlightedContainer>