Update Blueprint details modal styling

[ivan-ottinger]

Related issues

• Related to STU-1151

Proposed Changes

• update design of the Blueprint details modal
• add periods to Blueprint validation messages

Before	After

Note

Please note that the originally-proposed design (RToz6tIuQ7nlZrikBte4GU-fi-10352_72355) is relying on a custom Calypso Notice component which isn't available in @wordpress/components. There's a plan to move this custom component into @wordpress/io which we can then use in Studio for all the warning notices as well.

Because of that, I did not introduce any new custom notice component to Studio. Instead, I adjusted the styling of the Blueprint validation warnings to match the custom Notice component.

Currently proposed changes also use standard WordPress caution instead of a custom one that will come with the new Notice component.

Testing Instructions

1. Check out the PR branch and build the app with npm install && npm start.
2. Navigate to Add site → Start from a Blueprint and then select a Blueprint file that has some unsupported steps. For instance, you can pick test-multiple-warnings-blueprint.json from 39ef1-pb/#xml.
3. Click on the View details button and review the new design.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[github-actions]

📊 Performance Test Results

Comparing cf0a37d vs trunk

site-editor

Metric	trunk	cf0a37d	Diff	Change
load	20150.00 ms	15820.00 ms	-4330.00 ms	🟢 -21.5%

site-startup

Metric	trunk	cf0a37d	Diff	Change
siteCreation	34157.00 ms	30370.00 ms	-3787.00 ms	🟢 -11.1%
siteStartup	14158.00 ms	12138.00 ms	-2020.00 ms	🟢 -14.3%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[gcsecsey]

Thanks for updating the styles @ivan-ottinger! 🙌 These changes LGTM and look much nicer.

[gcsecsey]

Nit: WDYT about updating this copy to inform the user how they can set the site URL? Eg. Custom site URLs in blueprints are ignored, you can set the site URL on the Settings tab.

[ivan-ottinger]

Good idea. I have updated the copy in c4d23ec. What do you think about the following?

Custom site URLs in blueprints are ignored. You can set a custom site URL on the Settings tab.

[gcsecsey]

Perfect! 🚢

[nightnei]

The code LGTM and UI looks nice 👍