Fix Phone Input Design

[Bonapara]

Current behavior

The phone input is not implemented correctly:

Desired Behavior

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=3007-69739&node-type=frame&t=L4Zw8NIeonoYkIdd-11

• Flag/region dropdown button should be hoverable
• Flag/region button is too wide
• Input is too high (40px instead of 32px)
• There should be a 8px margin left before the phone number
• The country code should be Tertiary instead of Primary

[siv-io]

Any chance I could work on this?

[Bonapara]

Sure @Hitarthsheth07, thanks for contributing!

[Bonapara]

Looks like #8266 removed the padding when the input has already some values:

Introduced

Before (desired)

• 4px padding around the input
• The button icon has an 8px margin from the right edge of the menu and a 4px margin from the input border.

[harshrajeevsingh]

@Bonapara I think it will be fixed by my PR #8451

[Bonapara]

Thanks, @harshrajeevsingh! Please ensure it still works with the first data entry that should use this input design.

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=44486-309242&node-type=instance&t=eIjo2j6BeyrW9ISl-11

[harshrajeevsingh]

@Bonapara I have already implemented this in my PR. According to issue #7225, The first data entry input won't have any padding & plus Icon button to add, but adding another from the dropdown will have both.

Is this desired behaviour?