fix #5660 standardized relation icon (#6504)

fix #5660 

- updated One to many [1:N] icon across app
- created many to one icon [N:1] , and added it in app


![download
(2)](https://github.com/user-attachments/assets/35ce05be-0f5f-4cd0-a1b7-7ab9062f74a0)
![download
(1)](https://github.com/user-attachments/assets/57316e49-c931-4ab5-ad4b-d04b241724c3)

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts

@@ -1,6 +1,7 @@
 import {
   IconComponent,
-  IconLayersLinked,
+  IconRelationManyToOne,
+  IconRelationOneToMany,
   IconRelationOneToOne,
 } from 'twenty-ui';
 
@@ -21,7 +22,7 @@ export const RELATION_TYPES: Record<
 > = {
   [RelationMetadataType.OneToMany]: {
     label: 'Has many',
-    Icon: IconLayersLinked,
+    Icon: IconRelationOneToMany,
     imageSrc: OneToManySvg,
   },
   [RelationMetadataType.OneToOne]: {
@@ -31,7 +32,7 @@ export const RELATION_TYPES: Record<
   },
   MANY_TO_ONE: {
     label: 'Belongs to one',
-    Icon: IconLayersLinked,
+    Icon: IconRelationManyToOne,
     imageSrc: OneToManySvg,
     isImageFlipped: true,
   },

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, useMemo } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ReactNode, useMemo } from 'react';
 import { Nullable, useIcons } from 'twenty-ui';
 
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
@@ -13,6 +13,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 import { RELATION_TYPES } from '../../constants/RelationTypes';
 
+import { RelationMetadataType } from '~/generated-metadata/graphql';
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {
@@ -89,7 +90,12 @@ export const SettingsObjectFieldItemTableRow = ({
       <TableCell>
         <SettingsObjectFieldDataType
           Icon={RelationIcon}
-          label={relationObjectMetadataItem?.labelPlural}
+          label={
+            relationType === RelationMetadataType.ManyToOne ||
+            relationType === RelationMetadataType.OneToOne
+              ? relationObjectMetadataItem?.labelSingular
+              : relationObjectMetadataItem?.labelPlural
+          }
           to={
             relationObjectMetadataItem?.namePlural &&
             !relationObjectMetadataItem.isSystem

packages/twenty-ui/src/display/icon/assets/many-to-one.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+  <path d="M16 10h1v4" />
+  <path d="M7 14v-4l3 4v-4" />
+  <path d="M13 10.5l0 .01" />
+  <path d="M13 13.5l0 .01" />
+</svg>

packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from '@emotion/react';
+
+import IconRelationManyToOneRaw from '@ui/display/icon/assets/many-to-one.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconRelationManyToOneProps = Pick<IconComponentProps, 'size' | 'stroke'>;
+
+export const IconRelationManyToOne = (props: IconRelationManyToOneProps) => {
+  const theme = useTheme();
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? theme.icon.stroke.md;
+
+  return (
+    <IconRelationManyToOneRaw height={size} width={size} strokeWidth={stroke} />
+  );
+};

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -3,6 +3,7 @@ export {
   Icon123,
   IconAlertCircle,
   IconAlertTriangle,
+  IconApi,
   IconApps,
   IconArchive,
   IconArchiveOff,
@@ -51,7 +52,9 @@ export {
   IconColorSwatch,
   IconMessageCircle as IconComment,
   IconCopy,
+  IconCreativeCommonsSa,
   IconCreditCard,
+  IconCsv,
   IconCurrencyBaht,
   IconCurrencyDirham,
   IconCurrencyDollar,
@@ -85,8 +88,8 @@ export {
   IconFilter,
   IconFilterOff,
   IconFocusCentered,
-  IconFunction,
   IconForbid,
+  IconFunction,
   IconGripVertical,
   IconH1,
   IconH2,
@@ -169,9 +172,7 @@ export {
   IconVideo,
   IconWand,
   IconWorld,
-  IconX,
-  IconCreativeCommonsSa,
-  IconApi,
-  IconCsv,
+  IconX
 } from '@tabler/icons-react';
 export type { TablerIconsProps } from '@tabler/icons-react';
+

packages/twenty-ui/src/display/index.ts

@@ -15,6 +15,7 @@ export * from './icon/components/IconGmail';
 export * from './icon/components/IconGoogle';
 export * from './icon/components/IconGoogleCalendar';
 export * from './icon/components/IconMicrosoft';
+export * from './icon/components/IconRelationManyToOne';
 export * from './icon/components/IconTwentyStar';
 export * from './icon/components/IconTwentyStarFilled';
 export * from './icon/components/TablerIcons';