Design fixes (#696)

* Design fixes

* Fix design

* unused code

* Fix tests

front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx

@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuCheckableItem } from '@/ui/dropdown/components/DropdownMenuCheckableItem';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { Avatar } from '@/users/components/Avatar';
@@ -57,7 +57,7 @@ export function MultipleEntitySelect<
         autoFocus
       />
       <DropdownMenuSeparator />
-      <DropdownMenuItemContainer>
+      <DropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
           <DropdownMenuCheckableItem
             key={entity.id}
@@ -83,7 +83,7 @@ export function MultipleEntitySelect<
         {entitiesInDropdown?.length === 0 && (
           <DropdownMenuItem>No result</DropdownMenuItem>
         )}
-      </DropdownMenuItemContainer>
+      </DropdownMenuItemsContainer>
     </DropdownMenu>
   );
 }

front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx

@@ -2,8 +2,8 @@ import { useRef } from 'react';
 import { useTheme } from '@emotion/react';
 
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
-import { DropdownMenuButton } from '@/ui/dropdown/components/DropdownMenuButton';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
 import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
@@ -60,12 +60,12 @@ export function SingleEntitySelect<
       <DropdownMenuSeparator />
       {showCreateButton && (
         <>
-          <DropdownMenuItemContainer style={{ maxHeight: 180 }}>
-            <DropdownMenuButton onClick={onCreate}>
+          <DropdownMenuItemsContainer hasMaxHeight>
+            <DropdownMenuItem onClick={onCreate}>
               <IconPlus size={theme.icon.size.md} />
               Create new
-            </DropdownMenuButton>
-          </DropdownMenuItemContainer>
+            </DropdownMenuItem>
+          </DropdownMenuItemsContainer>
           <DropdownMenuSeparator />
         </>
       )}

front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import { Key } from 'ts-key-enum';
 
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
-import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { Avatar } from '@/users/components/Avatar';
@@ -12,8 +13,7 @@ import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
-import { CompanyPickerSkeleton } from './skeletons/CompanyPickerSkeleton';
-import { DropdownMenuItemContainerSkeleton } from './skeletons/DropdownMenuItemContainerSkeleton';
+import { DropdownMenuItemsContainerSkeleton } from './skeletons/DropdownMenuItemsContainerSkeleton';
 
 export type EntitiesForSingleEntitySelect<
   CustomEntityForSelect extends EntityForSelect,
@@ -64,11 +64,11 @@ export function SingleEntitySelectBase<
   );
 
   return (
-    <DropdownMenuItemContainer ref={containerRef}>
+    <DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
       {entities.loading ? (
-        <DropdownMenuItemContainerSkeleton>
-          <CompanyPickerSkeleton count={10} />
-        </DropdownMenuItemContainerSkeleton>
+        <DropdownMenuItemsContainerSkeleton>
+          <Skeleton height={24} />
+        </DropdownMenuItemsContainerSkeleton>
       ) : entitiesInDropdown.length === 0 ? (
         <DropdownMenuItem>No result</DropdownMenuItem>
       ) : (
@@ -90,6 +90,6 @@ export function SingleEntitySelectBase<
           </DropdownMenuSelectableItem>
         ))
       )}
-    </DropdownMenuItemContainer>
+    </DropdownMenuItemsContainer>
   );
 }

front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx

@@ -1,35 +0,0 @@
-import Skeleton from 'react-loading-skeleton';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  count: number;
-};
-
-export const SkeletonContainer = styled.div`
-  align-items: center;
-  display: inline-flex;
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-  position: relative;
-  width: 100%;
-`;
-
-export const SkeletonEntityName = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-`;
-
-export function CompanyPickerSkeleton({ count }: OwnProps) {
-  const loadSkeletons = Array(count).fill(1);
-  return (
-    <>
-      {loadSkeletons.map((_, i) => (
-        <SkeletonContainer key={i}>
-          <Skeleton width={15} height={15} />
-          <SkeletonEntityName>
-            <Skeleton height={8} />
-          </SkeletonEntityName>
-        </SkeletonContainer>
-      ))}
-    </>
-  );
-}

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-
-export const DropdownMenuItemContainerSkeleton = styled.div`
-  --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
-  --vertical-padding: ${({ theme }) => theme.spacing(2)};
-
-  align-items: center;
-
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.secondary};
-
-  font-size: ${({ theme }) => theme.font.size.sm};
-
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: calc(100% - 2 * var(--vertical-padding));
-
-  padding: var(--vertical-padding) var(--horizontal-padding);
-  width: calc(100% - 2 * var(--horizontal-padding));
-`;

front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+export const DropdownMenuItemsContainerSkeleton = styled.div`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  color: blue;
+
+  height: calc(100% - 2 * var(--vertical-padding));
+
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  width: calc(100% - 2 * var(--horizontal-padding));
+`;