Add SettingsCard for Config Data Type and Accounts Settings (#7093)

https://github.com/twentyhq/twenty/issues/6950 Add new Settings Card for Config Data Type and accounts Settings Before: <img width="707" alt="Screenshot 2024-09-11 at 17 43 16" src="https://github.com/user-attachments/assets/63ff9373-fa86-4b22-8e8b-21483039c3be"> After: <img width="755" alt="Screenshot 2024-09-17 at 14 15 18" src="https://github.com/user-attachments/assets/213c24a1-dc1c-4ffb-8890-7c1f63ed376c"> <img width="755" alt="Screenshot 2024-09-17 at 14 15 38" src="https://github.com/user-attachments/assets/0fc12d19-b92a-493d-80fa-0064cf491fbc">
2025-10-29 20:02:29 +00:00 · 2024-09-18 18:32:41 +02:00
parent b1cb8998f8
commit cac3e116a3
17 changed files with 207 additions and 73 deletions
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';

-import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
+import { SettingsCard } from '@/settings/components/SettingsCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Section } from '@/ui/layout/section/components/Section';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { useTheme } from '@emotion/react';

 const StyledCardsContainer = styled.div`
  display: flex;
@@ -14,6 +15,7 @@ const StyledCardsContainer = styled.div`
 `;

 export const SettingsAccountsSettingsSection = () => {
+  const theme = useTheme();
  return (
    <Section>
      <H2Title
@@ -22,16 +24,30 @@ export const SettingsAccountsSettingsSection = () => {
      />
      <StyledCardsContainer>
        <UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
-          <SettingsNavigationCard Icon={IconMailCog} title="Emails">
-            Set email visibility, manage your blocklist and more.
-          </SettingsNavigationCard>
+          <SettingsCard
+            Icon={
+              <IconMailCog
+                size={theme.icon.size.lg}
+                stroke={theme.icon.stroke.sm}
+              />
+            }
+            title="Emails"
+            description="Set email visibility, manage your blocklist and more."
+          />
        </UndecoratedLink>
        <UndecoratedLink
          to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
        >
-          <SettingsNavigationCard Icon={IconCalendarEvent} title="Calendar">
-            Configure and customize your calendar preferences.
-          </SettingsNavigationCard>
+          <SettingsCard
+            Icon={
+              <IconCalendarEvent
+                size={theme.icon.size.lg}
+                stroke={theme.icon.stroke.sm}
+              />
+            }
+            title="Calendar"
+            description="Configure and customize your calendar preferences."
+          />
        </UndecoratedLink>
      </StyledCardsContainer>
    </Section>
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
@@ -1,16 +1,16 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, IconComponent, Pill } from 'twenty-ui';
+import { IconChevronRight, Pill } from 'twenty-ui';

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

-type SettingsNavigationCardProps = {
-  children: ReactNode;
+type SettingsCardProps = {
+  description?: string;
  disabled?: boolean;
  soon?: boolean;
-  Icon: IconComponent;
+  Icon: ReactNode;
  onClick?: () => void;
  title: string;
  className?: string;
@@ -24,19 +24,23 @@ const StyledCard = styled(Card)<{
    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
  cursor: ${({ disabled, onClick }) =>
    disabled ? 'not-allowed' : onClick ? 'pointer' : 'default'};
+  width: 100%;
+  & :hover {
+    background-color: ${({ theme }) => theme.background.quaternary};
+  }
 `;

-const StyledCardContent = styled(CardContent)`
+const StyledCardContent = styled(CardContent)<object>`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(4, 3)};
+  padding: ${({ theme }) => theme.spacing(2, 2)};
 `;

 const StyledHeader = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(2)};
 `;

 const StyledTitle = styled.div<{ disabled?: boolean }>`
@@ -54,18 +58,27 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 `;

 const StyledDescription = styled.div`
-  padding-left: ${({ theme }) => theme.spacing(8)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(7)};
 `;

