WooPay checkout appearance preview UI refactor

[frosso]

Description

Update the appearance of the "WooPay > Checkout Appearance" section to the new preview

https://github.com/Automattic/woocommerce-payments/issues/6639#issuecomment-1674143256 Figma link: nngbiDUWyJa7fYcpiE9Jdu-fi-5649_4058

Acceptance criteria

• See https://github.com/Automattic/woocommerce-payments/issues/6639#issuecomment-1674143256
• "Store logo on checkout" heading is renamed to "Checkout logo"
• "Store logo on checkout" help text is renamed to "Upload a custom logo. For best results, upload a horizontal image with white or transparent background. HEIC, WEBP, SVG, PNG, or JPG. Recommended width: 512 pixels minimum." (no need to enforce the 512 pixels)
• Update the WooPay checkout preview as displayed in the screenshot above

[pierorocca]

@frosso do you foresee this being picked up in the upcoming sprint? It fell off my radar during the last planning session.

[frosso]

@pierorocca I didn't add it to the sprint's scope, but we might be able to tackle it maybe during maintenance. Would you consider this a higher priority to maintenance?

[bborman22]

@pierorocca Just curious, do we have a design or asset for the new page preview visual? In the current implementation it's an SVG that allows us to drop our content on it dynamically and would likely be looking for the same sort of treatment.

[pierorocca]

@bborman22 should be able to grab the svg from the Sigma here https://github.com/Automattic/woocommerce-payments/issues/6639#issuecomment-1678403303

[bborman22]

Perfect, thanks I had missed the link on that comment!