diff --git a/packages/twenty-front/src/modules/accounts/types/Account.ts b/packages/twenty-front/src/modules/accounts/types/Account.ts
index 2d40aeb64..e432b12c3 100644
--- a/packages/twenty-front/src/modules/accounts/types/Account.ts
+++ b/packages/twenty-front/src/modules/accounts/types/Account.ts
@@ -1 +1 @@
-export type Account = { email: string; uuid: string };
+export type Account = { email: string; isSynced?: boolean; uuid: string };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
index 3bd8b146d..c2b5f7fd5 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
@@ -2,8 +2,10 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { Account } from '@/accounts/types/Account';
+import { Account } from '@/accounts/types/account';
+import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { IconAt, IconPlus } from '@/ui/display/icon';
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
@@ -24,6 +26,10 @@ const StyledIconButton = styled(LightIconButton)`
margin-left: auto;
`;
+const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
+ margin-left: auto;
+`;
+
type SettingsAccountsCardProps = {
accounts: Account[];
onAccountRemove?: (uuid: string) => void;
@@ -41,9 +47,12 @@ export const SettingsAccountsCard = ({
{accounts.map((account, index) => (
+ }
divider={index < accounts.length - 1}
- onRemove={onAccountRemove}
/>
))}
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx
new file mode 100644
index 000000000..d9eae1a9e
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx
@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Account } from '@/accounts/types/account';
+import { IconChevronRight } from '@/ui/display/icon';
+import { IconGmail } from '@/ui/display/icon/components/IconGmail';
+import { Status } from '@/ui/display/status/components/Status';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Card } from '@/ui/layout/card/components/Card';
+
+import { SettingsAccountRow } from './SettingsAccountsRow';
+
+const StyledRightContainer = styled.div`
+ align-items: center;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(1)};
+ margin-left: auto;
+`;
+
+type SettingsAccountsEmailsCardProps = {
+ accounts: Account[];
+};
+
+export const SettingsAccountsEmailsCard = ({
+ accounts,
+}: SettingsAccountsEmailsCardProps) => {
+ const navigate = useNavigate();
+
+ return (
+
+ {accounts.map((account, index) => (
+
+ {account.isSynced ? (
+
+ ) : (
+
+ )}
+
+
+ }
+ onClick={() => navigate(`/settings/accounts/emails/${account.uuid}`)}
+ divider={index < accounts.length - 1}
+ />
+ ))}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
index 06e600ce6..d140db076 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
@@ -1,6 +1,8 @@
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
+import { mockedAccounts as accounts } from '~/testing/mock-data/accounts';
+import { SettingsAccountsEmailsCard } from './SettingsAccountsEmailsCard';
import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
export const SettingsAccountsEmailsSyncSection = () => (
@@ -9,6 +11,10 @@ export const SettingsAccountsEmailsSyncSection = () => (
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
-
+ {accounts.length ? (
+
+ ) : (
+
+ )}
);
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
index d33a734d7..716f99e00 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
@@ -1,21 +1,14 @@
-import { useNavigate } from 'react-router-dom';
+import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { Account } from '@/accounts/types/Account';
-import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Account } from '@/accounts/types/account';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
const StyledRow = styled(CardContent)`
align-items: center;
+ cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -24,65 +17,28 @@ const StyledRow = styled(CardContent)`
padding-left: ${({ theme }) => theme.spacing(4)};
`;
-const StyledDropdown = styled(Dropdown)`
- margin-left: auto;
-`;
-
type SettingsAccountRowProps = {
account: Account;
divider?: boolean;
- onRemove?: (uuid: string) => void;
+ LeftIcon: IconComponent;
+ onClick?: () => void;
+ rightComponent: ReactNode;
};
export const SettingsAccountRow = ({
account,
divider,
- onRemove,
+ LeftIcon,
+ onClick,
+ rightComponent,
}: SettingsAccountRowProps) => {
- const dropdownScopeId = `settings-account-row-${account.uuid}`;
-
const theme = useTheme();
- const navigate = useNavigate();
- const { closeDropdown } = useDropdown({ dropdownScopeId });
return (
-
-
+
+
{account.email}
-
-
- }
- dropdownComponents={
-
-
-
-
- }
- />
-
+ {rightComponent}
);
};
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
new file mode 100644
index 000000000..f5919b53b
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@@ -0,0 +1,66 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Account } from '@/accounts/types/account';
+import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+type SettingsAccountsRowDropdownMenuProps = {
+ account: Account;
+ className?: string;
+ onRemove?: (uuid: string) => void;
+};
+
+export const SettingsAccountsRowDropdownMenu = ({
+ account,
+ className,
+ onRemove,
+}: SettingsAccountsRowDropdownMenuProps) => {
+ const dropdownScopeId = `settings-account-row-${account.uuid}`;
+
+ const navigate = useNavigate();
+ const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+ return (
+
+
+ }
+ dropdownComponents={
+
+
+
+
+ }
+ />
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg
new file mode 100644
index 000000000..5f4c0fdc5
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg
deleted file mode 100644
index 5166126ca..000000000
--- a/packages/twenty-front/src/modules/ui/display/icon/assets/google-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg b/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg
new file mode 100644
index 000000000..836f0912f
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx
new file mode 100644
index 000000000..647780e27
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
index 6ab2a51d6..7ab67694f 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
+++ b/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;
diff --git a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx
index 4ba436c92..8d1b3542e 100644
--- a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx
+++ b/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) => (
{text}
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx b/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
index b30740ea4..e47537344 100644
--- a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
@@ -11,8 +11,9 @@ const meta: Meta = {
title: 'UI/Layout/Card/Card',
component: Card,
decorators: [ComponentDecorator],
- render: () => (
-
+ render: (args) => (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa
diff --git a/packages/twenty-front/src/testing/mock-data/accounts.ts b/packages/twenty-front/src/testing/mock-data/accounts.ts
index 908710efc..8c7a73f79 100644
--- a/packages/twenty-front/src/testing/mock-data/accounts.ts
+++ b/packages/twenty-front/src/testing/mock-data/accounts.ts
@@ -1,6 +1,14 @@
-import { Account } from '@/accounts/types/Account';
+import { Account } from '@/accounts/types/account';
export const mockedAccounts: Account[] = [
- { email: 'thomas@twenty.com', uuid: '0794b782-f52e-48c3-977e-b0f57f90de24' },
- { email: 'thomas@twenty.dev', uuid: 'dc66a7ec-56b2-425b-a8e8-26ff0396c3aa' },
+ {
+ email: 'thomas@twenty.com',
+ isSynced: true,
+ uuid: '0794b782-f52e-48c3-977e-b0f57f90de24',
+ },
+ {
+ email: 'thomas@twenty.dev',
+ isSynced: false,
+ uuid: 'dc66a7ec-56b2-425b-a8e8-26ff0396c3aa',
+ },
];