Fix checkmark fading animation when choosing a site design

[twstokes]

Fixes #16690

Description

This PR corrects a minor issue where the white background view behind the blue checkmark image would cause a flickering effect due to how their opacities would blend. The solution proposed here is to combine both views into one container view.

To test

Choosing a design

1. In the "My Sites" view, tap the "+" symbol at the top right.
2. Choose "Create WordPress.com site".
3. Tap different designs to toggle the checkmark icon animation.
4. Observe that the checkmark's location is the same relative location as before to the top right corner of its view.

Choosing a layout

Prerequisites: This view may be shown with all configurations, but definitely works with WordPress.com sites and a theme from WordPress (e.g. Alves)

1. In the "My Sites" view, tap Pages, then the blue button to create a new page.
2. Tap the blue button to show the "Choose a Layout" view.
3. Tap different layouts to toggle the checkmark icon animation.
4. Observe that the checkmark's location is the same relative location as before to the top right corner of its view.

Before

Simulator.Screen.Recording.-.iPhone.13.-.2022-02-02.at.17.02.46.mp4

After

Simulator.Screen.Recording.-.iPhone.13.-.2022-02-02.at.16.59.57.mp4

Other notes

Eventually we can move to UIImage.SymbolConfiguration (needs iOS 15+) and define the symbol's colors, which is a simpler solution.

Regression Notes

1. Potential unintended areas of impact

• The site design picker when creating a new WordPress.com site from the app.

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   I tested the steps above manually on a device.

3. What automated tests I added (or what prevented me from doing so)
   None.

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[jkmassel]

You can test the Jetpack changes on this Pull Request by downloading it from AppCenter here with build number: pr17868-a001683. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[jkmassel]

You can test the WordPress changes on this Pull Request by downloading it from AppCenter here with build number: pr17868-a001683. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[antonis]

Great work @twstokes 👍
I tested this on a iPhone SE 2020 (iOS 14.7.1) and everything worked as expected. The code changes also look consistent to me 🎉

I also validated that the fix also applies to the page layout picker selector 👍

Page layout picker before

before.mov

Page layout picker after

after.mov

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

[twstokes]

I also validated that the fix also applies to the page layout picker selector 👍

Thanks for highlighting that @antonis! I'll update the testing steps to include that view as well. 🙇