Implemented comment thread target picker with new dropdown components (#295)

* First draft of new relation picker and usage in comments
---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/components/form/Checkbox.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  name: string;
-  id: string;
+  name?: string;
+  id?: string;
   checked?: boolean;
   indeterminate?: boolean;
   onChange?: (newCheckedValue: boolean) => void;

front/src/modules/ui/components/menu/DropdownMenu.tsx

@@ -17,4 +17,6 @@ export const DropdownMenu = styled.div`
   height: fit-content;
 
   width: 200px;
+
+  z-index: ${(props) => props.theme.lastLayerZIndex};
 `;

front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx

@@ -8,7 +8,7 @@ import { DropdownMenuButton } from './DropdownMenuButton';
 type Props = {
   checked: boolean;
   onChange?: (newCheckedValue: boolean) => void;
-  id: string;
+  id?: string;
 };
 
 const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`

front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx

@@ -25,8 +25,10 @@ type Story = StoryObj<typeof DropdownMenu>;
 
 const FakeContentBelow = () => (
   <div style={{ position: 'absolute' }}>
-    askjdlaksjdlaksjdlakjsdlkj lkajsldkjalskd jalksdj alksjd alskjd alksjd
-    alksjd laksjd askjdlaksjdlaksjdlakjsdlkj lkajsldkjalskd jalksdj alksjd
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
   </div>
 );
 
@@ -217,7 +219,7 @@ const FakeSelectableMenuItemWithAvatarList = () => {
           onClick={() => setSelectedItem(item.id)}
         >
           <Avatar
-            placeholderLetter="A"
+            placeholder="A"
             avatarUrl={item.avatarUrl}
             size={16}
             type="squared"
@@ -303,7 +305,7 @@ const FakeCheckableMenuItemWithAvatarList = () => {
           }}
         >
           <Avatar
-            placeholderLetter="A"
+            placeholder="A"
             avatarUrl={item.avatarUrl}
             size={16}
             type="squared"

front/src/modules/ui/components/select-entity/SelectSingleEntity.tsx

@@ -0,0 +1,3 @@
+export function SelectSingleEntity() {
+  return <></>;
+}

front/src/modules/ui/icons/index.ts

@@ -26,3 +26,4 @@ export { IconChevronDown } from '@tabler/icons-react';
 export { IconArrowNarrowDown } from '@tabler/icons-react';
 export { IconArrowNarrowUp } from '@tabler/icons-react';
 export { IconArrowRight } from '@tabler/icons-react';
+export { IconArrowUpRight } from '@tabler/icons-react';

front/src/modules/ui/layout/styles/themes.ts

@@ -54,7 +54,7 @@ const lightThemeSpecific = {
   lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)',
 
   primaryBorder: 'rgba(0, 0, 0, 0.08)',
-  lightBorder: '#f5f5f5',
+  lightBorder: 'rgba(245, 245, 245, 1)',
   mediumBorder: '#ebebeb',
 
   clickableElementBackgroundTransition: 'background 0.1s ease',