Fix spacing around domain transfer lock icon

[wojtekn]

Related to https://github.com/Automattic/dotcom-forge/issues/9789

Proposed Changes

I propose to fix the spacing around the domain transfer lock icon on the manage domain page and in the transfer form.

Why are these changes being made?

The spacing between the icon and text is incorrect.

Testing Instructions

1. Open Calypso locally or use a Calypso Live link
2. Navigate to the /domains/manage page
3. Locate a domain and click it
4. Confirm that spacing is fixed

Before	After

Before	After

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126285

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126285&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-126285&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[fredrikekelund]

Works as expected 👍 I would take the opportunity to also remove the viewBox attribute on this line, though. The icon will align better with the baseline of the text if we do that.

wp-calypso/client/my-sites/domains/domain-management/components/domain/domain-info-card/transfer/index.tsx

Line 43 in 4dc9d32

<Icon icon={ lock } size={ 16 } viewBox="0 0 22 22" />

Same thing here (we could also change the size attribute to 16)

wp-calypso/client/my-sites/domains/domain-management/transfer/transfer-page/index.tsx

Line 275 in cd54f07

<Icon icon={ lock } size={ 15 } viewBox="4 0 18 20" />

[wojtekn]

@fredrikekelund, thanks for the suggestion. I tried that, but the icon became distorted. I changed the size and viewPort for one of the icons to make them consistent, though.

[fredrikekelund]

I tried that, but the icon became distorted

I also tested it and didn't notice any distortion 🤔 Did you see that with both icons or just one?

cc @matt-west for any design advice