Studio: Refresh the CTA for users without sites

[katinthehatsite]

Related issues

Closes STU-912

Proposed Changes

This PR adds a modal with call to action for users that don't have any WP.com sites:

Original design: RToz6tIuQ7nlZrikBte4GU-fi-10114_134320 (minus the image on the top as we are not supposed to have the image there.

I made a small change to the design with the modal title:

• firstly, we should not really use the logo in the title, it does not work well as it is too large to use with the default title size and it does not work with that type
• we could do the logo in the title but we need to do some CSS to achieve that look (which I can do if we really want that)
• I was trying to find a simpler solution that features the logo but does not require a whole lot of customizations (this is open for discussion along with the copy)

Testing Instructions

• Pull the changes from this branch
• Apply the following diff

index cc226545..5e39a4cd 100644
--- a/src/hooks/use-fetch-wpcom-sites/index.tsx
+++ b/src/hooks/use-fetch-wpcom-sites/index.tsx
@@ -233,8 +233,9 @@ export const useFetchWpComSites = ( connectedSiteIdsOnlyForSelectedSite: number[
                [ rawSyncSites, memoizedConnectedSiteIds ]
        );
        return {
-               syncSites: syncSitesWithSyncSupportForSelectedSite,
+               syncSites: [],
                isFetching: isFetchingSites.current,
                refetchSites: fetchSites,
        };

• Navigate to Sync tab
• Click on Connect site
• See the loading state on the button (this is new because instead of fetching the WP.com sites in the sync modal and seeing the loading state there, we are fetching them first and then deciding which modal to fetch)
• Confirm that you can see the modal for no sites appear
• Remove the diff that you applied
• Click on the button again
• Confirm that you see the sync modal

Pre-merge Checklist

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

[github-actions]

📊 Performance Test Results

Comparing 627bbdf vs trunk

site-editor

Metric	trunk	627bbdf	Diff	Change
load	11461.00 ms	15340.00 ms	+3879.00 ms	🔴 33.8%

site-startup

Metric	trunk	627bbdf	Diff	Change
siteCreation	22233.00 ms	26250.00 ms	+4017.00 ms	🔴 18.1%
siteStartup	7007.00 ms	8995.00 ms	+1988.00 ms	🔴 28.4%

---

Results are median values from multiple test runs.

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

[katinthehatsite]

@sejas I am leaving this as draft for now, just wanted to get your thoughts on design and copy for now. What do you think?

[sejas]

Sounds good! Thanks for working in this issue. I'll give it an early review.

[katinthehatsite]

@sejas One more question - I guess with the new design, we should now display this modal when the user clicks on either of those buttons, right?

[sejas]

Yes! both buttons will trigger the same modal if the user doesn't have any WPcom site.