Sync: Update modal design

[ivan-ottinger]

Related issues

• Part of STU-798
• Related Calypso PR: Staging Sites: Add subheading to Sync modal and adjust styling wp-calypso#106554

Proposed Changes

This PR is a part of STU-798 task where the goal is to align designs of Staging sites Sync modal in Calypso with Sync modal in the Studio app.

Here's the related Figma design: RToz6tIuQ7nlZrikBte4GU-fi-9870_110924.

In this PR we are adjusting the Sync modal in the Studio app:

• format What would you like to push/pull? subtitle
• remove horizontal lines between elements
• remove "from/to" text lines
• enclose the file tree inside a bordered box
• update and move the backup timestamp copy below the file tree
• add year to the backup timestamp
• adjust spacing of some of the modal elements to match the design

Before	After

Testing Instructions

1. Check out the PR branch and build the app with npm install && npm start.
2. Connect one of your WordPress.com test sites to your local Studio site.
3. Click on Pull / Push buttons and observe the updated Sync modal.
4. There should be no issues, the modal should work as before. The design should look good.

Pre-merge Checklist

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

[github-actions]

📊 Performance Test Results

Comparing deec66b vs trunk

site-editor

Metric	trunk	deec66b	Diff	Change
load	8228.00 ms	9941.00 ms	+1713.00 ms	🔴 20.8%

site-startup

Metric	trunk	deec66b	Diff	Change
siteCreation	14026.00 ms	14007.00 ms	-19.00 ms	🟢 -0.1%
siteStartup	4963.00 ms	3994.00 ms	-969.00 ms	🟢 -19.5%

---

Results are median values from multiple test runs.

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

[nightnei]

LGTM 👍

[katinthehatsite]

Thanks for the updates Ivan, everything looks good on my end 👍

One thing that I am wondering is that if we should have all the empty space when the file browser is not open:

For comparison, this is what we have on WP.com:

It is not a blocker, just something to consider to have more consistency.

[ivan-ottinger]

One thing that I am wondering is that if we should have all the empty space when the file browser is not open:

Good catch! We don't need to have so much empty space there and instead keep the modal compact. I have made the change in 85db6f5.

[katinthehatsite]

Good catch! We don't need to have so much empty space there and instead keep the modal compact. I have made the change in 85db6f5.

Thanks for making changes, it looks good to me 👍

[ivan-ottinger]

Thank you for your reviews, Vova and Kat!