Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+const StyledCreateNewButton = styled(MenuItem)<{ hovered: boolean }>`
+  ${({ hovered, theme }) =>
+    hovered &&
+    css`
+      background: ${theme.background.transparent.light};
+    `}
+`;
+
+export const CreateNewButton = StyledCreateNewButton;

packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -0,0 +1,28 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledDropdownMenuSkeletonContainer = styled.div`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: calc(32px - 2 * var(--vertical-padding));
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  width: calc(100% - 2 * var(--horizontal-padding));
+`;
+
+export const DropdownMenuSkeletonItem = () => {
+  const theme = useTheme();
+  return (
+    <StyledDropdownMenuSkeletonContainer>
+      <SkeletonTheme
+        baseColor={theme.background.quaternary}
+        highlightColor={theme.background.secondary}
+      >
+        <Skeleton height={16} />
+      </SkeletonTheme>
+    </StyledDropdownMenuSkeletonContainer>
+  );
+};