-export const SettingsNavigationCard = ({
-  children,
+const StyledIconContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+`;
+
+export const SettingsCard = ({
+  description,
  soon,
  disabled = soon,
  Icon,
  onClick,
  title,
  className,
-}: SettingsNavigationCardProps) => {
+}: SettingsCardProps) => {
  const theme = useTheme();

  return (
@@ -73,17 +86,18 @@ export const SettingsNavigationCard = ({
      disabled={disabled}
      onClick={disabled ? undefined : onClick}
      className={className}
+      rounded={true}
    >
      <StyledCardContent>
        <StyledHeader>
-          <Icon size={theme.icon.size.lg} stroke={theme.icon.stroke.sm} />
+          <StyledIconContainer>{Icon}</StyledIconContainer>
          <StyledTitle disabled={disabled}>
            {title}
            {soon && <Pill label="Soon" />}
          </StyledTitle>
          <StyledIconChevronRight size={theme.icon.size.sm} />
        </StyledHeader>
-        <StyledDescription>{children}</StyledDescription>
+        {description && <StyledDescription>{description}</StyledDescription>}
      </StyledCardContent>
    </StyledCard>
  );
--- a/packages/twenty-front/src/modules/settings/components/stories/SettingsCard.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/components/stories/SettingsCard.stories.tsx
@@ -0,0 +1,24 @@
+import { SettingsCard } from '@/settings/components/SettingsCard';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ComponentDecorator, IconMailCog } from 'twenty-ui';
+
+const meta: Meta<typeof SettingsCard> = {
+  title: 'Modules/Settings/SettingsCard',
+  component: SettingsCard,
+  decorators: [ComponentDecorator],
+};
+export default meta;
+type Story = StoryObj<typeof SettingsCard>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => {},
+    Icon: React.createElement(IconMailCog),
+    title: 'Settings Card',
+  },
+  argTypes: {
+    className: { control: 'false' },
+    Icon: { control: 'false' },
+  },
+};
--- a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
@@ -1,9 +1,8 @@
 import {
  IconComponent,
-  IconRelationManyToMany,
-  IconRelationManyToOne,
-  IconRelationOneToMany,
-  IconRelationOneToOne,
+  IllustrationIconManyToMany,
+  IllustrationIconOneToMany,
+  IllustrationIconOneToOne,
 } from 'twenty-ui';

 import { RelationDefinitionType } from '~/generated-metadata/graphql';
@@ -22,24 +21,24 @@ export const RELATION_TYPES: Record<
 > = {
  [RelationDefinitionType.OneToMany]: {
    label: 'Has many',
-    Icon: IconRelationOneToMany,
+    Icon: IllustrationIconOneToMany,
    imageSrc: OneToManySvg,
  },
  [RelationDefinitionType.OneToOne]: {
    label: 'Has one',
-    Icon: IconRelationOneToOne,
+    Icon: IllustrationIconOneToOne,
    imageSrc: OneToOneSvg,
  },
  [RelationDefinitionType.ManyToOne]: {
    label: 'Belongs to one',
-    Icon: IconRelationManyToOne,
+    Icon: IllustrationIconOneToMany,
    imageSrc: OneToManySvg,
    isImageFlipped: true,
  },
  // Not supported yet
  [RelationDefinitionType.ManyToMany]: {
    label: 'Belongs to many',
-    Icon: IconRelationManyToMany,
+    Icon: IllustrationIconManyToMany,
    imageSrc: OneToManySvg,
    isImageFlipped: true,
  },
--- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
@@ -1,6 +1,6 @@
 import {
-  IconBracketsContain,
  IconComponent,
+  IllustrationIconArray,
  IllustrationIconCalendarEvent,
  IllustrationIconCalendarTime,
  IllustrationIconCurrency,
@@ -186,7 +186,7 @@ export const SETTINGS_FIELD_TYPE_CONFIGS = {
  },
  [FieldMetadataType.Array]: {
    label: 'Array',
-    Icon: IconBracketsContain,
+    Icon: IllustrationIconArray,
    category: 'Basic',
    exampleValue: ['value1', 'value2'],
  },
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
@@ -1,8 +1,5 @@
-import styled from '@emotion/styled';
-import { Controller, useFormContext } from 'react-hook-form';
-import { z } from 'zod';
-
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SETTINGS_FIELD_TYPE_CATEGORIES } from '@/settings/data-model/constants/SettingsFieldTypeCategories';
 import { SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS } from '@/settings/data-model/constants/SettingsFieldTypeCategoryDescriptions';
 import {
@@ -13,12 +10,14 @@ import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/field
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
-import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { useState } from 'react';
-import { H2Title, IconChevronRight, IconSearch } from 'twenty-ui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { H2Title, IconSearch } from 'twenty-ui';
+import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 export const settingsDataModelFieldTypeFormSchema = z.object({
@@ -51,13 +50,6 @@ const StyledTypeSelectContainer = styled.div`
  width: 100%;
 `;

-const StyledButton = styled(Button)<{ isActive: boolean }>`
-  background: ${({ theme, isActive }) =>
-    isActive ? theme.background.quaternary : theme.background.secondary};
-  height: 40px;
-  width: 100%;
-  border-radius: ${({ theme }) => theme.border.radius.md};
-`;
 const StyledContainer = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
@@ -66,20 +58,13 @@ const StyledContainer = styled.div`
  width: 100%;
 `;

-const StyledButtonContainer = styled.div`
+const StyledCardContainer = styled.div`
  display: flex;

  position: relative;
  width: calc(50% - ${({ theme }) => theme.spacing(1)});
 `;

-const StyledRightChevron = styled(IconChevronRight)`
-  color: ${({ theme }) => theme.font.color.secondary};
-  position: absolute;
-  right: ${({ theme }) => theme.spacing(2)};
-  top: 50%;
-  transform: translateY(-50%);
-`;
 const StyledSearchInput = styled(TextInput)`
  width: 100%;
 `;
@@ -90,9 +75,9 @@ export const SettingsDataModelFieldTypeSelect = ({
  fieldMetadataItem,
  onFieldTypeSelect,
 }: SettingsDataModelFieldTypeSelectProps) => {
+  const theme = useTheme();
  const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
  const [searchQuery, setSearchQuery] = useState('');
-  const theme = useTheme();
  const fieldTypeConfigs = Object.entries<SettingsFieldTypeConfig>(
    SETTINGS_FIELD_TYPE_CONFIGS,
  ).filter(
@@ -136,7 +121,7 @@ export const SettingsDataModelFieldTypeSelect = ({
          ? (fieldMetadataItem.type as SettingsSupportedFieldType)
          : FieldMetadataType.Text
      }
-      render={({ field: { onChange, value } }) => (
+      render={({ field: { onChange } }) => (
        <StyledTypeSelectContainer className={className}>
          <Section>
            <StyledSearchInput
@@ -158,8 +143,8 @@ export const SettingsDataModelFieldTypeSelect = ({
                {fieldTypeConfigs
                  .filter(([, config]) => config.category === category)
                  .map(([key, config]) => (
-                    <StyledButtonContainer>
-                      <StyledButton
+                    <StyledCardContainer>
+                      <SettingsCard
                        key={key}
                        onClick={() => {
                          onChange(key as SettingsSupportedFieldType);
@@ -168,13 +153,15 @@ export const SettingsDataModelFieldTypeSelect = ({
                          );
                          onFieldTypeSelect();
                        }}
+                        Icon={
+                          <config.Icon
+                            size={theme.icon.size.xl}
+                            stroke={theme.icon.stroke.sm}
+                          />
+                        }
                        title={config.label}
-                        Icon={config.Icon}
-                        size="small"
-                        isActive={value === key}
                      />
-                      <StyledRightChevron size={theme.icon.size.md} />
-                    </StyledButtonContainer>
+                    </StyledCardContainer>
                  ))}
              </StyledContainer>
            </Section>
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@@ -1,6 +1,6 @@
-import { Link } from 'react-router-dom';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 import { IconComponent, IconTwentyStar } from 'twenty-ui';

 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
@@ -23,10 +23,9 @@ const StyledDataType = styled.div<{
  border-radius: ${({ theme }) => theme.border.radius.sm};
  display: flex;
  font-size: ${({ theme }) => theme.font.size.sm};
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(2)};
  height: 20px;
  overflow: hidden;
-  padding: 0 ${({ theme }) => theme.spacing(2)};
  text-decoration: none;

  ${({ to }) =>
@@ -36,11 +35,11 @@ const StyledDataType = styled.div<{
        `
      : ''}

-  ${({ theme, value }) =>
+  ${({ value, theme }) =>
    value === FieldMetadataType.Relation
      ? css`
-          border-color: ${theme.tag.background.purple};
-          color: ${theme.color.purple};
+          color: ${theme.font.color.secondary};
+          text-decoration: underline;
        `
      : ''}
 `;
--- a/packages/twenty-ui/src/display/icon/assets/illustration-array.svg
+++ b/packages/twenty-ui/src/display/icon/assets/illustration-array.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.84682 4.19127L4.10596 3.92969L3.05961 18.8931L6.80048 19.1547" fill="currentFill"/>
+<path d="M17.199 4.84524L20.9399 5.10683L19.8935 20.0703L16.1526 19.8087" fill="currentFill"/>
+<path d="M7.99728 15.4793L8.00663 15.4799L7.99728 15.4793Z" fill="#E8EFFD"/>
+<path d="M11.7381 15.7409L11.7475 15.7415L11.7381 15.7409Z" fill="#E8EFFD"/>
+<path d="M15.479 16.0024L15.4884 16.0031L15.479 16.0024Z" fill="#E8EFFD"/>
+<path d="M7.84682 4.19127L4.10596 3.92969L3.05961 18.8931L6.80048 19.1547M17.199 4.84524L20.9399 5.10683L19.8935 20.0703L16.1526 19.8087M7.99728 15.4793L8.00663 15.4799M11.7381 15.7409L11.7475 15.7415M15.479 16.0024L15.4884 16.0031" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/twenty-ui/src/display/icon/assets/illustration-many-to-many.svg
+++ b/packages/twenty-ui/src/display/icon/assets/illustration-many-to-many.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25628 7.91194C3.22159 7.41587 3.38539 6.92633 3.71163 6.55103C4.03788 6.17573 4.49985 5.9454 4.99592 5.91071L18.0889 4.99516C18.585 4.96047 19.0746 5.12426 19.4499 5.45051C19.8252 5.77675 20.0555 6.23873 20.0902 6.7348L20.7441 16.087C20.7788 16.583 20.615 17.0726 20.2888 17.4479C19.9625 17.8232 19.5006 18.0535 19.0045 18.0882L5.91147 19.0037C5.4154 19.0384 4.92587 18.8746 4.55057 18.5484C4.17527 18.2221 3.94494 17.7602 3.91025 17.2641L3.25628 7.91194Z" fill="#E8EFFD"/>
+<path d="M14.9367 13.6737L14.6751 9.93282L17.7423 13.4775L17.4807 9.73663" fill="currentFill"/>
+<path d="M6.51971 14.2623L6.25812 10.5214L9.32536 14.0661L9.06377 10.3252" fill="currentFill"/>
+<path d="M11.9021 10.5966L11.9028 10.606L11.9021 10.5966Z" fill="#E8EFFD"/>
+<path d="M12.0983 13.4023L12.099 13.4116L12.0983 13.4023Z" fill="#E8EFFD"/>
+<path d="M14.9367 13.6737L14.6751 9.93282L17.7423 13.4775L17.4807 9.73663M6.51971 14.2623L6.25812 10.5214L9.32536 14.0661L9.06377 10.3252M11.9021 10.5966L11.9028 10.606M12.0983 13.4023L12.099 13.4116M3.25628 7.91194C3.22159 7.41587 3.38539 6.92633 3.71163 6.55103C4.03788 6.17573 4.49985 5.9454 4.99592 5.91071L18.0889 4.99516C18.585 4.96047 19.0746 5.12426 19.4499 5.45051C19.8252 5.77675 20.0555 6.23873 20.0902 6.7348L20.7441 16.087C20.7788 16.583 20.615 17.0726 20.2888 17.4479C19.9625 17.8232 19.5006 18.0535 19.0045 18.0882L5.91147 19.0037C5.4154 19.0384 4.92587 18.8746 4.55057 18.5484C4.17527 18.2221 3.94494 17.7602 3.91025 17.2641L3.25628 7.91194Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg
+++ b/packages/twenty-ui/src/display/icon/assets/illustration-one-to-many.svg
@@ -1,7 +1,7 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" fill="#E8EFFD"/>
+<path d="M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" fill="currentFill"/>
 <path d="M7.69334 10.456L8.62855 10.3906L8.89014 14.1315" fill="#E8EFFD"/>
-<path d="M14.5014 13.7391L14.2399 9.99822L17.3071 13.5429L17.0455 9.80203" fill="#E8EFFD"/>
+<path d="M14.5014 13.7391L14.2399 9.99822L17.3071 13.5429L17.0455 9.80203" fill="currentFill"/>
 <path d="M11.4669 10.662L11.4676 10.6714L11.4669 10.662Z" fill="#E8EFFD"/>
 <path d="M11.6631 13.4677L11.6637 13.477L11.6631 13.4677Z" fill="#E8EFFD"/>
 <path d="M7.69334 10.456L8.62855 10.3906L8.89014 14.1315M14.5014 13.7391L14.2399 9.99822L17.3071 13.5429L17.0455 9.80203M11.4669 10.662L11.4676 10.6714M11.6631 13.4677L11.6637 13.477M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
--- a/packages/twenty-ui/src/display/icon/assets/illustration-one-to-one.svg
+++ b/packages/twenty-ui/src/display/icon/assets/illustration-one-to-one.svg
@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" fill="#E8EFFD"/>
+<path d="M8.62855 10.3906L9.56377 10.3252L9.82536 14.0661" fill="#E8EFFD"/>
+<path d="M15.1751 9.93282L16.1103 9.86743L16.3719 13.6083" fill="#E8EFFD"/>
+<path d="M12.4021 10.5966L12.4028 10.606L12.4021 10.5966Z" fill="#E8EFFD"/>
+<path d="M12.5983 13.4023L12.599 13.4116L12.5983 13.4023Z" fill="#E8EFFD"/>
+<path d="M8.62855 10.3906L9.56377 10.3252L9.82536 14.0661M15.1751 9.93282L16.1103 9.86743L16.3719 13.6083M12.4021 10.5966L12.4028 10.606M12.5983 13.4023L12.599 13.4116M3.75628 7.91194C3.72159 7.41587 3.88539 6.92633 4.21163 6.55103C4.53788 6.17573 4.99985 5.9454 5.49592 5.91071L18.5889 4.99516C19.085 4.96047 19.5746 5.12426 19.9499 5.45051C20.3252 5.77675 20.5555 6.23873 20.5902 6.7348L21.2441 16.087C21.2788 16.583 21.115 17.0726 20.7888 17.4479C20.4625 17.8232 20.0006 18.0535 19.5045 18.0882L6.41147 19.0037C5.9154 19.0384 5.42587 18.8746 5.05057 18.5484C4.67527 18.2221 4.44494 17.7602 4.41025 17.2641L3.75628 7.91194Z" stroke="currentColor" stroke-width="1.49625" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx
@@ -0,0 +1,21 @@
+import { useTheme } from '@emotion/react';
+import IllustrationIconArrayRaw from '@ui/display/icon/assets/illustration-array.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;
+
+export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+  const { color, fill } = theme.IllustrationIcon;
+  return (
+    <IllustrationIconWrapper>
+      <IllustrationIconArrayRaw
+        fill={fill}
+        color={color}
+        height={size}
+        width={size}
+      />
+    </IllustrationIconWrapper>
+  );
+};
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx
@@ -0,0 +1,24 @@
+import { useTheme } from '@emotion/react';
+import IllustrationIconManyToManyRaw from '@ui/display/icon/assets/illustration-many-to-many.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IllustrationIconManyToManyProps = Pick<IconComponentProps, 'size'>;
+
+export const IllustrationIconManyToMany = (
+  props: IllustrationIconManyToManyProps,
+) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+  const { color, fill } = theme.IllustrationIcon;
+  return (
+    <IllustrationIconWrapper>
+      <IllustrationIconManyToManyRaw
+        height={size}
+        width={size}
+        fill={fill}
+        color={color}
+      />
+    </IllustrationIconWrapper>
+  );
+};
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx
@@ -0,0 +1,25 @@
+import { useTheme } from '@emotion/react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
+
+import IllustrationIconOneToOneRaw from '@ui/display/icon/assets/illustration-one-to-one.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IllustrationIconOneToOneProps = Pick<IconComponentProps, 'size'>;
+
+export const IllustrationIconOneToOne = (
+  props: IllustrationIconOneToOneProps,
+) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+  const { color, fill } = theme.IllustrationIcon;
+  return (
+    <IllustrationIconWrapper>
+      <IllustrationIconOneToOneRaw
+        height={size}
+        width={size}
+        fill={fill}
+        color={color}
+      />
+    </IllustrationIconWrapper>
+  );
+};
--- a/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx
@@ -2,12 +2,10 @@ import styled from '@emotion/styled';

 const StyledRectangleIllustrationIcon = styled('div')`
  background-color: ${({ theme }) => theme.background.primary};
-  border: solid ${({ theme }) => theme.border.color.medium};
+  border: 0.75px solid ${({ theme }) => theme.border.color.medium};
  border-radius: ${({ theme }) => theme.border.radius.sm};
  display: flex;
  justify-content: center;
-  size: auto;
-  box-sizing: content-box;
 `;

 export const IllustrationIconWrapper = StyledRectangleIllustrationIcon;
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@@ -18,14 +18,17 @@ export * from './icon/components/IconMicrosoft';
 export * from './icon/components/IconRelationManyToOne';
 export * from './icon/components/IconTwentyStar';
 export * from './icon/components/IconTwentyStarFilled';
+export * from './icon/components/IllustrationIconArray';
 export * from './icon/components/IllustrationIconCalendarEvent';
 export * from './icon/components/IllustrationIconCalendarTime';
 export * from './icon/components/IllustrationIconCurrency';
 export * from './icon/components/IllustrationIconJson';
 export * from './icon/components/IllustrationIconMail';
+export * from './icon/components/IllustrationIconManyToMany';
 export * from './icon/components/IllustrationIconMap';
 export * from './icon/components/IllustrationIconNumbers';
 export * from './icon/components/IllustrationIconOneToMany';
+export * from './icon/components/IllustrationIconOneToOne';
 export * from './icon/components/IllustrationIconPhone';
 export * from './icon/components/IllustrationIconSetting';
 export * from './icon/components/IllustrationIconStar';
--- a/packages/twenty-ui/src/theme/constants/Icon.ts
+++ b/packages/twenty-ui/src/theme/constants/Icon.ts
@@ -3,7 +3,7 @@ export const ICON = {
    sm: 14,
    md: 16,
    lg: 20,
-    xl: 40,
+    xl: 24,
  },
  stroke: {
    sm: 1.6,