Email invite design improvements (#8681)

closes #7140 

![image](https://github.com/user-attachments/assets/d3a31a49-8b37-4456-98e3-a16fbccb3786)

packages/twenty-emails/src/components/HighlightedContainer.tsx

@@ -1,25 +1,15 @@
+import { Column, Container, Row } from '@react-email/components';
 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 = ({
@@ -27,7 +17,11 @@ export const HighlightedContainer = ({
 }: HighlightedContainerProps) => {
   return (
     <Container style={highlightedContainerStyle}>
-      <div style={divStyle}>{children}</div>
+      {React.Children.map(children, (child) => (
+        <Row>
+          <Column align="center">{child}</Column>
+        </Row>
+      ))}
     </Container>
   );
 };