Improve left icon

Author: FelixMalfait

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}

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

@@ -94,7 +94,7 @@ export const Select = <Value extends string | number | null>({
     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 = <Value extends string | number | null>({
         <SelectControl
           selectedOption={selectedOption}
           isDisabled={isDisabled}
+          isDropdownOpen={false}
         />
       ) : (
         <Dropdown
@@ -124,6 +125,7 @@ export const Select = <Value extends string | number | null>({
             <SelectControl
               selectedOption={selectedOption}
               isDisabled={isDisabled}
+              isDropdownOpen={isDropdownOpen}
             />
           }
           disableBlur={disableBlur}

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,18 +45,21 @@ const StyledIconChevronDown = styled(IconChevronDown)<{
 type SelectControlProps = {
   selectedOption: SelectOption<string | number | null>;
   isDisabled?: boolean;
+  isDropdownOpen: boolean;
 };
 
 export const SelectControl = ({
   selectedOption,
   isDisabled,
+  isDropdownOpen,
 }: SelectControlProps) => {
   const theme = useTheme();
 
   return (
     <StyledControlContainer
       disabled={isDisabled}
       hasIcon={isDefined(selectedOption.Icon)}
+      isDropdownOpen={isDropdownOpen}
     >
       {isDefined(selectedOption.Icon) ? (
         <selectedOption.Icon

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

@@ -43,9 +43,7 @@ const StyledInput = styled.input<
   border: 1px solid
     ${({ theme, error }) =>
       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<