Domains: Usability fixes for the edit domain contact screens

[hambai]

Changes proposed in this Pull Request

• Remove the "Domain Contacts" card title.
• Add a new paragraph of copy that reads "Your domain contact information"
• Remove the contact information title above the contact information.
• Move the Privacy protection toggle under the contact information (Make sure there's some space between the two).
• Edit the help text so that it only reads "Learn more about private registration and GDPR protection."
• Add a space between the edit contact info and the card like on our other screens.
• Move the "Domain owners are required to provide correct contact information." copy to the edit contact info screen

Contacts and Privacy (before):

Contacts and Privacy (after):

Edit Contact Info (before):

Edit Contact Info (after):

Testing instructions

• Open Contacts and Privacy and Edit Contact Info and verify that things are showing properly. Also check that everything is still working as expected - enable/disable privacy and etc.

[matticbot]

Test live: https://calypso.live/?branch=update/domain-edit-contact-form-usability-fixes

[a8ci18n]

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 34 times:
translate( 'Domain Contact Information' ) ES Score: 7
See 1 additional suggestions in the PR translation status page

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~9 bytes removed 📉 [gzipped])

name     parsed_size           gzip_size
domains       +237 B  (+0.0%)       -9 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[klimeryk]

Tested and LGTM - tried different domains both supporting and not privacy protection on a variety of domain partners.

One thing I'd suggest is that without the gray header, the box the contact details show up in is very hard to distinguish from the white background:

What do you think about setting the background color of the whole box to var( --color-neutral )? Or some other way of making sure this contact block stands out a bit more from the rest of the layout?

[fditrapani]

I tested this as well and it looks good. I like @klimeryk's suggestion about changing the background colour. That'll differentiate it more from the rest of the content.

[fditrapani]

The update looks great! Thanks for that suggestion @klimeryk! 🚢