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)

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -34,12 +34,17 @@ const StyledInputContainer = styled.div`
   width: 100%;
 `;
 
-const StyledInput = styled.input<Pick<TextInputV2ComponentProps, 'fullWidth'>>`
+const StyledInput = styled.input<
+  Pick<TextInputV2ComponentProps, 'fullWidth' | 'LeftIcon'>
+>`
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-bottom-left-radius: ${({ theme, LeftIcon }) =>
+    !LeftIcon && theme.border.radius.sm};
   border-right: none;
-  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-left: ${({ LeftIcon }) => LeftIcon && 'none'};
+  border-top-left-radius: ${({ theme, LeftIcon }) =>
+    !LeftIcon && theme.border.radius.sm};
   box-sizing: border-box;
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
@@ -69,6 +74,18 @@ const StyledErrorHelper = styled.div`
   padding: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledLeftIconContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-right: none;
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: center;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 const StyledTrailingIconContainer = styled.div`
   align-items: center;
   background-color: ${({ theme }) => theme.background.transparent.lighter};
@@ -101,6 +118,7 @@ export type TextInputV2ComponentProps = Omit<
   fullWidth?: boolean;
   error?: string;
   RightIcon?: IconComponent;
+  LeftIcon?: IconComponent;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 };
@@ -123,6 +141,7 @@ const TextInputV2Component = (
     disabled,
     tabIndex,
     RightIcon,
+    LeftIcon,
     autoComplete,
   }: TextInputV2ComponentProps,
   // eslint-disable-next-line @nx/workspace-component-props-naming
@@ -143,6 +162,13 @@ const TextInputV2Component = (
     <StyledContainer className={className} fullWidth={fullWidth ?? false}>
       {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
       <StyledInputContainer>
+        {!!LeftIcon && (
+          <StyledLeftIconContainer>
+            <StyledTrailingIcon>
+              <LeftIcon size={theme.icon.size.md} />
+            </StyledTrailingIcon>
+          </StyledLeftIconContainer>
+        )}
         <StyledInput
           autoComplete={autoComplete || 'off'}
           ref={combinedRef}
@@ -154,7 +180,7 @@ const TextInputV2Component = (
             onChange?.(event.target.value);
           }}
           onKeyDown={onKeyDown}
-          {...{ autoFocus, disabled, placeholder, required, value }}
+          {...{ autoFocus, disabled, placeholder, required, value, LeftIcon }}
         />
         <StyledTrailingIconContainer>
           {error && (