twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix DropdownMenuInput border when focused

Browse Source
This commit is contained in:
bosiraphael 2024-11-05 13:34:46 +01:00
parent 0893774cc1
commit b9aa6386a2
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { css } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'; import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
import 'react-phone-number-input/style.css'; import 'react-phone-number-input/style.css';
import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { RGBA, TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useCombinedRefs } from '~/hooks/useCombinedRefs'; import { useCombinedRefs } from '~/hooks/useCombinedRefs';
@ -22,6 +22,14 @@ const StyledInput = styled.input<{
position: relative; position: relative;
width: 100%; width: 100%;
&:focus {
${({ theme, hasError = false }) => {
if (hasError) return '';
return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)};
border-color: ${theme.color.blue};`;
}};
}
${({ withRightComponent }) => ${({ withRightComponent }) =>
withRightComponent && withRightComponent &&
css` css`