Update Jetpack button and card styles to match WordPress 5.3

[gravityrail]

This is just an experiment I did to make the Jetpack buttons and borders look a bit closer to the "flat" styles coming in WordPress 5.3. They may, as a result, look a bit out of place on older versions of WordPress, but they already don't match those versions, so I think this is a net win.

I am not a designer, so I was really just eyeballing this and trying to make it look "closer", not perfect.

This also lays the groundwork for integrating @wordpress/components into our Jetpack admin pages without a style mismatch.

Changes proposed in this Pull Request:

• Update Jetpack styles to more closely match WordPress 5.3 styles.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Just slightly modifies styles

Proposed changelog entry for your changes:

• Update UI styles to fit in WordPress 5.3 core components

Screenshots

Here's a cropped before/after shot.

Before:

After:

A gallery of the WP 5.3 dash/posts, plus Jetpack before/after screenshots, is available here:

https://cloudup.com/czXdFjw6ykm

[jetpackbot]

	Warnings
⚠️	"Testing instructions" are missing for this PR. Please add some

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against b8890a5

[keoshi]

This is looking good! Below are some of the things I've noticed:

Set up Jetpack button

Not sure exactly what's the scope here, so don't know if this applies, but the green Jetpack button in the initial pre-connection banner has a border that the primary buttons in 5.3 don't (or are the same color as the bg to be exact). It also has the existing Jetpack :active styles, which make it look weird.

Buttons

:focus styles don't match what's in 5.3. Same goes for default buttons.

box-shadow:
    0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);

:active styles don't match what's in 5.3. Same goes for default buttons.

background: #00669B

Double borders

At least the Site Stats block appears to have a double border. It seems to be caused by a parent and child elements where both have a border property.

Border radii

The change in border radius seems to have some side effects, where adjacent cards have an undesired dip inside where they should be flush instead.

Margins

Some change in margins makes the external link detached from its card.

[MichaelArestad]

I did some pretty major changes:

• Updated button focus styles (only on primary/secondary)
• Removed the border radius on card
• Updated border colors on cards via box shadow (to avoid recoding everything)
• Updated card border colors on non-card components to match
• fixed a stats display bug (no more gap)

Suggestions for future updates and migration to WordPress components:

• One PR to import the components - then merge it in
• One PR per component - perhaps even more focused

I apologize for whoever has to review this, but it's ready for another review.

[MichaelArestad]

Scratch that. Found a bunch more styles that need updating in signup flows etc.

[MichaelArestad]

Should be good now. Items to review:

• Cards
• Buttons
• ButtonGroups
• Jetpack masthead
• Jetpack dashboard borders and buttons
• Jetpack settings
• Disconnected states
• JITM borders
• Settings group borders and buttons

[gravityrail]

Button style on the connection iframe doesn't match Jetpack's new style:

Since this is rendered on WPCOM, we could switch out button styles based on the jetpack_version flag passed in via the iframe URL.

cc @Automattic/poseidon - this should be opened as a separate issue, not part of this PR.

[gravityrail]

How do we feel about the iridescent green setup banner in this new style?

Might be out of scope for this ticket since the color is an unrelated style change.

[gravityrail]

Consider this comment a 👍 on this change (I can't leave an actual approval since I still own the PR)

[gravityrail]

@keoshi can you take another look and verify that @MichaelArestad fixed the issues you saw?

[MichaelArestad]

How do we feel about the iridescent green setup banner in this new style?

We're going to leave it. At least for this PR.

[joanrho]

@MichaelArestad Tested all of the following on WordPress 5.3-RC1-46561 running Twenty Twenty/twentytwenty-master theme:

• Cards
• Buttons
• ButtonGroups
• Jetpack masthead
• Jetpack dashboard borders and buttons
• Jetpack settings
• Disconnected states
• JITM borders
• Settings group borders and buttons

These are all looking great, but I caught a few minor things:

1. "Show me" button text on the Stats page is a bit off (See Stats page: fix misaligned text in "Show Me" button #13783)
2. dops-section-header height alignment could be evened out (See Admin page: fix misaligned dops section header heights in Jetpack Dashboard cards #13781)
3. (might be a core design issue) The border-radius of the "Add New" button on the tops of the Posts, Media, Pages, Themes, Plugins, pages is 2px whereas the styles everywhere else in 5.3 all are border-radius: 3px. Screenshot:

[keoshi]

Can confirm that number 3 is a core issue that’s currently being worked on!

[jeherve]

This looks good to me, but we'll need to add some of those CSS files back.

I also have a few other questions and remarks, but I don't think any of them are blockers.

---

Should the non-active color be bright blue like this?

It does not seem in line with the rest of the CSS in wp-admin:

---

It seems there is a bit of padding missing here:

---

Maybe that's just me, but it feels odd to go from the closed dropdown with shadows to the flat borders of the open dropdown:

---

The blue border around the input fields seem to be bright blue. Is that the same color as Core?

[jeherve]

We'll need those files on RTL sites, so I don't think we can delete them. If you do, you get 404 errors when we try to enqueue the file in wp-admin on sites using Hebrew or another RTL language.

[MichaelArestad]

Hmm. I thought these were generated during build so we didn't want to sync them. I didn't specifically remove this one (at least not intentionally). I'll add it back.

[MichaelArestad]

Added

[jeherve]

Looking good now. Merging.

This was addressed in the comments