[FIX] remove blue outline for Phones, Emails, and Domains fields #8268
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR removes the blue outline and border color change on focus for input fields in the DropdownMenuInput component, addressing visual consistency issues with other fields.
- Commented out focus styles in
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsxthat previously added blue box-shadow and border color - Simplified padding for error message div in DropdownMenuInput component
- Changes affect Phones, Emails, and Domains fields to match desired simple input appearance
- Maintains error state styling with red border when hasError prop is true
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| /* &: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};`; | ||
| }}; | ||
| } | ||
| } */ |
There was a problem hiding this comment.
style: Consider using a CSS reset or outline: none instead of commenting out the focus styles to maintain accessibility. Focus states are important for keyboard navigation.
| @@ -53,8 +53,7 @@ const StyledRightContainer = styled.div` | |||
|
|
|||
| const StyledErrorDiv = styled.div` | |||
| color: ${({ theme }) => theme.color.red}; | |||
| padding: 0 ${({ theme }) => theme.spacing(2)} | |||
| ${({ theme }) => theme.spacing(1)}; | |||
| padding: 0 ${({ theme }) => theme.spacing(2)}; | |||
There was a problem hiding this comment.
Since the original issue doesn't mention padding, could you please add a comment to explain the issue you've found/are fixing here? Thanks!
There was a problem hiding this comment.
Why did you resolve @Hitarthsheth07? Thanks
| @@ -22,13 +22,13 @@ const StyledInput = styled.input<{ | |||
| position: relative; | |||
| width: 100%; | |||
|
|
|||
| &:focus { | |||
| /* &:focus { | |||
There was a problem hiding this comment.
Don't be afraid to delete code, that's what git is for - we can always find it if we need it! So don't leave commented code in the codebase :)
FIX: #8252