Sidekick image very small on GA4 dashboard prompt banner

[mxbclang]

Description

As reported by @bethanylang and @hussain-t in Bug Bash:

The sidekick image on the GA4 dashboard prompt banner is very small on multiple screen sizes:

1280x1040

1920x1080

---

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

Acceptance criteria

• The WinImageSVG (ga4-success-green) image on the SwitchGA4DashboardViewNotification component should be displayed larger to match the Figma design.
• It should be hidden on smaller (mobile) screens.
• The image display and hiding behavior should be implemented similarly to the GA4 SuccessBanner component.

Implementation Brief

In assets/js/components/notifications/SwitchGA4DashboardViewNotification.js:

• Pass the GA4SuccessGreenSVG as a functional (component) reference to the WinImageSVG prop like, () => <GA4SuccessGreenSVG />.

Test Coverage

• No new tests are to be added.

QA Brief

• Set up Site Kit.
• Without the ga4Reporting feature flag enabled, set up the Analytics module with both UA and GA4.
• Enable the ga4Reporting feature flag.
• Go to the Site Kit dashboard and observe the "Switch to GA4 Dashboard View" banner notification.
• Verify that the sidekick image is larger according to the Figma designs mentioned in the ACs.

Changelog entry

• Fix the svg image size issue on the "Switch to GA4 Dashboard View" banner.

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ⚠️

I have a few questions:

1. For mobile the decision was to hide the Sidekick image, but on tablet it is still appearing and is small. Do you think we should hide the image on tablets as well?

2. On the figma design there seems to be larger space between the image and the end of the banner. I think it's aligned too far to the right side of the banner. Thoughts welcome on this, but it does look odd alignment on my test site.

My test site:

Figma design

[tofumatt]

@wpdarren I think for tablets the image is fine; we shouldn't be extending the text out that far on tablets anyway for readability, so I think it's fine to add the image there.

What resolution are you using/what is the size of your browser in that screenshot?

Honestly right-aligning it is probably more flexible as the screen grows and I personally prefer it slightly, as otherwise the image feels like it's "floating" in the center a bit to me. But I don't have a strong opinion one way or the other.

I'd probably say this is fine—I think most other images are right-aligned. It also aligns with the right-aligned menu as well.

I think we should leave it as-is for now 🙂

[wpdarren]

QA Update: ✅

Verified:

• The WinImageSVG image on the SwitchGA4DashboardViewNotification component is displayed larger.
• It is hidden smaller screens but does appear small on tablets.

Screenshots

[aaemnnosttv]

LGTM 👍