admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move emails to dedicated package (#3542)

Browse Source 
* Add new package

* Add twenty-emails package

* Use generated files from twenty-emails in twenty-server

* Fix deleted file

* Import emails templates properly
This commit is contained in:
martmull
2024-01-22 16:21:56 +01:00
committed by GitHub
parent e45a825a3a
commit e358d677f9
20 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-emails/src/components/BaseEmail.tsx Normal file
View File

@ -0,0 +1,16 @@
import * as React from 'react';
import { Container, Html } from '@react-email/components';
import { BaseHead } from 'src/components/BaseHead';
import { Logo } from 'src/components/Logo';
export const BaseEmail = ({ children }) => {
return (
<Html lang="en">
<BaseHead />
<Container width={290}>
<Logo />
{children}
</Container>
</Html>
);
};

21
packages/twenty-emails/src/components/BaseHead.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from 'react';
import { Font, Head } from '@react-email/components';
import { emailTheme } from 'src/common-style';
export const BaseHead = () => {
return (
<Head>
<title>Twenty email</title>
<Font
fontFamily="Inter"
fallbackFontFamily="sans-serif"
webFont={{
url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap',
format: 'woff2',
}}
fontStyle="normal"
fontWeight={emailTheme.font.weight.regular}
/>
</Head>
);
};

22
packages/twenty-emails/src/components/CallToAction.tsx Normal file
View File

@ -0,0 +1,22 @@
import * as React from 'react';
import { Button } from '@react-email/button';
import { emailTheme } from 'src/common-style';
const callToActionStyle = {
display: 'flex',
padding: '8px 32px',
borderRadius: '8px',
border: `1px solid ${emailTheme.background.transparent.light}`,
background: emailTheme.background.radialGradient,
boxShadow: `0px 2px 4px 0px ${emailTheme.background.transparent.light}, 0px 0px 4px 0px ${emailTheme.background.transparent.medium}`,
color: emailTheme.font.colors.inverted,
fontSize: emailTheme.font.size.md,
fontWeight: emailTheme.font.weight.bold,
};
export const CallToAction = ({ value, href }) => {
return (
<Button href={href} style={callToActionStyle}>
{value}
</Button>
);
};

29
packages/twenty-emails/src/components/HighlightedText.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from 'react';
import { Column } from '@react-email/components';
import { Row } from '@react-email/row';
import { Text } from '@react-email/text';
import { emailTheme } from 'src/common-style';
const rowStyle = {
display: 'flex',
};
const highlightedStyle = {
borderRadius: '4px',
background: emailTheme.background.colors.highlight,
padding: '4px 8px',
margin: 0,
fontSize: emailTheme.font.size.lg,
fontWeight: emailTheme.font.weight.bold,
color: emailTheme.font.colors.highlighted,
};
export const HighlightedText = ({ value }) => {
return (
<Row style={rowStyle}>
<Column>
<Text style={highlightedStyle}>{value}</Text>
</Column>
</Row>
);
};

17
packages/twenty-emails/src/components/Logo.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Img } from '@react-email/components';
const logoStyle = {
marginBottom: '40px',
};
export const Logo = () => {
return (
<Img
src="https://app.twenty.com/icons/windows11/Square150x150Logo.scale-100.png"
alt="Twenty logo"
width="40"
height="40"
style={logoStyle}
/>
);
};

13
packages/twenty-emails/src/components/MainText.tsx Normal file
View File

@ -0,0 +1,13 @@
import * as React from 'react';
import { Text } from '@react-email/text';
import { emailTheme } from 'src/common-style';
const mainTextStyle = {
fontSize: emailTheme.font.size.md,
fontWeight: emailTheme.font.weight.regular,
color: emailTheme.font.colors.primary,
};
export const MainText = ({ children }) => {
return <Text style={mainTextStyle}>{children}</Text>;
};

6
packages/twenty-emails/src/components/Title.tsx Normal file
View File

@ -0,0 +1,6 @@
import { Heading } from '@react-email/components';
import * as React from 'react';
export const Title = ({ value }) => {
return <Heading as="h1">{value}</Heading>;
};