feat: add Settings/Accounts/Emails Emails Sync section accounts list (#2957)

Closes #2888

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none" viewBox="0 0 14 12">
+  <path fill="#4285F4" d="M.955 11.252h2.227v-5.41L0 3.456v6.841c0 .528.428.954.955.954Z"/>
+  <path fill="#34A853" d="M10.818 11.252h2.227a.954.954 0 0 0 .955-.955V3.456l-3.182 2.386"/>
+  <path fill="#FBBC04" d="M10.818 1.706v4.136L14 3.456V2.183c0-1.18-1.348-1.853-2.291-1.145"/>
+  <path fill="#EA4335" d="M3.182 5.842V1.706L7 4.57l3.818-2.864v4.136L7 8.706"/>
+  <path fill="#C5221F" d="M0 2.183v1.273l3.182 2.386V1.706l-.891-.668C1.346.33 0 1.003 0 2.183Z"/>
+</svg>

packages/twenty-front/src/modules/ui/display/icon/assets/google.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
+  <g clip-path="url(#a)">
+    <path fill="#4285F4" d="M7 5.727v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107l2.272 1.762c1.323-1.221 2.087-3.016 2.087-5.148 0-.496-.045-.973-.127-1.432H7Z"/>
+    <path fill="#34A853" d="m3.077 8.332-.512.393L.75 10.137C1.903 12.422 4.263 14 7 14c1.89 0 3.474-.624 4.633-1.693L9.36 10.544c-.624.42-1.42.675-2.361.675-1.82 0-3.366-1.228-3.92-2.883l-.003-.004Z"/>
+    <path fill="#FBBC05" d="M.75 3.863A6.914 6.914 0 0 0 0 7c0 1.133.274 2.196.75 3.137 0 .007 2.33-1.807 2.33-1.807A4.195 4.195 0 0 1 2.857 7c0-.465.083-.91.223-1.33L.75 3.863Z"/>
+    <path fill="#EA4335" d="M7 2.787c1.03 0 1.947.357 2.68 1.044l2.004-2.005C10.468.694 8.89 0 7 0A6.988 6.988 0 0 0 .75 3.863L3.08 5.67C3.634 4.015 5.18 2.787 7 2.787Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h13.72v14H0z"/>
+    </clipPath>
+  </defs>
+</svg>

packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconGmailRaw from '../assets/gmail.svg?react';
+
+interface IconGmailProps {
+  size?: number;
+}
+
+export const IconGmail = (props: IconGmailProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGmailRaw height={size} width={size} />;
+};

packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx

@@ -1,12 +1,12 @@
 import { useTheme } from '@emotion/react';
 
-import IconGoogleRaw from '../assets/google-icon.svg?react';
+import IconGoogleRaw from '../assets/google.svg?react';
 
 interface IconGoogleProps {
   size?: number;
 }
 
-export const IconGoogle = (props: IconGoogleProps): JSX.Element => {
+export const IconGoogle = (props: IconGoogleProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 

packages/twenty-front/src/modules/ui/display/status/components/Status.tsx

@@ -5,6 +5,7 @@ import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;
+  weight: 'regular' | 'medium';
 }>`
   align-items: center;
   background: ${({ color, theme }) => theme.tag.background[color]};
@@ -13,7 +14,7 @@ const StyledStatus = styled.h3<{
   display: inline-flex;
   font-size: ${({ theme }) => theme.font.size.md};
   font-style: normal;
-  font-weight: ${({ theme }) => theme.font.weight.regular};
+  font-weight: ${({ theme, weight }) => theme.font.weight[weight]};
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme }) => theme.spacing(5)};
   margin: 0;
@@ -42,13 +43,21 @@ type StatusProps = {
   color: ThemeColor;
   text: string;
   onClick?: () => void;
+  weight?: 'regular' | 'medium';
 };
 
-export const Status = ({ className, color, text, onClick }: StatusProps) => (
+export const Status = ({
+  className,
+  color,
+  text,
+  onClick,
+  weight = 'regular',
+}: StatusProps) => (
   <StyledStatus
     className={className}
     color={themeColorSchema.catch('gray').parse(color)}
     onClick={onClick}
+    weight={weight}
   >
     <StyledContent>{text}</StyledContent>
   </StyledStatus>

packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx

@@ -11,8 +11,9 @@ const meta: Meta<typeof Card> = {
   title: 'UI/Layout/Card/Card',
   component: Card,
   decorators: [ComponentDecorator],
-  render: () => (
-    <Card>
+  render: (args) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Card {...args}>
       <CardHeader>Lorem ipsum</CardHeader>
       <CardContent>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa