Feature Description

The splash screen will be updated to follow the Figma designs for mobile and tablet viewports, with a shorter version of the screenshot shown below the CTA.

For reference, see the splash screen mobile viewports section in the design doc, and the Figma design.

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

Acceptance criteria

• The Site Kit splash screen should be updated to match the Figma designs for mobile and tablet viewports.
• For mobile and tablet viewports, the screenshot should be cut below the All Traffic widget and appear below the CTA.
• These changes are gated behind the setupFlowRefresh feature flag.

Implementation Brief

• Update the SetupFlowSVG component to render this SVG for small and tablet breakpoints.
• Reverse the order of the Cell components in the SplashContent component, and provide a new class to the Cell component containing the screenshot, e.g. .googlesitekit-setup__screenshot, which is based on the .googlesitekit-setup__icon class but doesn't set the order property.
  • Currently the Cell components are rendered in the wrong order, with the .googlesitekit-setup__icon class reversing the order for desktop viewports. This is unnecessary, and the above change removes/simplifies this.
• Add the .googlesitekit-setup__screenshot to the _googlesitekit-splash.scss file, and further update the SCSS as needed to meet the design

Test Coverage

• Fix any failing tests, and update VRT reference images for the relevant scenarios.

QA Brief

• Ensure that the splash screen design conforms to Figma design for mobile and tablet viewports.
• There should be no change for desktop viewport.

Changelog entry

• Update the splash screen for mobile viewports in the new setup flow.