fix relation fields preview in settings (#11745)

Fixes :
- display relation fields in preview settings
- display note and task relation field in preview settings - 
- fix design (align and background color)

closes https://github.com/twentyhq/twenty/issues/7084

---------

Co-authored-by: guillim <guigloo@msn.com>

packages/twenty-ui/src/components/avatar-chip/AvatarChip.tsx

@@ -14,10 +14,11 @@ export const AvatarChip = ({
   maxWidth,
   placeholderColorSeed,
   size,
+  variant = ChipVariant.Transparent,
 }: AvatarChipProps) => (
   <Chip
     label={name}
-    variant={ChipVariant.Transparent}
+    variant={variant}
     size={size}
     leftComponent={
       <AvatarChipsLeftComponent

packages/twenty-ui/src/components/avatar-chip/LinkAvatarChip.tsx

@@ -4,7 +4,10 @@ import { AvatarChipVariant } from '@ui/components/avatar-chip/types/AvatarChipsV
 import { ChipVariant } from '@ui/components/chip/Chip';
 import { LinkChip, LinkChipProps } from '@ui/components/chip/LinkChip';
 
-export type LinkAvatarChipProps = Omit<AvatarChipsCommonProps, 'clickable'> & {
+export type LinkAvatarChipProps = Omit<
+  AvatarChipsCommonProps,
+  'clickable' | 'variant'
+> & {
   to: string;
   onClick?: LinkChipProps['onClick'];
   variant?: AvatarChipVariant;

packages/twenty-ui/src/components/avatar-chip/types/AvatarChipsCommonProps.type.ts

@@ -1,8 +1,9 @@
 import { AvatarChipsLeftComponentProps } from '@ui/components/avatar-chip/AvatarChipLeftComponent';
-import { ChipSize } from '@ui/components/chip/Chip';
+import { ChipSize, ChipVariant } from '@ui/components/chip/Chip';
 
 export type AvatarChipsCommonProps = {
   size?: ChipSize;
   className?: string;
   maxWidth?: number;
+  variant?: ChipVariant;
 } & AvatarChipsLeftComponentProps;

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -19,6 +19,7 @@ export enum ChipVariant {
   Regular = 'regular',
   Transparent = 'transparent',
   Rounded = 'rounded',
+  Static = 'static',
 }
 
 export type ChipProps = {
@@ -89,7 +90,9 @@ const StyledContainer = withTheme(styled.div<
         ? theme.background.transparent.light
         : variant === ChipVariant.Highlighted
           ? theme.background.transparent.medium
-          : 'inherit'};
+          : variant === ChipVariant.Static
+            ? theme.background.transparent.light
+            : 'inherit'};
   }
 
   &:active {
@@ -98,11 +101,13 @@ const StyledContainer = withTheme(styled.div<
         ? theme.background.transparent.medium
         : variant === ChipVariant.Highlighted
           ? theme.background.transparent.strong
-          : 'inherit'};
+          : variant === ChipVariant.Static
+            ? theme.background.transparent.light
+            : 'inherit'};
   }
 
   background-color: ${({ theme, variant }) =>
-    variant === ChipVariant.Highlighted
+    variant === ChipVariant.Highlighted || variant === ChipVariant.Static
       ? theme.background.transparent.light
       : variant === ChipVariant.Rounded
         ? theme.background.transparent.lighter