Background Blur added across multiple Input Fields in Edit Popups (#8277)

Fix #5644 

**Apply background blur to input fields across UI for improved
consistency and appearance with Theme compatibility :**

1. Updated **TextAreaInput.tsx** to apply background blur to text input
fields (e.g., City name).

2. Enhanced **PhonesFieldInput.tsx** to apply background blur for
seamless styling in phone number input sections.

3. Modified **TextInputV2.tsx** to add background blur in address
inputs, workspace fields (e.g., Blocklist, Name fields), invitation
inputs, profile name/email fields, and other input areas.

4. Updated **DateTimeInput.tsx** and **DateInput.tsx** to improve the
appearance of date, time, and calendar popup fields with background
blur.

5. Refined **DropdownMenuInput.tsx** and **DropdownMenuSearchInput.tsx**
to add background blur to inputs for Emails, Domain name, and search
fields across the web (e.g., Time Zone dropdowns, phone number country
search).

Some images are attached for reference.

<img width="235" alt="1_b"
src="https://github.com/user-attachments/assets/bd72e69a-712e-4226-8fda-0cb737d4cbd1">
<img width="229" alt="1_w"
src="https://github.com/user-attachments/assets/bb8eb60b-31fb-44c6-ac2a-ca28638b5e07">
<img width="234" alt="2_b"
src="https://github.com/user-attachments/assets/a4f0a9de-dea1-4ef8-926b-99de984c081b">
<img width="239" alt="2_w"
src="https://github.com/user-attachments/assets/4d2c7331-4bbf-4ea2-adad-76c7cde4072c">
<img width="225" alt="3_b"
src="https://github.com/user-attachments/assets/458f4759-8428-43ae-a6b6-aa38ab6fb0f8">
<img width="219" alt="3_w"
src="https://github.com/user-attachments/assets/5ddb67c5-e59d-47cc-b2e7-44b3a7b794e6">
<img width="646" alt="4_b"
src="https://github.com/user-attachments/assets/01252bce-a34a-4dda-a801-654ccc5e7841">
<img width="637" alt="4_w"
src="https://github.com/user-attachments/assets/ea60deab-7594-4aef-ac63-0cedc9168951">
<img width="648" alt="5_b"
src="https://github.com/user-attachments/assets/465789ec-55b3-4750-a2bc-a9e156b1101e">
<img width="642" alt="5_w"
src="https://github.com/user-attachments/assets/8b58977a-f543-4018-a4ee-b1ff5b9180a3">
<img width="647" alt="6_b"
src="https://github.com/user-attachments/assets/88030efe-bd16-43e4-9744-ee223aa04298">
<img width="642" alt="6_w"
src="https://github.com/user-attachments/assets/4ca2c365-ab1e-47e9-ba4a-bdb738500f56">
<img width="647" alt="7_b"
src="https://github.com/user-attachments/assets/224c3da5-cf57-4652-bd29-681c2098917e">
<img width="655" alt="7_w"
src="https://github.com/user-attachments/assets/eecc2d51-ce1f-47c9-845c-c6fe15a40fa5">
<img width="317" alt="8_b"
src="https://github.com/user-attachments/assets/e899b4a2-4849-4d1c-805b-5a950a53d6cc">
<img width="335" alt="8_w"
src="https://github.com/user-attachments/assets/73fef887-0a46-4557-aca4-d07c9dc298d1">
<img width="246" alt="9_b"
src="https://github.com/user-attachments/assets/99c5627a-e7ba-4453-9666-8d73b0d676ee">
<img width="238" alt="9_w"
src="https://github.com/user-attachments/assets/bb36e4ea-3b78-48f5-822f-cc5012e5d434">
<img width="218" alt="10_b"
src="https://github.com/user-attachments/assets/450fa833-12ad-40b7-80f5-17de6af582bd">
<img width="225" alt="10_w"
src="https://github.com/user-attachments/assets/3fe6d128-4146-4316-821e-2ebd65fd12d5">
<img width="647" alt="11_b"
src="https://github.com/user-attachments/assets/ec39f88f-0beb-4cf0-b35f-b4f78b4e75ff">
<img width="663" alt="11_w"
src="https://github.com/user-attachments/assets/6eb19fe7-604c-4cb9-9623-208e541df751">
<img width="235" alt="12_b"
src="https://github.com/user-attachments/assets/98e68530-f5c5-43d1-839e-a8c14582b72a">
<img width="245" alt="12_w"
src="https://github.com/user-attachments/assets/e3f0aec9-6a32-4784-a36c-d187303d3310">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -20,6 +20,7 @@ import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmp
 
 const StyledDropdownMenu = styled(DropdownMenu)`
   margin-left: -1px;
+  position: relative;
   margin-top: -1px;
 `;
 

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -26,6 +26,11 @@ const StyledAddressContainer = styled.div`
     margin-bottom: 6px;
   }
 
+  input {
+    background-color: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+  }
+
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: auto;
     min-width: 100px;

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -12,7 +12,8 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 
 const StyledCalendarContainer = styled.div`
-  background: ${({ theme }) => theme.background.secondary};
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: ${({ theme }) => theme.border.radius.md};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -33,18 +33,28 @@ const StyledTextArea = styled(TextareaAutosize)`
   resize: none;
   max-height: 400px;
   width: calc(100% - ${({ theme }) => theme.spacing(7)});
+  background: transparent;
 `;
 
 const StyledTextAreaContainer = styled.div`
+  background: ${({ theme }) => theme.background.primary};
   border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
   position: relative;
   width: 100%;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  background: ${({ theme }) => theme.background.primary};
+
+  @supports (
+    (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))
+  ) {
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+    -webkit-backdrop-filter: ${({ theme }) => theme.blur.medium};
+  }
 `;
 
 const StyledLightIconButtonContainer = styled.div`
+  background: transparent;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx

@@ -13,6 +13,8 @@ import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'
 
 const StyledInputContainer = styled.div`
   align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-top-left-radius: ${({ theme }) => theme.border.radius.md};
   border-top-right-radius: ${({ theme }) => theme.border.radius.md};
@@ -22,7 +24,7 @@ const StyledInputContainer = styled.div`
 `;
 
 const StyledInput = styled.input<{ hasError?: boolean }>`
-  background: ${({ theme }) => theme.background.secondary};
+  background: transparent;
   border: none;
   color: ${({ theme }) => theme.font.color.primary};
   outline: none;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx

@@ -22,8 +22,6 @@ const StyledDropdownMenu = styled.div<{
 
   display: flex;
 
-  height: fit-content;
-
   flex-direction: column;
   z-index: 30;
   width: ${({ width = 200 }) =>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx

@@ -15,6 +15,8 @@ const StyledInput = styled.input<{
 
   border: 1px solid ${({ theme, hasError }) =>
     hasError ? theme.border.color.danger : theme.border.color.medium};
+  background-color: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-sizing: border-box;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -30,6 +32,7 @@ const StyledInput = styled.input<{
 `;
 
 const StyledInputContainer = styled.div`
+  background-color: transparent;
   box-sizing: border-box;
   position: relative;
   width: 100%;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx

@@ -8,6 +8,8 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
   display: flex;
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   flex-direction: row;
   height: calc(36px - 2 * var(--vertical-padding));
   padding: var(--vertical-padding) 0;
@@ -19,6 +21,7 @@ const StyledInput = styled.input`
   ${TEXT_INPUT_STYLE}
 
   font-size: ${({ theme }) => theme.font.size.sm};
+  background-color: transparent;
   width: 100%;
 
   &[type='number']::-webkit-outer-spin-button,