diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index dd9191f0abfbf..cdfa695719be1 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -3,11 +3,11 @@ import { useMemo, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { IconApps, - IconComponent, - useIcons, IconButton, IconButtonVariant, + IconComponent, LightIconButton, + useIcons, } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; @@ -99,7 +99,7 @@ export const IconPicker = ({ setHotkeyScopeAndMemorizePreviousScope, } = usePreviousHotkeyScope(); - const { closeDropdown } = useDropdown(dropdownId); + const { closeDropdown, isDropdownOpen } = useDropdown(dropdownId); const { getIcons, getIcon } = useIcons(); const icons = getIcons(); @@ -169,6 +169,7 @@ export const IconPicker = ({ disabled={disabled} Icon={icon} variant={variant} + focus={isDropdownOpen} /> } dropdownMenuWidth={176} diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 54c9b1a798522..2e21792d821e6 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -94,7 +94,7 @@ export const Select = ({ disabledFromProps || (options.length <= 1 && !isDefined(callToActionButton)); - const { closeDropdown } = useDropdown(dropdownId); + const { closeDropdown, isDropdownOpen } = useDropdown(dropdownId); const dropDownMenuWidth = dropdownWidthAuto && selectContainerRef.current?.clientWidth @@ -114,6 +114,7 @@ export const Select = ({ ) : ( ({ } disableBlur={disableBlur} diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx index 96564a1127dff..311c1da540a94 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx @@ -5,11 +5,13 @@ import { IconChevronDown, isDefined, OverflowingTextWithTooltip, + RGBA, } from 'twenty-ui'; const StyledControlContainer = styled.div<{ disabled?: boolean; hasIcon: boolean; + isDropdownOpen: boolean; }>` display: grid; grid-template-columns: ${({ hasIcon }) => @@ -21,8 +23,12 @@ const StyledControlContainer = styled.div<{ max-width: 100%; padding: 0 ${({ theme }) => theme.spacing(2)}; background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; + border: 1px solid + ${({ theme, isDropdownOpen }) => + isDropdownOpen ? theme.color.blue : theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.sm}; + box-shadow: ${({ theme, isDropdownOpen }) => + isDropdownOpen ? `0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)}` : ''}; color: ${({ disabled, theme }) => disabled ? theme.font.color.tertiary : theme.font.color.primary}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; @@ -39,11 +45,13 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ type SelectControlProps = { selectedOption: SelectOption; isDisabled?: boolean; + isDropdownOpen: boolean; }; export const SelectControl = ({ selectedOption, isDisabled, + isDropdownOpen, }: SelectControlProps) => { const theme = useTheme(); @@ -51,6 +59,7 @@ export const SelectControl = ({ {isDefined(selectedOption.Icon) ? ( error ? theme.border.color.danger : theme.border.color.medium}; - border-left: ${({ LeftIcon }) => LeftIcon && 'none'}; - border-radius: ${({ theme, LeftIcon }) => - !LeftIcon && theme.border.radius.sm}; + border-radius: ${({ theme }) => theme.border.radius.sm}; box-sizing: border-box; color: ${({ theme }) => theme.font.color.primary}; display: flex; @@ -55,6 +53,8 @@ const StyledInput = styled.input< height: 32px; outline: none; padding: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme, LeftIcon }) => + LeftIcon ? `calc(${theme.spacing(2)} + 16px)` : theme.spacing(2)}; width: 100%; &::placeholder, @@ -84,14 +84,13 @@ const StyledErrorHelper = styled.div` const StyledLeftIconContainer = styled.div` align-items: center; - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm}; - border-right: none; - border-top-left-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; justify-content: center; padding-left: ${({ theme }) => theme.spacing(2)}; + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; `; const StyledTrailingIconContainer = styled.div<