Hi folks! While working on the onboarding flows for the new product form (#36161, #38476), I made some changes to the visual design of the CES modal. My main goal was to slim it down so it doesn't require scrolling as it does currently (it's important because we're adding a new field which doesn't help).

Note: changes to the CES modal should be backwards compatible, given this is just styling this shouldn't be a problem, but thought I mention it :)

Design

• Regular CES: lj4AUMJnpMtUe7XqyvOONq-fi-1334-117726&t=yu7X7OKdvZanMoIj-4
• Opt-out survey: lj4AUMJnpMtUe7XqyvOONq-fi-1334-116559&t=yu7X7OKdvZanMoIj-4

Acceptance criteria

• Modal's border-radius is 8 px.
• Gap between fields is 24 px.
• We no longer show the help icon, line separator, and description at the top.
• Question and field labels are consistent and use Gutenberg's regular field label styling (11/16, uppercase, Gutenberg-900).
• The emoji button height is smaller (104 px -> 80 px).
• The emoji button label is now 11/16, sentence case, Gutenberg-900 (was 13/16).
• The first question has an updated copy to Product form is easy to use.
• The bottom bar (the one with the Cancel and Send buttons) is fixed, so users will always see it at the bottom of the modal if scrolling is required.