UX/UI issues discovered on Thank with Google module

[wpdarren]

Bug Description

While running through my test plan for Thank with Google, I noticed a number of styling / missing images from the module that were not appearing when we initially completed the QA. These will be brought up at the bug bash so ideally, it would be good to get these fixed and not have them as known issues.

Non-issues

1. The background colour of the CTA on the pending verification splash screen. The colour is #161B18 rather than #3C7251

Issue 2 and 3 are part of the fix in #5627

2. The images on the splash pages are no longer appearing as you can see from the screenshot above. The screenshot below is what is appearing on Figma designs and were there previously. I am using 1.90.0 of the tester plugin but I know we have a new version so it could be possibly linked but unsure.

3. The images within the image radio buttons are no longer appearing when customizing TwG. Also the size of the two buttons are no longer the same height.

4. When using Safari, the colour border is square instead of round like on Chrome and other browsers. We've had this issue with other elements of Site Kit (i.e. chip navigation on dashboard), but thought it was worth highlighting.
   

5. Extra padding in setup and settings

   Screenshots

   Setup with extra padding
   
   Settings view with extra padding
   
   Settings edit with correct padding
   
   Example setup with correct padding
   

6. Minor layout shift when selected Prominence choice changes

---

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

Acceptance criteria

• The elements of the TwG setup/settings should display consistently across major supported browsers, specifically regarding the use of rounded corners which all support (currently some elements appear with square corners/borders in Safari)
• TwG setup and settings views should have surrounding whitespace consistent with other modules
• There should be no shifting of content when toggling between choices for the CTA overlay "Prominence"

Implementation Brief

The border radius issue in safari is caused by the browser not applying border radius styles to outline-properties in CSS. This can be remedied by refactoring the outline to use a pseudo element instead.

In assets/sass/components/global/_googlesitekit-image-radio.scss:

• Add a new ::after pseudoelement to the .mdc-image-radio__background selector
• Position it absolutely and give it the same border radius as the element in .mdc-image-radio__content
• Remove the outline-property from the .mdc-image-radio__content selector and add it to the ::after element as an border
• Update the hover, active and focused state accordingly, changing the outline to the border property on the ::after element

In assets/sass/components/thank-with-google/_googlesitekit-twg-color-radio.scss:

• Add the 50% border radius property to the aforementioned pseudo element when its used in a two-color radio

The layout shifting is caused by the outline getting thicker in the checked state, and the border getting thinner to compensate for it.
When refactoring the outline to a pseudo-element, ensure that the combined width of the white border on mdc-image-radio__content and the green/gray border on .mdc-image-radio__background::after is the same for both the checked and unchecked variants.

The extra padding is caused by the use of nested grid elements in the module, both adding 24px of padding inside of the module.
In assets/js/modules/thank-with-google/components/settings/SettingsView.js:

• Refactor the use of <Grid>...</Grid> to closer match the implementation of the SettingsView component in other modules (e.g: assets/js/modules/tagmanager/components/settings/SettingsView.js, assets/js/modules/analytics/components/settings/SettingsView.js)

Test Coverage

QA Brief

• Observe both TwG Setup and Settings page from Safari and other browser.
• Rounded corners should work across the browser on Image and Color Radio Buttons.
• Match with latest figma design.
• There should no longer be any layout shift on changing Prominence value

Changelog entry

• Update Thank with Google setup and settings views for consistency with other modules and major browsers.

[eclarke1]

Added P1 label as a nice to have for bug bash.

[aaemnnosttv]

Thanks @wpdarren

Regarding # 1 – this is intentional and part of the design for the "Pending Approval" step in Figma.

As for # 4 – is this still a problem with other browsers for the other elements you mentioned or we were able to fix it? It's not ideal but I feel like this should be doable in Safari as well. Definitely not a launch blocker 😄

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• Observed both TwG Setup and Settings page from Safari and Chrome (desktop and mobile)
• Rounded corners work across the browser on Image and Color Radio Buttons.
• There is no longer any layout shift on changing Prominence value.
• Checked that setup and settings page match the figma designs.

Screencasts

twg-1.mp4

twg-2.mp4