diff --git a/packages/twenty-server/src/emails/common-style.ts b/packages/twenty-server/src/emails/common-style.ts index c225274fea1..6a80ebeddb0 100644 --- a/packages/twenty-server/src/emails/common-style.ts +++ b/packages/twenty-server/src/emails/common-style.ts @@ -1,5 +1,3 @@ -import { rgba } from 'twenty-front/src/modules/ui/theme/constants/colors'; - const grayScale = { gray100: '#000000', gray90: '#141414', @@ -33,14 +31,18 @@ export const emailTheme = { regular: 400, bold: 600, }, + size: { + md: '13px', + lg: '16px', + }, }, background: { colors: { highlight: grayScale.gray15 }, radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, transparent: { - medium: rgba(grayScale.gray80, 0.08), - light: rgba(grayScale.gray0, 0.04), + medium: 'rgba(0, 0, 0, 0.08)', + light: 'rgba(0, 0, 0, 0.04)', }, }, }; diff --git a/packages/twenty-server/src/emails/components/BaseHead.tsx b/packages/twenty-server/src/emails/components/BaseHead.tsx index 020083bfbd4..5f18dfb6cfb 100644 --- a/packages/twenty-server/src/emails/components/BaseHead.tsx +++ b/packages/twenty-server/src/emails/components/BaseHead.tsx @@ -1,6 +1,8 @@ import { Font, Head } from '@react-email/components'; import * as React from 'react'; +import { emailTheme } from 'src/emails/common-style'; + export const BaseHead = () => { return ( @@ -12,8 +14,9 @@ export const BaseHead = () => { url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap', format: 'woff2', }} - fontWeight={400} fontStyle="normal" + fontWeight={emailTheme.font.weight.regular} + fontColor={emailTheme.font.colors.primary} /> ); diff --git a/packages/twenty-server/src/emails/components/CallToAction.tsx b/packages/twenty-server/src/emails/components/CallToAction.tsx index 28145902646..46c20753491 100644 --- a/packages/twenty-server/src/emails/components/CallToAction.tsx +++ b/packages/twenty-server/src/emails/components/CallToAction.tsx @@ -10,7 +10,7 @@ const callToActionStyle = { 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: '13px', + fontSize: emailTheme.font.size.md, fontWeight: emailTheme.font.weight.bold, }; diff --git a/packages/twenty-server/src/emails/components/HighlightedText.tsx b/packages/twenty-server/src/emails/components/HighlightedText.tsx index 7629f3b2651..75010e017c1 100644 --- a/packages/twenty-server/src/emails/components/HighlightedText.tsx +++ b/packages/twenty-server/src/emails/components/HighlightedText.tsx @@ -14,7 +14,7 @@ const highlightedStyle = { background: emailTheme.background.colors.highlight, padding: '4px 8px', margin: 0, - fontSize: '16px', + fontSize: emailTheme.font.size.lg, fontWeight: emailTheme.font.weight.bold, color: emailTheme.font.colors.highlighted, }; diff --git a/packages/twenty-server/src/emails/components/MainText.tsx b/packages/twenty-server/src/emails/components/MainText.tsx index d319b3f5d3d..8412c2bd94f 100644 --- a/packages/twenty-server/src/emails/components/MainText.tsx +++ b/packages/twenty-server/src/emails/components/MainText.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { emailTheme } from 'src/emails/common-style'; const mainTextStyle = { - fontSize: '13px', + fontSize: emailTheme.font.size.md, fontWeight: emailTheme.font.weight.regular, - color: emailTheme.font.colors.inverted, + color: emailTheme.font.colors.primary, }; export const MainText = ({ children }) => {