Site Profiler: Update styles for Results Header section

[epeicher]

Related to https://github.com/Automattic/dotcom-forge/issues/7280
Resolves https://github.com/Automattic/dotcom-forge/issues/7384
Resolves https://github.com/Automattic/dotcom-forge/issues/7294
Resolves https://github.com/Automattic/dotcom-forge/issues/7383

Proposed Changes

• Create the Results Header component with correct styles
• Connect the buttons for open the report and check another site
• Add one of the backgrounds

Desktop	Mobile

Why are these changes being made?

• To create the new results header section as per design

Testing Instructions

• Apply this patch and in your local environment navigate to /site-profiler
• Add a URL and click on Check site
• Confirm the styles of the results header match Figma in Desktop and Mobile
• Click on the Access full site report - It’s free
• Check the report form is opened at the bottom
• Close the form
• Click on the Check another site link
• Check the page navigates to the landing page

Things to be done as part of other tasks:

• Add the correct icon next to the domain https://github.com/Automattic/dotcom-forge/issues/7281
• Change the background image based on score https://github.com/Automattic/dotcom-forge/issues/7298

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108768

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108768&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-108768&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~263 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
site-profiler      +1001 B  (+0.9%)     +263 B  (+0.9%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[gavande1]

The visual changes look good to me. Few nitpicks:

The header looks way up to the top bar; we could add some top margin.

The side areas look empty on the large display.

[gcsecsey]

The header looks way up to the top bar; we could add some top margin.

@gavande1 I updated the top spacing, now it looks like this:

Desktop	Above breakpoint	Mobile

The side areas look empty on the large display.

There's not much we can do in that regard, the whole page is designed with container width of 1015px in mind. The footer and other elements on the page also contain big empty areas on the sides if you view them on a wider screen.

[gavande1]

@gavande1 I updated the top spacing, now it looks like this:

That's looking better. What do you think?

There's not much we can do in that regard, the whole page is designed with container width of 1015px in mind. The footer and other elements on the page also contain big empty areas on the sides if you view them on a wider screen.

I understand. Let's stick to the designs and revisit them if necessary.

[WBerredo]

Couple of comments below but overall LGTM!

[WBerredo]

Nit: I've used success and alert on translations instead of good and bad, so we might want to unify the names.

[gcsecsey]

That's a good idea, we already have a Score type here:

wp-calypso/client/data/site-profiler/types.ts

Line 87 in f87c5fd

export type Scores = 'good' | 'needs-improvement' | 'poor';

What do you think about using that as a common name everywhere?

[WBerredo]

What do you think about using that as a common name everywhere?
I think this is indeed better.

I'll update my usages to use Scores values as well.

[gcsecsey]

Thanks, and I'll update the names here soon

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/header-section-score on your sandbox.