From 9073bdf21a7360d4e8ec2e012709e2628a523458 Mon Sep 17 00:00:00 2001 From: Shyamsunder Tard <130305690+shyamsundertard@users.noreply.github.com> Date: Tue, 19 Nov 2024 16:51:01 +0530 Subject: [PATCH] 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. 1_b 1_w 2_b 2_w 3_b 3_w 4_b 4_w 5_b 5_w 6_b 6_w 7_b 7_w 8_b 8_w 9_b 9_w 10_b 10_w 11_b 11_w 12_b 12_w --------- Co-authored-by: Lucas Bordeau --- .../input/components/MultiItemFieldInput.tsx | 1 + .../ui/field/input/components/AddressInput.tsx | 5 +++++ .../modules/ui/field/input/components/DateInput.tsx | 3 ++- .../ui/field/input/components/TextAreaInput.tsx | 12 +++++++++++- .../internal/date/components/DateTimeInput.tsx | 4 +++- .../ui/layout/dropdown/components/DropdownMenu.tsx | 2 -- .../layout/dropdown/components/DropdownMenuInput.tsx | 3 +++ .../dropdown/components/DropdownMenuSearchInput.tsx | 3 +++ 8 files changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index dd383e3477..7f56cdf994 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx index c4c5743034..ebd1e41684 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx index c61ce4491e..c19c165d2b 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx index f9778f17ba..af55300e59 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx +++ b/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%); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx index 3fac47943a..9d663dbc11 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx index 03937c7fd3..2510c90c61 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx +++ b/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 }) => diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 98b56e44d6..1378eb4603 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/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%; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index d2e9c11a6d..00edc11cea 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/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,