Enhancement/8895 km setup cta banner

[zutigrm]

Summary

Addresses issue:

• Update the design of the Key Metrics setup CTA banner. #8895

Relevant technical choices

PR Author Checklist

• My code is tested and passes existing unit tests.
• My code has an appropriate set of unit tests which all pass.
• My code is backward-compatible with WordPress 5.2 and PHP 7.4.
• My code follows the WordPress coding standards.
• My code has proper inline documentation.
• I have added a QA Brief on the issue linked above.
• I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Code Reviewer Checklist

• Run the code.
• Ensure the acceptance criteria are satisfied.
• Reassess the implementation with the IB.
• Ensure no unrelated changes are included.
• Ensure CI checks pass.
• Check Storybook where applicable.
• Ensure there is a QA Brief.

Merge Reviewer Checklist

• Ensure the PR has the correct target branch.
• Double-check that the PR is okay to be merged.
• Ensure the corresponding issue has a ZenHub release assigned.
• Add a changelog message to the issue.

[github-actions]

Build files for aad01d3 are ready:

• Download development build
• Download production build

[github-actions]

Size Change: +58.4 kB (+3.24%)

Total Size: 1.86 MB

Filename	Size	Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css	57.7 kB	+127 B (+0.22%)
./dist/assets/js/35-********************.js	893 B	+1 B (+0.11%)
./dist/assets/js/36-********************.js	1.51 kB	-1.61 kB (-51.57%)	🏆
./dist/assets/js/googlesitekit-activation-********************.js	23.9 kB	+59 B (+0.25%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	72.6 kB	+438 B (+0.61%)
./dist/assets/js/googlesitekit-adminbar-********************.js	34.8 kB	+203 B (+0.59%)
./dist/assets/js/googlesitekit-api-********************.js	9.96 kB	-13 B (-0.13%)
./dist/assets/js/googlesitekit-components-gm2-********************.js	5.96 kB	-2 B (-0.03%)
./dist/assets/js/googlesitekit-components-gm3-********************.js	10.1 kB	+1 B (+0.01%)
./dist/assets/js/googlesitekit-data-********************.js	2.37 kB	-2 B (-0.08%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js	8.94 kB	-7 B (-0.08%)
./dist/assets/js/googlesitekit-datastore-site-********************.js	20.4 kB	+19 B (+0.09%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js	9.91 kB	-9 B (-0.09%)
./dist/assets/js/googlesitekit-datastore-user-********************.js	26.2 kB	+20 B (+0.08%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	83.4 kB	+614 B (+0.74%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js	157 kB	+1.31 kB (+0.84%)
./dist/assets/js/googlesitekit-modules-ads-********************.js	32.7 kB	+54 B (+0.17%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js	125 kB	+467 B (+0.37%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	171 kB	+1.07 kB (+0.63%)
./dist/assets/js/googlesitekit-modules-********************.js	22.1 kB	+8 B (+0.04%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.5 kB	+34 B (+0.15%)
./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js	21.9 kB	+203 B (+0.94%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js	58.7 kB	+54 B (+0.09%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	32 kB	+23 B (+0.07%)
./dist/assets/js/googlesitekit-notifications-********************.js	18.6 kB	+23 B (+0.12%)
./dist/assets/js/googlesitekit-settings-********************.js	128 kB	+45.5 kB (+55.17%)	🆘
./dist/assets/js/googlesitekit-splash-********************.js	91 kB	+869 B (+0.96%)
./dist/assets/js/googlesitekit-user-input-********************.js	64.3 kB	+534 B (+0.84%)
./dist/assets/js/googlesitekit-vendor-********************.js	321 kB	+19 B (+0.01%)
./dist/assets/js/googlesitekit-widgets-********************.js	88.2 kB	+1.88 kB (+2.18%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	62 kB	+188 B (+0.3%)
./dist/assets/js/runtime-********************.js	1.36 kB	+60 B (+4.62%)	🔍
./dist/assets/js/37-********************.js	1.57 kB	+1.57 kB (new file)	🆕
./dist/assets/js/38-********************.js	1.59 kB	+1.59 kB (new file)	🆕
./dist/assets/js/39-********************.js	3.11 kB	+3.11 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.8 kB
./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css	846 B
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	8.2 kB
./dist/assets/js/31-********************.js	2.76 kB
./dist/assets/js/32-********************.js	2.25 kB
./dist/assets/js/33-********************.js	3.64 kB
./dist/assets/js/34-********************.js	935 B
./dist/assets/js/analytics-advanced-tracking-********************.js	901 B
./dist/assets/js/googlesitekit-consent-mode-********************.js	25.6 kB
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.08 kB
./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js	646 B
./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js	624 B
./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js	630 B
./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js	712 B
./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js	675 B
./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js	634 B
./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js	657 B
./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js	633 B
./dist/assets/js/googlesitekit-i18n-********************.js	3.93 kB
./dist/assets/js/googlesitekit-polyfills-********************.js	378 B

_{compressed-size-action}

[zutigrm]

Failing jest test has an open issue #9316 and is not related to this change

[eugene-manuilov]

@zutigrm looks like the new design doesn't match how it looks in Figma. Could you please check it again and ensure that it looks correctly.

[zutigrm]

@eugene-manuilov hm, not sure what you mean, for example here is the screenshot from the desktop layout from figma design

Here is the screenshot of the KMW widget from the dashboard of the current branch:

Also for other screens, styling is following the designs from figma. The only difference I just noticed is the that your word is falling to the second line in figma, so I did quick adjustment for that.

Perhaps you checked different figma link?