5078 ability to invite team members (#5750)

## Added features - update team member setting page - add a section to send invitation by email - add a new invitation email - update email font to 'Trebuchet MS' as Google Inter font is not working, we need to use a web safe font https://templates.mailchimp.com/design/typography/ ## Demo https://github.com/twentyhq/twenty/assets/29927851/c731d883-1599-4281-87e3-0671f36994ae ## Invitation Email ![image](https://github.com/twentyhq/twenty/assets/29927851/d569fc64-fa0c-4769-a3dd-1193a12b495c)
2024-06-05 16:35:14 +02:00
parent 3c4b497846
commit e9d3ed99ca
28 changed files with 608 additions and 39 deletions
--- a/packages/twenty-emails/src/components/BaseHead.tsx
+++ b/packages/twenty-emails/src/components/BaseHead.tsx
@ -7,12 +7,8 @@ export const BaseHead = () => {
    <Head>
      <title>Twenty email</title>
      <Font
-        fontFamily="Inter"
+        fontFamily={emailTheme.font.family}
        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}
      />
--- a/packages/twenty-emails/src/components/CallToAction.tsx
+++ b/packages/twenty-emails/src/components/CallToAction.tsx
@ -6,7 +6,7 @@ import { emailTheme } from 'src/common-style';
 const callToActionStyle = {
  display: 'flex',
  padding: '8px 32px',
-  borderRadius: '8px',
+  borderRadius: emailTheme.border.radius.md,
  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}`,
--- a/packages/twenty-emails/src/components/HighlightedContainer.tsx
+++ b/packages/twenty-emails/src/components/HighlightedContainer.tsx
@ -0,0 +1,33 @@
+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 = ({
+  children,
+}: HighlightedContainerProps) => {
+  return (
+    <Container style={highlightedContainerStyle}>
+      <div style={divStyle}>{children}</div>
+    </Container>
+  );
+};
--- a/packages/twenty-emails/src/components/HighlightedText.tsx
+++ b/packages/twenty-emails/src/components/HighlightedText.tsx
@ -1,34 +1,30 @@
-import { ReactNode } from 'react';
-import { Column } from '@react-email/components';
-import { Row } from '@react-email/row';
+import React, { ReactNode } from 'react';
 import { Text } from '@react-email/text';

 import { emailTheme } from 'src/common-style';

-const rowStyle = {
-  display: 'flex',
-};
-
 const highlightedStyle = {
-  borderRadius: '4px',
+  borderRadius: emailTheme.border.radius.sm,
  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,
 };

+const divStyle = {
+  display: 'flex',
+};
+
 type HighlightedTextProps = {
  value: ReactNode;
+  centered?: boolean;
 };

 export const HighlightedText = ({ value }: HighlightedTextProps) => {
  return (
-    <Row style={rowStyle}>
-      <Column>
-        <Text style={highlightedStyle}>{value}</Text>
-      </Column>
-    </Row>
+    <div style={divStyle}>
+      <Text style={highlightedStyle}>{value}</Text>
+    </div>
  );
 };
--- a/packages/twenty-emails/src/components/MainText.tsx
+++ b/packages/twenty-emails/src/components/MainText.tsx
@ -4,9 +4,12 @@ import { Text } from '@react-email/text';
 import { emailTheme } from 'src/common-style';

 const mainTextStyle = {
+  fontFamily: emailTheme.font.family,
  fontSize: emailTheme.font.size.md,
  fontWeight: emailTheme.font.weight.regular,
  color: emailTheme.font.colors.primary,
+  margin: '0 0 12px 0',
+  lineHeight: emailTheme.font.lineHeight,
 };

 export const MainText = ({ children }: MainTextProps) => {
--- a/packages/twenty-emails/src/components/ShadowText.tsx
+++ b/packages/twenty-emails/src/components/ShadowText.tsx
@ -0,0 +1,16 @@
+import { PropsWithChildren as ShadowTextProps } from 'react';
+import { Text } from '@react-email/text';
+
+import { emailTheme } from 'src/common-style';
+
+const shadowTextStyle = {
+  fontSize: emailTheme.font.size.sm,
+  fontWeight: emailTheme.font.weight.regular,
+  color: emailTheme.font.colors.tertiary,
+  margin: '0 0 12px 0',
+  lineHeight: emailTheme.font.lineHeight,
+};
+
+export const ShadowText = ({ children }: ShadowTextProps) => {
+  return <Text style={shadowTextStyle}>{children}</Text>;
+};
--- a/packages/twenty-emails/src/components/SubTitle.tsx
+++ b/packages/twenty-emails/src/components/SubTitle.tsx
@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Heading } from '@react-email/components';
+
+import { emailTheme } from 'src/common-style';
+
+type SubTitleProps = {
+  value: ReactNode;
+};
+
+const subTitleStyle = {
+  fontFamily: emailTheme.font.family,
+  fontSize: emailTheme.font.size.lg,
+  fontWeight: emailTheme.font.weight.bold,
+  color: emailTheme.font.colors.highlighted,
+};
+
+export const SubTitle = ({ value }: SubTitleProps) => {
+  return (
+    <Heading style={subTitleStyle} as="h3">
+      {value}
+    </Heading>
+  );
+};
--- a/packages/twenty-emails/src/components/Title.tsx
+++ b/packages/twenty-emails/src/components/Title.tsx
@ -1,10 +1,23 @@
 import { ReactNode } from 'react';
 import { Heading } from '@react-email/components';

+import { emailTheme } from 'src/common-style';
+
 type TitleProps = {
  value: ReactNode;
 };

-export const Title = ({ value }: TitleProps) => {
-  return <Heading as="h1">{value}</Heading>;
+const titleStyle = {
+  fontFamily: emailTheme.font.family,
+  fontSize: emailTheme.font.size.xl,
+  fontWeight: emailTheme.font.weight.bold,
+  color: emailTheme.font.colors.highlighted,
+};
+
+export const Title = ({ value }: TitleProps) => {
+  return (
+    <Heading style={titleStyle} as="h1">
+      {value}
+    </Heading>
+  );
 };
--- a/packages/twenty-emails/src/components/WhatIsTwenty.tsx
+++ b/packages/twenty-emails/src/components/WhatIsTwenty.tsx
@ -0,0 +1,47 @@
+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
+        relationships efficiently.
+      </MainText>
+      <Row>
+        <Column>
+          <ShadowText>
+            <Link href="https://twenty.com/" value="Website" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://github.com/twentyhq/twenty" value="Github" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://twenty.com/user-guide" value="User guide" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://docs.twenty.com/" value="Developers" />
+          </ShadowText>
+        </Column>
+      </Row>
+      <ShadowText>
+        Twenty.com Public Benefit Corporation
+        <br />
+        2261 Market Street #5275
+        <br />
+        San Francisco, CA 94114
+      </ShadowText>
+    </>
+  );
+};