Styling of property select in GA4 notice on settings page looks off

Feature Description

Styling of the Property select dropdown is grey instead of blue as per designs.

Please see Figma comment here also

Related Asana task

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

Acceptance criteria

• When displayed within an info notice, any text input field should have similar appearance to the dropdowns, using a blue border etc.

Implementation Brief

• Update assets/sass/components/settings/_googlesitekit-settings-notice.scss to include the styles for .mdc-text-field similar to what’s being done for .mdc-select

Test Coverage

• No new tests to be added.

Visual Regression Changes

• N/A

QA Brief

Note that the fix is for the screenshot on this comment https://github.com/google/site-kit-wp/issues/3541#issuecomment-866716827 NOT the screenshot in the description

• Have a UA and a GA4 property set up in Analytics for a site
• Set up Site Kit on site
• Start Analytics set up
• select GA4 property
• Inside Notice component select “set up a new property”
• should now be in the same state as on the screenshot
• Observe text input is styled like selects (hover state, selected state, etc)

Changelog entry

• Update styles of controls in the GA4 notice box on the settings page.

[wpdarren]

QA Update: Pass ✅

• For a site with UA and a GA4 property set up in Analytics. When you select GA4 property and then ‘Set up new property’ in the notice component, the property, view and view name fields have blue borders, blue text. Can also confirm that the text input is styled appropriately.
• Checked this also in our primary browsers, i.e. Firefox, Safari, etc.

[felixarntz]

@aaemnnosttv @asvinb Thanks, makes sense. I’ve rephrased the ACs - and the IB already looks good ✅