Design fixes (#696)

* Design fixes

* Fix design

* unused code

* Fix tests

front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts

@@ -29,6 +29,7 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() {
     viewableCommentThreadIdState,
   );
   const setHotkeyScope = useSetHotkeyScope();
+  setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
 
   const [, setCommentableEntityArray] = useRecoilState(
     commentableEntityArrayState,

front/src/modules/companies/components/CompanyAccountOwnerCell.tsx

@@ -27,6 +27,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
 
   return (
     <EditableCell
+      transparent
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
         <CompanyAccountOwnerPicker

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
-import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
 import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
 import {
-  CommentableType,
   GetCompaniesQuery,
   useUpdateCompanyMutation,
 } from '~/generated/graphql';
@@ -20,23 +17,10 @@ type OwnProps = {
 };
 
 export function CompanyEditableNameChipCell({ company }: OwnProps) {
-  const openCommentRightDrawer = useOpenTimelineRightDrawer();
   const [updateCompany] = useUpdateCompanyMutation();
 
   const [internalValue, setInternalValue] = useState(company.name ?? '');
 
-  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    openCommentRightDrawer([
-      {
-        type: CommentableType.Company,
-        id: company.id,
-      },
-    ]);
-  }
-
   useEffect(() => {
     setInternalValue(company.name ?? '');
   }, [company.name]);
@@ -49,12 +33,6 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
       id={company.id}
       changeHandler={setInternalValue}
       ChipComponent={CompanyChip}
-      rightEndContents={[
-        <CellCommentChip
-          count={company._commentThreadCount ?? 0}
-          onClick={handleCommentClick}
-        />,
-      ]}
       onSubmit={() =>
         updateCompany({
           variables: {

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,9 +1,7 @@
 import styled from '@emotion/styled';
 
-import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
-import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
 import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
-import { CommentableType, Person } from '~/generated/graphql';
+import { Person } from '~/generated/graphql';
 
 import { PersonChip } from './PersonChip';
 
@@ -26,41 +24,19 @@ const NoEditModeContainer = styled.div`
   width: 100%;
 `;
 
-const RightContainer = styled.div`
-  margin-left: ${(props) => props.theme.spacing(1)};
-`;
-
 export function EditablePeopleFullName({
   person,
   onChange,
   onSubmit,
   onCancel,
 }: OwnProps) {
-  const openCommentRightDrawer = useOpenTimelineRightDrawer();
-
   function handleDoubleTextChange(
     firstValue: string,
     secondValue: string,
   ): void {
     onChange(firstValue, secondValue);
   }
 
-  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!person) {
-      return;
-    }
-
-    openCommentRightDrawer([
-      {
-        type: CommentableType.Person,
-        id: person.id ?? '',
-      },
-    ]);
-  }
-
   return (
     <EditableCellDoubleText
       firstValue={person?.firstName ?? ''}
@@ -76,12 +52,6 @@ export function EditablePeopleFullName({
             name={person?.firstName + ' ' + person?.lastName}
             id={person?.id ?? ''}
           />
-          <RightContainer>
-            <CellCommentChip
-              count={person?._commentThreadCount ?? 0}
-              onClick={handleCommentClick}
-            />
-          </RightContainer>
         </NoEditModeContainer>
       }
     />

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -24,6 +24,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
 
   return (
     <EditableCell
+      transparent
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
         isCreating ? (

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
-import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
+import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdatePeopleMutation } from '~/generated/graphql';
 
@@ -20,7 +20,7 @@ export function EditablePeopleCityCell() {
   }, [city]);
 
   return (
-    <EditableCellPhone
+    <EditableCellText
       value={internalValue}
       onChange={setInternalValue}
       onSubmit={() =>

front/src/modules/ui/action-bar/components/ActionBar.tsx

@@ -18,7 +18,7 @@ type StyledContainerProps = {
 const StyledContainer = styled.div<StyledContainerProps>`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
   bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};

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

@@ -1,19 +1,19 @@
 import styled from '@emotion/styled';
 
 export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
-  align-items: center;
   backdrop-filter: ${({ disableBlur }) =>
     disableBlur ? 'none' : 'blur(20px)'};
 
   background: ${({ theme }) => theme.background.transparent.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
-
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
 
   display: flex;
 
   flex-direction: column;
 
-  width: 200px;
+  min-width: 160px;
+
+  overflow: hidden;
 `;

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

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 
 import { Checkbox } from '@/ui/input/components/Checkbox';
 
-import { DropdownMenuButton } from './DropdownMenuButton';
+import { DropdownMenuItem } from './DropdownMenuItem';
 
 type Props = {
   checked: boolean;
   onChange?: (newCheckedValue: boolean) => void;
   id?: string;
 };
 
-const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
+const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
   align-items: center;
   display: flex;
   justify-content: space-between;

front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx

@@ -1,22 +1,30 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenuItem = styled.div`
-  --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
+import { hoverBackground } from '@/ui/themes/effects';
+
+export const DropdownMenuItem = styled.li`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
   align-items: center;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.secondary};
 
+  cursor: pointer;
   display: flex;
   flex-direction: row;
+
   font-size: ${({ theme }) => theme.font.size.sm};
 
   gap: ${({ theme }) => theme.spacing(2)};
 
   height: calc(32px - 2 * var(--vertical-padding));
 
   padding: var(--vertical-padding) var(--horizontal-padding);
+
+  ${hoverBackground};
+
+  user-select: none;
   width: calc(100% - 2 * var(--horizontal-padding));
 `;

front/src/modules/ui/dropdown/components/DropdownMenuItemContainer.tsx → front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -1,15 +1,17 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenuItemContainer = styled.div`
-  --padding: ${({ theme }) => theme.spacing(1 / 2)};
+export const DropdownMenuItemsContainer = styled.div<{
+  hasMaxHeight?: boolean;
+}>`
+  --padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: flex-start;
   display: flex;
 
   flex-direction: column;
   gap: 2px;
   height: 100%;
-  max-height: 180px;
+  max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
   overflow-y: auto;
 
   padding: var(--padding);

front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx

@@ -7,7 +7,6 @@ export const DropdownMenuSearchContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
 
   display: flex;
   flex-direction: row;

front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx

@@ -5,15 +5,15 @@ import styled from '@emotion/styled';
 import { IconCheck } from '@/ui/icon/index';
 import { hoverBackground } from '@/ui/themes/effects';
 
-import { DropdownMenuButton } from './DropdownMenuButton';
+import { DropdownMenuItem } from './DropdownMenuItem';
 
 type Props = {
   selected?: boolean;
   onClick: () => void;
   hovered?: boolean;
 };
 
-const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
+const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
   ${hoverBackground};
 
   align-items: center;