fix: Team creation dialog is visible and closable (#1758)

* fix: Team creation dialog is visible and closable

* fix according to recs

* fix border-radius issue visible on dark theme

* rename to appropriate naming: hotkeyCloser

* no memoize

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

@@ -10,9 +10,10 @@ import {
 } from '@/people/components/PeoplePicker';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
 import { LightIconButton } from '@/ui/button/components/LightIconButton';
+import { FieldDoubleText } from '@/ui/field/types/FieldDoubleText';
 import { IconPlus } from '@/ui/icon';
+import { DoubleTextInput } from '@/ui/input/components/DoubleTextInput';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { TextInputSettings } from '@/ui/input/text/components/TextInputSettings';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
@@ -21,23 +22,31 @@ import {
 } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
-  position: relative;
+  position: static;
 `;
 
 const StyledInputContainer = styled.div`
-  background-color: ${({ theme }) => theme.background.tertiary};
+  background-color: transparent;
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
   display: flex;
   gap: ${({ theme }) => theme.spacing(0.5)};
   width: ${({ theme }) => theme.spacing(62.5)};
-  & * input,
-  * div {
+  & input,
+  div {
     background-color: ${({ theme }) => theme.background.primary};
+    width: 100%;
+  }
+  div {
+    border-radius: ${({ theme }) => theme.spacing(1)};
+    overflow: hidden;
+  }
+  input {
+    display: flex;
+    flex-grow: 1;
+    padding: ${({ theme }) => theme.spacing(2)};
   }
 `;
 
-const defaultUsername = { firstName: '', lastName: '' };
-
 export const AddPersonToCompany = ({
   companyId,
   peopleIds,
@@ -47,14 +56,19 @@ export const AddPersonToCompany = ({
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isCreationDropdownOpen, setIsCreationDropdownOpen] = useState(false);
-  const [username, setUsername] = useState(defaultUsername);
   const [updatePerson] = useUpdateOnePersonMutation();
   const [insertOnePerson] = useInsertOnePersonMutation();
   const { refs, floatingStyles } = useFloating({
+    open: isDropdownOpen,
     placement: 'right-start',
-    middleware: [flip(), offset({ mainAxis: -20, crossAxis: 25 })],
+    middleware: [flip(), offset({ mainAxis: 30, crossAxis: 0 })],
   });
 
+  const handleEscape = () => {
+    if (isCreationDropdownOpen) setIsCreationDropdownOpen(false);
+    if (isDropdownOpen) setIsDropdownOpen(false);
+  };
+
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -94,58 +108,49 @@ export const AddPersonToCompany = ({
     }
   };
 
-  const handleUsernameChange =
-    (type: 'firstName' | 'lastName') =>
-    (name: string): void =>
-      setUsername((prevUserName) => ({ ...prevUserName, [type]: name }));
-
-  const handleInputKeyDown = async (
-    e: React.KeyboardEvent<HTMLInputElement>,
-  ) => {
-    if (e.key !== 'Enter' || (!username.firstName && !username.lastName))
-      return;
+  const handleInputKeyDown = async ({
+    firstValue,
+    secondValue,
+  }: FieldDoubleText) => {
+    if (!firstValue && !secondValue) return;
     const newPersonId = v4();
     await insertOnePerson({
       variables: {
         data: {
           company: { connect: { id: companyId } },
           id: newPersonId,
-          ...username,
+          firstName: firstValue,
+          lastName: secondValue,
         },
       },
       refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
     });
     setIsCreationDropdownOpen(false);
-    setUsername(defaultUsername);
   };
 
   return (
     <RecoilScope>
-      <StyledContainer>
-        <div ref={refs.setReference}>
-          <LightIconButton
-            Icon={IconPlus}
-            onClick={handleOpenPicker}
-            size="small"
-            accent="tertiary"
-          />
-        </div>
+      <StyledContainer ref={refs.setReference}>
+        <LightIconButton
+          Icon={IconPlus}
+          onClick={handleOpenPicker}
+          size="small"
+          accent="tertiary"
+        />
 
         {isDropdownOpen && (
           <div ref={refs.setFloating} style={floatingStyles}>
             {isCreationDropdownOpen ? (
               <StyledInputContainer>
-                <TextInputSettings
-                  onKeyDown={handleInputKeyDown}
-                  value={username.firstName}
-                  onChange={handleUsernameChange('firstName')}
-                  placeholder="First Name"
-                />
-                <TextInputSettings
-                  onKeyDown={handleInputKeyDown}
-                  value={username.lastName}
-                  onChange={handleUsernameChange('lastName')}
-                  placeholder="Last Name"
+                <DoubleTextInput
+                  firstValue=""
+                  secondValue=""
+                  firstValuePlaceholder="First Name"
+                  secondValuePlaceholder="Last Name"
+                  onClickOutside={handleEscape}
+                  onEnter={handleInputKeyDown}
+                  onEscape={handleEscape}
+                  hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
                 />
               </StyledInputContainer>
             ) : (