Add email theme 2

2024-01-10 17:27:56 +01:00
parent 6c6471273a
commit 53d469fd37
5 changed files with 14 additions and 9 deletions
@@ -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)',
    },
  },
 };
@@ -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 (
    <Head>
@@ -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}
      />
    </Head>
  );
@@ -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,
 };

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