Email invite design improvements (#8681)

closes #7140 

![image](https://github.com/user-attachments/assets/d3a31a49-8b37-4456-98e3-a16fbccb3786)
This commit is contained in:
nitin 2024-11-24 22:09:08 +05:30 committed by GitHub
parent bad7ad464b
commit 00791c3cd5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 31 additions and 31 deletions

View File

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

View File

@ -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>
);
};

View File

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

View File

@ -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>
);

View File

@ -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>

View File

@ -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
join a workspace called <b>{workspace.name}</b>
<Link
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>