[CAL-1477] Rounding, frames and radio buttons of the booking forms not consistent

[RainerZufall9393]

1. The rounding of the frame for the phone number is different from the other fields.
2. For the "Name" field, the frame is much thinner than for the other input fields and is displayed only in the branding color. For the other fields there is an additional black frame next to the branding color.
3. The radio buttons do not adopt the branding color, they just stay black.

https://user-images.githubusercontent.com/126205884/222868015-51c26cc0-d31a-41eb-b6b1-d51c9e18eb77.mov

_CAL-1477

[sean-brydon]

Nice spots! Will work on a fix for this!

[sean-brydon]

Will fix within our new token update - makes this a lot easier than fixing twice! Soon!

[PeerRich]

@gitstart-calcom here is the figma: https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS?node-id=309-44674

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/calcom/1/tickets/CALCOM-7508

[Toledodev]

Hey @PeerRich @sean-brydon , I believe that we should upgrade the "react-phone-numer-input" lib to "react-phone-input-2", I've been tried to change the flag component style but I think that's not possible on the current lib. This is the entire component:

Should be this:

What do you think?

[PeerRich]

react-phone-input-2 looks good. any insights whats different? As long as the design is like its supposed to be in figma and the different package is not crazy bigger i dont mind switching cc @zomars

[zomars]

Fine by me