Improve the title and style of some upsell modals

[enricobattocchi]

Context

Summary

This PR can be summarized in the following changelog entry:

• Improves the title and style for some upsell modals.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Edit a post
• click on "Add related keyphrases"
  • check that the modal displays the new title and the new style from the Figma (the content stays the same)
  • check that the focus is not on the ❌ anymore
• click on "Internal linking suggestions"
  • check that the modal displays the new title and the new style from the Figma (the content stays the same)
  • check that the focus is not on the ❌ anymore
• open the "Content blocks" collapsible and click on any button there
  • check that the modal displays the new title and the new style from the Figma (the content stays the same)
  • check that the focus is not on the ❌ anymore
• edit an Elementor post, add some content to trigger the readability analysis and visit the Yoast SEO sidebar
• click on the eye button to open the modal
  • check that the modal displays the new title and opening content and the new style from the Figma (the content stays the same)
  • check that the focus is not on the ❌ anymore
• visit the Yoast SEO General page
• shrink the window to make it very narrow
• check that the green circle bullet points with ✅ preserve their size.

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.
  UX has already approved the changes so only a broad check is needed

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/ux/issues/325
Fixes https://github.com/Yoast/ux/issues/332
Fixes https://github.com/Yoast/ux/issues/333

[coveralls]

Pull Request Test Coverage Report for Build 1552191590baef1179c1b782bb129be2bc986571

Details

• 0 of 2 (0.0%) changed or added relevant lines in 2 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage increased (+0.5%) to 53.241%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/components/modals/UpsellModal.js	0	1	0.0%
packages/js/src/shared-admin/components/premium-upsell-list.js	0	1	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/components/modals/UpsellModal.js	1	6.25%

Totals
Change from base Build 8084f8e41b2673014c89ca26922287265406ca4d:	0.5%
Covered Lines:	31974
Relevant Lines:	60315

---

💛 - Coveralls