Domains: Mobile improvements

[ollierozdarz]

Edit: Some of the changes will be added in #53768 (follow up of #53700)

Based on the current performance of the refined reskin onboarding flow, let's make the following changes to help increase the likelihood of reaching parity (and beyond) with control.

Main improvement areas:

• Change the order of the 'Already own a domain?' and 'Get a free plan' information to now be places at the bottom of the list of domains. This will suit the same hierarchy as the desktop version, and is Iess important than a user finding a domain quickly
• Change the layout of each domain offering to be more like control, where we have stacked information and a full width button for each
• Make the domain name font-size bigger (from a default 14px to 16px)
• Make the adequate style, margin, and padding adjustments outlined in the Figma File
• Make the 'View more domains' link, a button.

[StefanNieuwenhuis]

Currently, the marketing copy hides the search results below the fold.

@ollierozdarz, what do you think of moving the marketing copy below the search results? See p1620915194324400/1620913276.320500-slack-C01VA100LEA

[StefanNieuwenhuis]

@ollierozdarz , another one is that the marketing copy is spread over 2 columns. WDYT? Does its layout need to change as well?

Another issue is that the off-margins around the search bar and is the search bar in the right place?

[ollierozdarz]

Hey @StefanNieuwenhuis,

Currently, the marketing copy hides the search results below the fold. @ollierozdarz, what do you think of moving the marketing copy below the search results?

Yep, if you check out the latest mobile design in the description (and below), we'll put the marketing copy at the bottom underneath the results once they're populated:

Another one is that the marketing copy is spread over 2 columns. WDYT? Does its layout need to change as well?

The implementation for tablet view should look similar to below, with the input staying in the same place.

Another issue is that the off-margins around the search bar and is the search bar in the right place?

Yep, it looks off by a lot.

The tablet view once the domains list is populated will need some more thought, but let's leave this until I'm back from AFK and I'll design a better solution from our latest learnings.

[razvanpapadopol]

Thanks for your input, @ollierozdarz 🙌🏼

we'll put the marketing copy at the bottom underneath the results once they're populated

@StefanNieuwenhuis, let's do the same also for tablet view (when we have marketing on 2 columns) and we can always improve later.

[razvanpapadopol]

https://github.com/Automattic/wp-calypso/pull/53700 was reverted in https://github.com/Automattic/wp-calypso/pull/53820 to fix the following regressions on Domains step:

• position of the "Get a free one-year domain..." banner
• spacing at the bottom, before "show more" button

Expected

UI regression