Sites Management Page: Update style of empty states

[p-jackson]

We show a helpful message when the user has no sites at all. We just need to update its style so they match the mockup (which will bring them in line with the standard <EmptyContent> style we use elsewhere in Calypso)

Mockup looks like this:

Current implementation looks like this:

You can see other examples of how it should be styled at

• https://wordpress.com/domains/manage/{{ site slug }} (when the site has no domains)
• https://wordpress.com/woocommerce-installation/{{ site slug }} (when the site has a business plan but isn't a store)

Done is:

• [ ] Font sizes match what you see in the empty Domains and WooCommerce pages listed above
• [ ] Heading should use recoletta font
• [ ] Update the icon to match the Figma mockup (I've attempted to export it myself and made it available here: pdKhl6-Au-p2#comment-487)
• [ ] The status specific empty states don't use recoletta or have a graphic, but confirm that their vertical alignment is consistent
• [ ] Confirm final wording with @SaxonF

[halleshubham]

how to access the Figma mockup: 184522-pb ?

can I pick this up ?

[p-jackson]

Hi @halleshubham, thanks for your interest in the new sites management page!

This task in particular will be a bit tricky without access to Figma, which isn't accessible outside of Automattic. So I'd leave this one for someone else. If you are interested in helping out #66210 might be a good one, although no pressure of course.

[halleshubham]

sure! @p-jackson

[danielbachhuber]

@p-jackson Is this issue complete as of #66492?

[sejas]

@danielbachhuber Yes, I think you are right. This issue is already done.

• I'm closing this issue since it was done in https://github.com/Automattic/wp-calypso/pull/66492

Here I attach the screenshots of the current status of the combination between empty states and the dropdown filter:

No sites at all

Public

Private

No Coming soon