Image and color updates: site address helper alert, site address header, and magic link UI

[jaclync]

This is a dependency for WCiOS color changes woocommerce/woocommerce-ios#1638

Summary

The diffs might look scattered, but the main goals of this PR are to make 2 images configurable and style some colors in these 3 screens:

• site address helper alert image
• site address icon in the header after entering the site address
• magic link image and bottom button styles

Changes

• Created WordPressAuthenticatorDisplayImages struct with configurable images in the authentication UI with default images, and passed it to initialize WordPressAuthenticator. These are the configurable images:
  • magicLink
  • siteAddressModalPlaceholder
  • For the default images, added magicLinkImage to UIImage extension
• Showed siteAddressModalPlaceholder from the configurable image displayImages.siteAddressModalPlaceholder in site address modal alert
• Added an outlet for the image on the Magic Link screen from EmailMagicLink.storyboard to NUXLinkMailViewController and set the image with displayImages.magicLink
• On the Magic Link screen NUXLinkMailViewController, configured the "Enter your passwword instead." button with text button styles
• In the site info header UI SiteInfoHeaderView, added support for Light/Dark mode switches by setting its image's rendering mode to alwaysTemplate in icon-url-field.imageset/Contents.json and its containing image view's tintColor to WordPressAuthenticator.shared.style.placeholderColor when the border is hidden
  • Updated linkFieldImage from WordPressUI pod to its own image asset

Testing

WCiOS

PR with example screenshots: woocommerce/woocommerce-ios#1655

WPiOS

you can check out this branch issue/wcios-1638-authenticator-testing and test the following flow in Dark and Light mode:

• Log out
• Tap "Log In"
• Tap "entering your site address" link at the bottom of the sheet
• Tap "Need help finding your site address?" --> the alert should look as expected
• Tap "OK" to dismiss the alert
• Enter a valid site address and tap "Next" --> the globe icon beside the site address should have the expected color (placeholder)
• Navigate back to the home screen
• Tap "Log In"
• Tap "Continue with WordPress.com"
• Enter a non-a8c email address and tap "Next"
• Tap "Send Link" --> the image and the "Enter your password instead." button should have the expected colors

Screenshots in WPiOS

Most UI should remain unchanged (you can see the changes in WCiOS PR screenshots woocommerce/woocommerce-ios#1655), the most noticeable change is the "Enter your password instead." button color on the Magic Link screen

screen	before	after
Site address help alert - Light
Site address help alert - Dark
After entering site address - Light
After entering site address - Dark
Magic link - Light
Magic link - Dark

[mindgraffiti]

✅Tested on WCiOS and I noticed one thing-- is the site info on dark mode blue on purpose?

✅ Tested on WPiOS. The site info is almost too dark to read:

(Feel free to ignore if those are expected colors.)

[jaclync]

@mindgraffiti thanks for raising the color contrast issue above, the colors you pointed out pre-exist. I made 2 commits that change the colors on WPiOS but I haven't gathered design review input. It'd be great to still get design input on the color changes, but I just reverted the 2 commits for WCiOS release today