diff --git a/packages/twenty-front/src/modules/accounts/types/account.ts b/packages/twenty-front/src/modules/accounts/types/account.ts new file mode 100644 index 000000000..2d40aeb64 --- /dev/null +++ b/packages/twenty-front/src/modules/accounts/types/account.ts @@ -0,0 +1 @@ +export type Account = { email: string; uuid: string }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index 64570f47c..ec62fa845 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx @@ -28,7 +28,7 @@ export const AddObjectFilterFromDetailsButton = ({ return ( } + Icon={IconPlus} title="Add filter" accent="tertiary" /> diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx new file mode 100644 index 000000000..3bd8b146d --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx @@ -0,0 +1,60 @@ +import { useNavigate } from 'react-router-dom'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { Account } from '@/accounts/types/Account'; +import { IconAt, IconPlus } from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +import { Card } from '@/ui/layout/card/components/Card'; +import { CardFooter } from '@/ui/layout/card/components/CardFooter'; + +import { SettingsAccountRow } from './SettingsAccountsRow'; + +const StyledFooter = styled(CardFooter)` + align-items: center; + color: ${({ theme }) => theme.font.color.tertiary}; + display: flex; + gap: ${({ theme }) => theme.spacing(2)}; + height: ${({ theme }) => theme.spacing(6)}; + padding: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(4)}; +`; + +const StyledIconButton = styled(LightIconButton)` + margin-left: auto; +`; + +type SettingsAccountsCardProps = { + accounts: Account[]; + onAccountRemove?: (uuid: string) => void; +}; + +export const SettingsAccountsCard = ({ + accounts, + onAccountRemove, +}: SettingsAccountsCardProps) => { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + + {accounts.map((account, index) => ( + + ))} + + + Add account + navigate('/settings/accounts/new')} + /> + + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx index d450be9eb..5f8ec99d2 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx @@ -1,14 +1,34 @@ +import { useState } from 'react'; + import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; +import { mockedAccounts } from '~/testing/mock-data/accounts'; +import { SettingsAccountsCard } from './SettingsAccountsCard'; import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard'; -export const SettingsAccountsConnectedAccountsSection = () => ( -
- - -
-); +export const SettingsAccountsConnectedAccountsSection = () => { + const [accounts, setAccounts] = useState(mockedAccounts); + + const handleAccountRemove = (uuid: string) => + setAccounts((previousAccounts) => + previousAccounts.filter((account) => account.uuid !== uuid), + ); + + return ( +
+ + {accounts.length ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx index dff1d555c..25c99fef7 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx @@ -4,30 +4,20 @@ import styled from '@emotion/styled'; import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { Button } from '@/ui/input/button/components/Button'; import { Card } from '@/ui/layout/card/components/Card'; +import { CardContent } from '@/ui/layout/card/components/CardContent'; +import { CardHeader } from '@/ui/layout/card/components/CardHeader'; import { REACT_APP_SERVER_AUTH_URL } from '~/config'; import { useGenerateTransientTokenMutation } from '~/generated/graphql'; -const StyledCard = styled(Card)` - border-radius: ${({ theme }) => theme.border.radius.md}; - overflow: hidden; - padding: 0; -`; - -const StyledHeader = styled.div` +const StyledHeader = styled(CardHeader)` align-items: center; - background-color: ${({ theme }) => theme.background.primary}; - border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; height: ${({ theme }) => theme.spacing(6)}; - padding: ${({ theme }) => theme.spacing(2, 4)}; `; -const StyledBody = styled.div` +const StyledBody = styled(CardContent)` display: flex; justify-content: center; - padding: ${({ theme }) => theme.spacing(4)}; `; export const SettingsAccountsEmptyStateCard = () => { @@ -43,8 +33,9 @@ export const SettingsAccountsEmptyStateCard = () => { window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`; }, [generateTransientToken]); + return ( - + No connected account