feat: add Settings/Accounts Connected Accounts section accounts list (#2953)

Closes #2887
2023-12-12 16:03:39 +01:00
parent 2a4ab2ffd3
commit 0048216abf
24 changed files with 437 additions and 201 deletions
--- a/packages/twenty-front/src/modules/accounts/types/account.ts
+++ b/packages/twenty-front/src/modules/accounts/types/account.ts
@ -0,0 +1 @@
+export type Account = { email: string; uuid: string };
--- 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 (
    <LightButton
      onClick={handleClick}
-      icon={<IconPlus />}
+      Icon={IconPlus}
      title="Add filter"
      accent="tertiary"
    />
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
+++ 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 (
+    <Card>
+      {accounts.map((account, index) => (
+        <SettingsAccountRow
+          key={account.uuid}
+          account={account}
+          divider={index < accounts.length - 1}
+          onRemove={onAccountRemove}
+        />
+      ))}
+      <StyledFooter>
+        <IconAt size={theme.icon.size.sm} />
+        Add account
+        <StyledIconButton
+          Icon={IconPlus}
+          accent="tertiary"
+          onClick={() => navigate('/settings/accounts/new')}
+        />
+      </StyledFooter>
+    </Card>
+  );
+};
--- 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 = () => (
-  <Section>
-    <H2Title
-      title="Connected accounts"
-      description="Manage your internet accounts."
-    />
-    <SettingsAccountsEmptyStateCard />
-  </Section>
-);
+export const SettingsAccountsConnectedAccountsSection = () => {
+  const [accounts, setAccounts] = useState(mockedAccounts);
+
+  const handleAccountRemove = (uuid: string) =>
+    setAccounts((previousAccounts) =>
+      previousAccounts.filter((account) => account.uuid !== uuid),
+    );
+
+  return (
+    <Section>
+      <H2Title
+        title="Connected accounts"
+        description="Manage your internet accounts."
+      />
+      {accounts.length ? (
+        <SettingsAccountsCard
+          accounts={accounts}
+          onAccountRemove={handleAccountRemove}
+        />
+      ) : (
+        <SettingsAccountsEmptyStateCard />
+      )}
+    </Section>
+  );
+};
--- 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 (
-    <StyledCard>
+    <Card>
      <StyledHeader>No connected account</StyledHeader>
      <StyledBody>
        <Button
@ -54,6 +45,6 @@ export const SettingsAccountsEmptyStateCard = () => {
          onClick={handleGmailLogin}
        />
      </StyledBody>
-    </StyledCard>
+    </Card>
  );
 };
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
@ -0,0 +1,88 @@
+import { useNavigate } from 'react-router-dom';
+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 { 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;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin-left: auto;
+`;
+
+type SettingsAccountRowProps = {
+  account: Account;
+  divider?: boolean;
+  onRemove?: (uuid: string) => void;
+};
+
+export const SettingsAccountRow = ({
+  account,
+  divider,
+  onRemove,
+}: SettingsAccountRowProps) => {
+  const dropdownScopeId = `settings-account-row-${account.uuid}`;
+
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+  return (
+    <StyledRow divider={divider}>
+      <IconGoogle size={theme.icon.size.sm} />
+      {account.email}
+      <DropdownScope dropdownScopeId={dropdownScopeId}>
+        <StyledDropdown
+          dropdownPlacement="right-start"
+          dropdownHotkeyScope={{ scope: dropdownScopeId }}
+          clickableComponent={
+            <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+          }
+          dropdownComponents={
+            <DropdownMenu>
+              <DropdownMenuItemsContainer>
+                <MenuItem
+                  LeftIcon={IconMail}
+                  text="Emails settings"
+                  onClick={() => {
+                    navigate(`/settings/accounts/emails/${account.uuid}`);
+                    closeDropdown();
+                  }}
+                />
+                {!!onRemove && (
+                  <MenuItem
+                    accent="danger"
+                    LeftIcon={IconTrash}
+                    text="Remove account"
+                    onClick={() => {
+                      onRemove(account.uuid);
+                      closeDropdown();
+                    }}
+                  />
+                )}
+              </DropdownMenuItemsContainer>
+            </DropdownMenu>
+          }
+        />
+      </DropdownScope>
+    </StyledRow>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
@ -6,6 +6,7 @@ import { IconChevronRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { SoonPill } from '@/ui/display/pill/components/SoonPill';
 import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';

 type SettingsNavigationCardProps = {
  children: ReactNode;
@ -23,11 +24,13 @@ const StyledCard = styled(Card)<{
  color: ${({ theme }) => theme.font.color.tertiary};
  cursor: ${({ disabled, onClick }) =>
    disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
+`;
+
+const StyledCardContent = styled(CardContent)`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(2)};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-  padding-top: ${({ theme }) => theme.spacing(4)};
+  padding: ${({ theme }) => theme.spacing(4, 3)};
 `;

 const StyledHeader = styled.div`
@ -65,15 +68,17 @@ export const SettingsNavigationCard = ({

  return (
    <StyledCard disabled={disabled} onClick={onClick}>
-      <StyledHeader>
-        <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
-        <StyledTitle>
-          {title}
-          {hasSoonPill && <SoonPill />}
-        </StyledTitle>
-        <StyledIconChevronRight size={theme.icon.size.sm} />
-      </StyledHeader>
-      <StyledDescription>{children}</StyledDescription>
+      <StyledCardContent>
+        <StyledHeader>
+          <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
+          <StyledTitle>
+            {title}
+            {hasSoonPill && <SoonPill />}
+          </StyledTitle>
+          <StyledIconChevronRight size={theme.icon.size.sm} />
+        </StyledHeader>
+        <StyledDescription>{children}</StyledDescription>
+      </StyledCardContent>
    </StyledCard>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
@ -7,6 +7,8 @@ import { FieldContext } from '@/object-record/field/contexts/FieldContext';
 import { BooleanFieldInput } from '@/object-record/field/meta-types/input/components/BooleanFieldInput';
 import { RatingFieldInput } from '@/object-record/field/meta-types/input/components/RatingFieldInput';
 import { Tag } from '@/ui/display/tag/components/Tag';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';

 import { SettingsObjectFieldPreviewValueEffect } from '../components/SettingsObjectFieldPreviewValueEffect';
@ -23,13 +25,14 @@ export type SettingsObjectFieldPreviewProps = {
  shrink?: boolean;
 };

-const StyledContainer = styled.div`
-  background-color: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
+const StyledCard = styled(Card)`
  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-sizing: border-box;
  color: ${({ theme }) => theme.font.color.primary};
  max-width: 480px;
+`;
+
+const StyledCardContent = styled(CardContent)`
+  display: grid;
  padding: ${({ theme }) => theme.spacing(2)};
 `;

@ -95,65 +98,67 @@ export const SettingsObjectFieldPreview = ({
  });

  return (
-    <StyledContainer className={className}>
-      <StyledObjectSummary>
-        <StyledObjectName>
-          {!!ObjectIcon && (
-            <ObjectIcon
-              size={theme.icon.size.sm}
-              stroke={theme.icon.stroke.sm}
-            />
-          )}
-          {objectMetadataItem?.labelPlural}
-        </StyledObjectName>
-        {objectMetadataItem?.isCustom ? (
-          <Tag color="orange" text="Custom" />
-        ) : (
-          <Tag color="blue" text="Standard" />
-        )}
-      </StyledObjectSummary>
-      <SettingsObjectFieldPreviewValueEffect
-        entityId={entityId}
-        fieldName={fieldName}
-        value={value}
-      />
-      <StyledFieldPreview shrink={shrink}>
-        <StyledFieldLabel>
-          {!!FieldIcon && (
-            <FieldIcon
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-            />
-          )}
-          {fieldMetadata.label}:
-        </StyledFieldLabel>
-        <FieldContext.Provider
-          value={{
-            entityId,
-            isLabelIdentifier: false,
-            fieldDefinition: {
-              type: parseFieldType(fieldMetadata.type),
-              iconName: 'FieldIcon',
-              fieldMetadataId: fieldMetadata.id || '',
-              label: fieldMetadata.label,
-              metadata: {
-                fieldName,
-                relationObjectMetadataNameSingular:
-                  relationObjectMetadataItem?.nameSingular,
-              },
-            },
-            hotkeyScope: 'field-preview',
-          }}
-        >
-          {fieldMetadata.type === FieldMetadataType.Boolean ? (
-            <BooleanFieldInput readonly />
-          ) : fieldMetadata.type === FieldMetadataType.Rating ? (
-            <RatingFieldInput readonly />
+    <StyledCard className={className}>
+      <StyledCardContent>
+        <StyledObjectSummary>
+          <StyledObjectName>
+            {!!ObjectIcon && (
+              <ObjectIcon
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.sm}
+              />
+            )}
+            {objectMetadataItem?.labelPlural}
+          </StyledObjectName>
+          {objectMetadataItem?.isCustom ? (
+            <Tag color="orange" text="Custom" />
          ) : (
-            <FieldDisplay />
+            <Tag color="blue" text="Standard" />
          )}
-        </FieldContext.Provider>
-      </StyledFieldPreview>
-    </StyledContainer>
+        </StyledObjectSummary>
+        <SettingsObjectFieldPreviewValueEffect
+          entityId={entityId}
+          fieldName={fieldName}
+          value={value}
+        />
+        <StyledFieldPreview shrink={shrink}>
+          <StyledFieldLabel>
+            {!!FieldIcon && (
+              <FieldIcon
+                size={theme.icon.size.md}
+                stroke={theme.icon.stroke.sm}
+              />
+            )}
+            {fieldMetadata.label}:
+          </StyledFieldLabel>
+          <FieldContext.Provider
+            value={{
+              entityId,
+              isLabelIdentifier: false,
+              fieldDefinition: {
+                type: parseFieldType(fieldMetadata.type),
+                iconName: 'FieldIcon',
+                fieldMetadataId: fieldMetadata.id || '',
+                label: fieldMetadata.label,
+                metadata: {
+                  fieldName,
+                  relationObjectMetadataNameSingular:
+                    relationObjectMetadataItem?.nameSingular,
+                },
+              },
+              hotkeyScope: 'field-preview',
+            }}
+          >
+            {fieldMetadata.type === FieldMetadataType.Boolean ? (
+              <BooleanFieldInput readonly />
+            ) : fieldMetadata.type === FieldMetadataType.Rating ? (
+              <RatingFieldInput readonly />
+            ) : (
+              <FieldDisplay />
+            )}
+          </FieldContext.Provider>
+        </StyledFieldPreview>
+      </StyledCardContent>
+    </StyledCard>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@ -71,6 +71,7 @@ export const SettingsObjectFieldRelationForm = ({
        <Select
          label="Relation type"
          dropdownScopeId="relation-type-select"
+          fullWidth
          disabled={disableRelationEdition}
          value={values.type}
          options={Object.entries(relationTypes).map(
@ -85,6 +86,7 @@ export const SettingsObjectFieldRelationForm = ({
        <Select
          label="Object destination"
          dropdownScopeId="object-destination-select"
+          fullWidth
          disabled={disableRelationEdition}
          value={values.objectMetadataId}
          options={objectMetadataItems.map((objectMetadataItem) => ({
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
@ -3,7 +3,9 @@ import { DropResult } from '@hello-pangea/dnd';
 import { v4 } from 'uuid';

 import { IconPlus } from '@/ui/display/icon';
-import { Button } from '@/ui/input/button/components/Button';
+import { LightButton } from '@/ui/input/button/components/LightButton';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
@ -20,8 +22,7 @@ type SettingsObjectFieldSelectFormProps = {
  values: SettingsObjectFieldSelectFormValues;
 };

-const StyledContainer = styled.div`
-  padding: ${({ theme }) => theme.spacing(4)};
+const StyledContainer = styled(CardContent)`
  padding-bottom: ${({ theme }) => theme.spacing(3.5)};
 `;

@ -35,13 +36,14 @@ const StyledLabel = styled.span`
  text-transform: uppercase;
 `;

-const StyledButton = styled(Button)`
-  border-bottom: 0;
-  border-left: 0;
-  border-radius: 0;
-  border-right: 0;
+const StyledFooter = styled(CardFooter)`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledButton = styled(LightButton)`
  justify-content: center;
-  text-align: center;
+  width: 100%;
 `;

 const getNextColor = (currentColor: ThemeColor) => {
@ -117,21 +119,22 @@ export const SettingsObjectFieldSelectForm = ({
          }
        />
      </StyledContainer>
-      <StyledButton
-        title="Add option"
-        fullWidth
-        Icon={IconPlus}
-        onClick={() =>
-          onChange([
-            ...values,
-            {
-              color: getNextColor(values[values.length - 1].color),
-              label: `Option ${values.length + 1}`,
-              value: v4(),
-            },
-          ])
-        }
-      />
+      <StyledFooter>
+        <StyledButton
+          title="Add option"
+          Icon={IconPlus}
+          onClick={() =>
+            onChange([
+              ...values,
+              {
+                color: getNextColor(values[values.length - 1].color),
+                label: `Option ${values.length + 1}`,
+                value: v4(),
+              },
+            ])
+          }
+        />
+      </StyledFooter>
    </>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import styled from '@emotion/styled';

 import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';

 type SettingsObjectFieldTypeCardProps = {
  className?: string;
@ -9,14 +10,10 @@ type SettingsObjectFieldTypeCardProps = {
  form?: ReactNode;
 };

-const StyledPreviewContainer = styled(Card)`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  padding: ${({ theme }) => theme.spacing(4)};
+const StyledCard = styled(Card)``;

-  &:not(:last-child) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+const StyledPreviewContainer = styled(CardContent)`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
 `;

 const StyledTitle = styled.h3`
@ -32,11 +29,7 @@ const StyledPreviewContent = styled.div`
  gap: 6px;
 `;

-const StyledFormContainer = styled(Card)`
-  border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  overflow: hidden;
+const StyledFormContainer = styled(CardContent)`
  padding: 0;
 `;

@ -46,12 +39,12 @@ export const SettingsObjectFieldTypeCard = ({
  form,
 }: SettingsObjectFieldTypeCardProps) => {
  return (
-    <div className={className}>
-      <StyledPreviewContainer>
+    <StyledCard className={className}>
+      <StyledPreviewContainer divider={!!form}>
        <StyledTitle>Preview</StyledTitle>
        <StyledPreviewContent>{preview}</StyledPreviewContent>
      </StyledPreviewContainer>
      {!!form && <StyledFormContainer>{form}</StyledFormContainer>}
-    </div>
+    </StyledCard>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@ -77,6 +77,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
        description="The field's type and values."
      />
      <Select
+        fullWidth
        disabled={!!fieldMetadata?.id}
        dropdownScopeId="object-field-type-select"
        value={values?.type}
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
@ -7,6 +7,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { Card } from '@/ui/layout/card/components/Card';
+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';
@ -23,7 +24,7 @@ type SettingsAboutSectionProps = {
  onEdit: () => void;
 };

-const StyledCard = styled(Card)`
+const StyledCardContent = styled(CardContent)`
  align-items: center;
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
@ -69,43 +70,45 @@ export const SettingsAboutSection = ({
  return (
    <Section>
      <H2Title title="About" description="Manage your object" />
-      <StyledCard>
-        <StyledName>
-          {!!Icon && <Icon size={theme.icon.size.md} />}
-          {name}
-        </StyledName>
-        {isCustom ? (
-          <StyledTag color="orange" text="Custom" />
-        ) : (
-          <StyledTag color="blue" text="Standard" />
-        )}
-        <DropdownScope dropdownScopeId={dropdownScopeId}>
-          <Dropdown
-            clickableComponent={
-              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-            }
-            dropdownComponents={
-              <DropdownMenu width="160px">
-                <DropdownMenuItemsContainer>
-                  <MenuItem
-                    text="Edit"
-                    LeftIcon={IconPencil}
-                    onClick={handleEdit}
-                  />
-                  <MenuItem
-                    text="Disable"
-                    LeftIcon={IconArchive}
-                    onClick={handleDisable}
-                  />
-                </DropdownMenuItemsContainer>
-              </DropdownMenu>
-            }
-            dropdownHotkeyScope={{
-              scope: dropdownScopeId,
-            }}
-          />
-        </DropdownScope>
-      </StyledCard>
+      <Card>
+        <StyledCardContent>
+          <StyledName>
+            {!!Icon && <Icon size={theme.icon.size.md} />}
+            {name}
+          </StyledName>
+          {isCustom ? (
+            <StyledTag color="orange" text="Custom" />
+          ) : (
+            <StyledTag color="blue" text="Standard" />
+          )}
+          <DropdownScope dropdownScopeId={dropdownScopeId}>
+            <Dropdown
+              clickableComponent={
+                <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+              }
+              dropdownComponents={
+                <DropdownMenu width="160px">
+                  <DropdownMenuItemsContainer>
+                    <MenuItem
+                      text="Edit"
+                      LeftIcon={IconPencil}
+                      onClick={handleEdit}
+                    />
+                    <MenuItem
+                      text="Disable"
+                      LeftIcon={IconArchive}
+                      onClick={handleDisable}
+                    />
+                  </DropdownMenuItemsContainer>
+                </DropdownMenu>
+              }
+              dropdownHotkeyScope={{
+                scope: dropdownScopeId,
+              }}
+            />
+          </DropdownScope>
+        </StyledCardContent>
+      </Card>
    </Section>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
@ -4,16 +4,16 @@ import styled from '@emotion/styled';

 import { IconX } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Card } from '@/ui/layout/card/components/Card';
 import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut';
 import { cookieStorage } from '~/utils/cookie-storage';

 import CoverImage from '../assets/cover.png';

-const StyledCoverImageContainer = styled.div`
+const StyledCoverImageContainer = styled(Card)`
  align-items: center;
  background-image: url(${CoverImage.toString()});
  background-size: cover;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
  border-radius: ${({ theme }) => theme.border.radius.md};
  box-sizing: border-box;
  display: flex;
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
@ -1,13 +1,14 @@
-import React, { MouseEvent, useMemo } from 'react';
+import { MouseEvent } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';

-import { TablerIconsProps } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';

 export type LightButtonAccent = 'secondary' | 'tertiary';

 export type LightButtonProps = {
  className?: string;
-  icon?: React.ReactNode;
+  Icon?: IconComponent;
  title?: string;
  accent?: LightButtonAccent;
  active?: boolean;
@ -76,7 +77,7 @@ const StyledButton = styled.button<

 export const LightButton = ({
  className,
-  icon: initialIcon,
+  Icon,
  title,
  active = false,
  accent = 'secondary',
@ -84,15 +85,7 @@ export const LightButton = ({
  focus = false,
  onClick,
 }: LightButtonProps) => {
-  const icon = useMemo(() => {
-    if (!initialIcon || !React.isValidElement(initialIcon)) {
-      return null;
-    }
-
-    return React.cloneElement<TablerIconsProps>(initialIcon as any, {
-      size: 14,
-    });
-  }, [initialIcon]);
+  const theme = useTheme();

  return (
    <StyledButton
@ -103,7 +96,7 @@ export const LightButton = ({
      className={className}
      active={active}
    >
-      {icon}
+      {!!Icon && <Icon size={theme.icon.size.sm} />}
      {title}
    </StyledButton>
  );
--- a/packages/twenty-front/src/modules/ui/input/button/components/stories/LightButton.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/stories/LightButton.stories.tsx
@ -22,16 +22,16 @@ export const Default: Story = {
    disabled: false,
    active: false,
    focus: false,
-    icon: <IconSearch />,
+    Icon: IconSearch,
  },
  argTypes: {
-    icon: { control: false },
+    Icon: { control: false },
  },
  decorators: [ComponentDecorator],
 };

 export const Catalog: CatalogStory<Story, typeof LightButton> = {
-  args: { title: 'Filter', icon: <IconSearch /> },
+  args: { title: 'Filter', Icon: IconSearch },
  argTypes: {
    accent: { control: false },
    disabled: { control: false },
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@ -15,13 +15,17 @@ export type SelectProps<Value extends string | number | null> = {
  className?: string;
  disabled?: boolean;
  dropdownScopeId: string;
+  fullWidth?: boolean;
  label?: string;
  onChange?: (value: Value) => void;
  options: { value: Value; label: string; Icon?: IconComponent }[];
  value?: Value;
 };

-const StyledControlContainer = styled.div<{ disabled?: boolean }>`
+const StyledControlContainer = styled.div<{
+  disabled?: boolean;
+  fullWidth?: boolean;
+}>`
  align-items: center;
  background-color: ${({ theme }) => theme.background.transparent.lighter};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
@ -29,7 +33,7 @@ const StyledControlContainer = styled.div<{ disabled?: boolean }>`
  color: ${({ disabled, theme }) =>
    disabled ? theme.font.color.tertiary : theme.font.color.primary};
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  display: inline-flex;
+  display: ${({ fullWidth }) => (fullWidth ? 'flex' : 'inline-flex')};
  gap: ${({ theme }) => theme.spacing(1)};
  height: ${({ theme }) => theme.spacing(8)};
  justify-content: space-between;
@ -60,6 +64,7 @@ export const Select = <Value extends string | number | null>({
  className,
  disabled,
  dropdownScopeId,
+  fullWidth,
  label,
  onChange,
  options,
@ -72,7 +77,7 @@ export const Select = <Value extends string | number | null>({
  const { closeDropdown } = useDropdown({ dropdownScopeId });

  const selectControl = (
-    <StyledControlContainer disabled={disabled}>
+    <StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
      <StyledControlLabel>
        {!!selectedOption?.Icon && (
          <selectedOption.Icon
--- a/packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx
@ -1,10 +1,10 @@
 import styled from '@emotion/styled';

 const StyledCard = styled.div`
-  background-color: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
  border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(3)};
+  color: ${({ theme }) => theme.font.color.secondary};
+  overflow: hidden;
 `;

 export { StyledCard as Card };
--- a/packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx
@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledCardContent = styled.div<{ divider?: boolean }>`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  ${({ divider, theme }) =>
+    divider
+      ? css`
+          border-bottom: 1px solid ${theme.border.color.medium};
+        `
+      : ''}
+`;
+
+export { StyledCardContent as CardContent };
--- a/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledCardFooter = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardFooter as CardFooter };
--- a/packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx
@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledCardHeader = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+export { StyledCardHeader as CardHeader };
--- 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
@ -1,10 +1,31 @@
 import { Meta, StoryObj } from '@storybook/react';

+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
 import { Card } from '../Card';
+import { CardContent } from '../CardContent';
+import { CardFooter } from '../CardFooter';
+import { CardHeader } from '../CardHeader';

 const meta: Meta<typeof Card> = {
  title: 'UI/Layout/Card/Card',
  component: Card,
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>Lorem ipsum</CardHeader>
+      <CardContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id massa
+        vel odio ullamcorper molestie eu nec ipsum. Sed semper convallis
+        consectetur.
+      </CardContent>
+      <CardFooter>Lorem ipsum</CardFooter>
+    </Card>
+  ),
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
 };

 export default meta;
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@ -21,6 +21,7 @@ import { DropdownMenu } from './DropdownMenu';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';

 type DropdownProps = {
+  className?: string;
  clickableComponent?: JSX.Element | JSX.Element[];
  dropdownComponents: JSX.Element | JSX.Element[];
  hotkey?: {
@ -37,6 +38,7 @@ type DropdownProps = {
 };

 export const Dropdown = ({
+  className,
  clickableComponent,
  dropdownComponents,
  dropdownMenuWidth,
@ -97,7 +99,7 @@ export const Dropdown = ({
  );

  return (
-    <div ref={containerRef}>
+    <div ref={containerRef} className={className}>
      {clickableComponent && (
        <div ref={refs.setReference} onClick={toggleDropdown}>
          {clickableComponent}
--- a/packages/twenty-front/src/testing/mock-data/accounts.ts
+++ b/packages/twenty-front/src/testing/mock-data/accounts.ts
@ -0,0 +1,6 @@
+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' },
+];
				`@ -0,0 +1 @@`
				`export type Account = { email: string; uuid: string };`