Fixed dropdown blur and unified components

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx

@@ -137,7 +137,6 @@ export const AdvancedFilterAddFilterRuleSelect = ({
 
   return (
     <Dropdown
-      disableBlur
       dropdownId={dropdownId}
       clickableComponent={
         <LightButton Icon={IconPlus} title="Add filter rule" />

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx

@@ -22,7 +22,6 @@ export const AdvancedFilterLogicalOperatorDropdown = ({
 
   return (
     <Select
-      disableBlur
       fullWidth
       dropdownId={`advanced-filter-logical-operator-${viewFilterGroup.id}`}
       value={viewFilterGroup.logicalOperator}

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx

@@ -68,7 +68,6 @@ export const AdvancedFilterRuleOptionsDropdown = ({
 
   return (
     <Dropdown
-      disableBlur
       dropdownId={dropdownId}
       clickableComponent={
         <AdvancedFilterRuleOptionsDropdownButton dropdownId={dropdownId} />

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterFieldSelect.tsx

@@ -41,7 +41,6 @@ export const AdvancedFilterViewFilterFieldSelect = ({
   return (
     <StyledContainer>
       <Dropdown
-        disableBlur
         dropdownId={advancedFilterDropdownId}
         clickableComponent={
           <SelectControl

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx

@@ -76,7 +76,6 @@ export const AdvancedFilterViewFilterOperandSelect = ({
   return (
     <StyledContainer>
       <Dropdown
-        disableBlur
         dropdownId={dropdownId}
         clickableComponent={
           <SelectControl

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput.tsx

@@ -39,7 +39,6 @@ export const AdvancedFilterViewFilterValueInput = ({
 
   return (
     <Dropdown
-      disableBlur
       dropdownId={dropdownId}
       clickableComponent={
         <SelectControl

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -81,11 +81,8 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
 `;
 
 const StyledTextInput = styled(TextInput)`
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${({ theme }) => theme.background.primary};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  width: ${({ theme }) => theme.spacing(53)};
   border-radius: ${({ theme }) => theme.border.radius.sm};
+  width: ${({ theme }) => theme.spacing(53)};
 `;
 
 const StyledBoardCardWrapper = styled.div`

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx

@@ -4,7 +4,6 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
 import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';
 
-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@@ -118,21 +117,19 @@ export const CurrencyFieldInput = ({
   };
 
   return (
-    <FieldInputOverlay>
-      <CurrencyInput
-        value={draftValue?.amount?.toString() ?? ''}
-        currencyCode={currencyCode}
-        autoFocus
-        placeholder="Currency"
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        onChange={handleChange}
-        onSelect={handleSelect}
-        hotkeyScope={hotkeyScope}
-      />
-    </FieldInputOverlay>
+    <CurrencyInput
+      value={draftValue?.amount?.toString() ?? ''}
+      currencyCode={currencyCode}
+      autoFocus
+      placeholder="Currency"
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      onChange={handleChange}
+      onSelect={handleSelect}
+      hotkeyScope={hotkeyScope}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx

@@ -1,7 +1,6 @@
 import { useFullNameField } from '@/object-record/record-field/meta-types/hooks/useFullNameField';
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
-import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay';
 
 import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder';
 import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder';
@@ -79,25 +78,23 @@ export const FullNameFieldInput = ({
   };
 
   return (
-    <FieldInputOverlay>
-      <DoubleTextInput
-        firstValue={draftValue?.firstName ?? ''}
-        secondValue={draftValue?.lastName ?? ''}
-        firstValuePlaceholder={
-          FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
-        }
-        secondValuePlaceholder={
-          LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
-        }
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        onPaste={handlePaste}
-        hotkeyScope={hotkeyScope}
-        onChange={handleChange}
-      />
-    </FieldInputOverlay>
+    <DoubleTextInput
+      firstValue={draftValue?.firstName ?? ''}
+      secondValue={draftValue?.lastName ?? ''}
+      firstValuePlaceholder={
+        FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+      }
+      secondValuePlaceholder={
+        LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
+      }
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      onPaste={handlePaste}
+      hotkeyScope={hotkeyScope}
+      onChange={handleChange}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import React, { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
@@ -18,11 +17,6 @@ import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { toSpliced } from '~/utils/array/toSpliced';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
-const StyledDropdownMenu = styled(DropdownMenu)`
-  margin: -1px;
-  position: relative;
-`;
-
 type MultiItemFieldInputProps<T> = {
   items: T[];
   onPersist: (updatedItems: T[]) => void;
@@ -164,7 +158,7 @@ export const MultiItemFieldInput = <T,>({
   };
 
   return (
-    <StyledDropdownMenu ref={containerRef} width={200}>
+    <DropdownMenu ref={containerRef} width={200}>
       {!!items.length && (
         <>
           <DropdownMenuItemsContainer>
@@ -222,6 +216,6 @@ export const MultiItemFieldInput = <T,>({
           />
         </DropdownMenuItemsContainer>
       )}
-    </StyledDropdownMenu>
+    </DropdownMenu>
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -18,12 +17,6 @@ import { MenuItemMultiSelectTag } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
-const StyledRelationPickerContainer = styled.div`
-  left: -1px;
-  position: absolute;
-  top: -1px;
-`;
-
 type MultiSelectFieldInputProps = {
   onCancel?: () => void;
 };
@@ -107,36 +100,34 @@ export const MultiSelectFieldInput = ({
         }
       }}
     >
-      <StyledRelationPickerContainer ref={containerRef}>
-        <DropdownMenu data-select-disable>
-          <DropdownMenuSearchInput
-            value={searchFilter}
-            onChange={(event) =>
-              setSearchFilter(
-                turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value),
-              )
-            }
-            autoFocus
-          />
-          <DropdownMenuSeparator />
-          <DropdownMenuItemsContainer hasMaxHeight>
-            {filteredOptionsInDropDown.map((option) => {
-              return (
-                <MenuItemMultiSelectTag
-                  key={option.value}
-                  selected={fieldValues?.includes(option.value) || false}
-                  text={option.label}
-                  color={option.color}
-                  onClick={() =>
-                    persistField(formatNewSelectedOptions(option.value))
-                  }
-                  isKeySelected={selectedItemId === option.value}
-                />
-              );
-            })}
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </StyledRelationPickerContainer>
+      <DropdownMenu data-select-disable>
+        <DropdownMenuSearchInput
+          value={searchFilter}
+          onChange={(event) =>
+            setSearchFilter(
+              turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value),
+            )
+          }
+          autoFocus
+        />
+        <DropdownMenuSeparator />
+        <DropdownMenuItemsContainer hasMaxHeight>
+          {filteredOptionsInDropDown.map((option) => {
+            return (
+              <MenuItemMultiSelectTag
+                key={option.value}
+                selected={fieldValues?.includes(option.value) || false}
+                text={option.label}
+                color={option.color}
+                onClick={() =>
+                  persistField(formatNewSelectedOptions(option.value))
+                }
+                isKeySelected={selectedItemId === option.value}
+              />
+            );
+          })}
+        </DropdownMenuItemsContainer>
+      </DropdownMenu>
     </SelectableList>
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx

@@ -1,8 +1,7 @@
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
-import { useNumberField } from '../../hooks/useNumberField';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
+import { useNumberField } from '../../hooks/useNumberField';
 
 export type FieldInputEvent = (persist: () => void) => void;
 
@@ -57,19 +56,17 @@ export const NumberFieldInput = ({
   };
 
   return (
-    <FieldInputOverlay>
-      <TextInput
-        placeholder={fieldDefinition.metadata.placeHolder}
-        autoFocus
-        value={draftValue?.toString() ?? ''}
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        hotkeyScope={hotkeyScope}
-        onChange={handleChange}
-      />
-    </FieldInputOverlay>
+    <TextInput
+      placeholder={fieldDefinition.metadata.placeHolder}
+      autoFocus
+      value={draftValue?.toString() ?? ''}
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      hotkeyScope={hotkeyScope}
+      onChange={handleChange}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import { RelationPicker } from '@/object-record/relation-picker/components/RelationPicker';
 import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
 
@@ -8,12 +6,6 @@ import { useRelationField } from '../../hooks/useRelationField';
 
 import { FieldInputEvent } from './DateTimeFieldInput';
 
-const StyledRelationPickerContainer = styled.div`
-  left: -1px;
-  position: absolute;
-  top: -1px;
-`;
-
 export type RelationToOneFieldInputProps = {
   onSubmit?: FieldInputEvent;
   onCancel?: () => void;
@@ -33,14 +25,12 @@ export const RelationToOneFieldInput = ({
   };
 
   return (
-    <StyledRelationPickerContainer>
-      <RelationPicker
-        fieldDefinition={fieldDefinition}
-        selectedRecordId={fieldValue?.id}
-        onSubmit={handleSubmit}
-        onCancel={onCancel}
-        initialSearchFilter={initialSearchValue}
-      />
-    </StyledRelationPickerContainer>
+    <RelationPicker
+      fieldDefinition={fieldDefinition}
+      selectedRecordId={fieldValue?.id}
+      onSubmit={handleSubmit}
+      onCancel={onCancel}
+      initialSearchFilter={initialSearchValue}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx

@@ -1,4 +1,3 @@
-import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
 import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
 
 import { usePersistField } from '../../../hooks/usePersistField';
@@ -57,19 +56,17 @@ export const TextFieldInput = ({
   };
 
   return (
-    <FieldTextAreaOverlay>
-      <TextAreaInput
-        placeholder={fieldDefinition.metadata.placeHolder}
-        autoFocus
-        value={draftValue ?? ''}
-        onClickOutside={handleClickOutside}
-        onEnter={handleEnter}
-        onEscape={handleEscape}
-        onShiftTab={handleShiftTab}
-        onTab={handleTab}
-        hotkeyScope={hotkeyScope}
-        onChange={handleChange}
-      />
-    </FieldTextAreaOverlay>
+    <TextAreaInput
+      placeholder={fieldDefinition.metadata.placeHolder}
+      autoFocus
+      value={draftValue ?? ''}
+      onClickOutside={handleClickOutside}
+      onEnter={handleEnter}
+      onEscape={handleEscape}
+      onShiftTab={handleShiftTab}
+      onTab={handleTab}
+      hotkeyScope={hotkeyScope}
+      onChange={handleChange}
+    />
   );
 };