diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx index 4ce4a54fe..94fc0d5fb 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx @@ -1,40 +1,65 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; +import { SettingsConnectedAccountsTableHeader } from '@/settings/accounts/components/SettingsConnectedAccountsTableHeader'; +import { SettingsConnectedAccountsTableRow } from '@/settings/components/SettingsConnectedAccountsTableRow'; import { SettingsPath } from '@/types/SettingsPath'; +import { Table } from '@/ui/layout/table/components/Table'; +import styled from '@emotion/styled'; -import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer'; import { useLingui } from '@lingui/react/macro'; +import { IconPlus } from 'twenty-ui/display'; -import { SettingsConnectedAccountIcon } from '@/settings/accounts/components/SettingsConnectedAccountIcon'; +import { Button } from 'twenty-ui/input'; +import { Section } from 'twenty-ui/layout'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; -import { SettingsListCard } from '../../components/SettingsListCard'; + +const StyledTableRows = styled.div` + padding-bottom: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledAddAccountSection = styled(Section)` + border-top: 1px solid ${({ theme }) => theme.border.color.light}; + display: flex; + justify-content: flex-end; + padding-top: ${({ theme }) => theme.spacing(2)}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; +`; export const SettingsAccountsConnectedAccountsListCard = ({ accounts, - loading, }: { accounts: ConnectedAccount[]; - loading?: boolean; }) => { - const navigate = useNavigateSettings(); const { t } = useLingui(); + const navigateSettings = useNavigateSettings(); if (!accounts.length) { return ; } return ( - account.handle} - isLoading={loading} - RowIconFn={(row) => SettingsConnectedAccountIcon({ account: row })} - RowRightComponent={({ item: account }) => ( - - )} - hasFooter={true} - footerButtonLabel={t`Add account`} - onFooterButtonClick={() => navigate(SettingsPath.NewAccount)} - /> +
+ + + + {accounts.map((account) => ( + + ))} + +
+ +
); }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx index 3b7400320..947dde956 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx @@ -9,7 +9,7 @@ import { Status } from 'twenty-ui/display'; const StyledRowRightContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(4)}; `; export const SettingsAccountsConnectedAccountsRowRightContainer = ({ diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx index edc35ac3a..dc98b29f4 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx @@ -3,40 +3,30 @@ import { isGoogleMessagingEnabledState } from '@/client-config/states/isGoogleMe import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicrosoftCalendarEnabledState'; import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState'; import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth'; +import { SettingsCard } from '@/settings/components/SettingsCard'; import { SettingsPath } from '@/types/SettingsPath'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; import { ConnectedAccountProvider } from 'twenty-shared/types'; import { IconAt, IconGoogle, IconMicrosoft } from 'twenty-ui/display'; -import { Button } from 'twenty-ui/input'; -import { Card, CardContent, CardHeader } from 'twenty-ui/layout'; +import { UndecoratedLink } from 'twenty-ui/navigation'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; -const StyledHeader = styled(CardHeader)` - align-items: center; +const StyledCardsContainer = styled.div` display: flex; - height: ${({ theme }) => theme.spacing(6)}; -`; - -const StyledBody = styled(CardContent)` - display: flex; - justify-content: center; + flex-direction: column; gap: ${({ theme }) => theme.spacing(2)}; `; -type SettingsAccountsListEmptyStateCardProps = { - label?: string; -}; - -export const SettingsAccountsListEmptyStateCard = ({ - label, -}: SettingsAccountsListEmptyStateCardProps) => { +export const SettingsAccountsListEmptyStateCard = () => { const { triggerApisOAuth } = useTriggerApisOAuth(); const { t } = useLingui(); + const theme = useTheme(); const isGoogleMessagingEnabled = useRecoilValue( isGoogleMessagingEnabledState, @@ -56,36 +46,33 @@ export const SettingsAccountsListEmptyStateCard = ({ ); return ( - - {label || t`No connected account`} - - {(isGoogleMessagingEnabled || isGoogleCalendarEnabled) && ( -