CustomGradientPicker / Cover: Update UI

[ItsJonQ]

Description

This update adjusts the UI of the CustomGradientPicker, specifically as it appears in the Cover block.
This is a follow up to Design suggestions from #19582 (comment)

How has this been tested?

Tested locally in Gutenberg

Screenshots

Solid Color

Gradient Color

Notes

These were the original design update suggestions:

• Let’s minimize those tabs (Solid color | Gradient) as much as possible. They’re too big right now.
• Change the word "Overlay" to "Color".
• Remove the border around the gradient type icons.
• Provide more vertical padding between all the parts. (24px or some other CSS variable close to that)
• Make sure the Angle number field and the "Clear" button align along the right side nicely.

I was able to make all of the updates with the exception of the Clear button. The reason is because of how the various UI pieces are composed together. The button actions area, which contains clear, is separate from the color/gradient controls:

Making this update would require refactoring across multiple components. It's doable, but perhaps something to tackle after WP 5.4.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ItsJonQ]

Coordinated with @mapk + @karmatosed for some new icons for the Gradient Type selector.

Above are the new icons with an update for selection UI (selected, hover, focus)

[mapk]

Thanks for your work, @ItsJonQ!

I noticed there's a bit of overlap on the two Gradient Type buttons. Is it possible to position these side-by-side instead of having the overlap?

[ItsJonQ]

@mapk Thanks for feedback! I'll give it a shot.

Just a heads up, from a code perspective, the updated button styles are a bit messy. This is due to the fact that we don't have a lot of direct control over them, and styles (both core and custom) and mixing together.

Ultimately, we'll do whatever is best for UI/UX.
I just wanted to leave a note here for future reference.

[mapk]

If my next request requires a change beyond just this specific part, it can be disregarded.

Borders that use a border-radius need to account for inner borders that use a border-radius too. As the inner borders get smaller, they should have a smaller border-radius. So the focused state of the Gradient Type icons has a border-radius of 4px. Since this happens, the selected state of the icons (inner border) should probably have a radius of 2px. This improves the visual relationship.

But if this is bigger than this PR, we can handle that elsewhere.

Current:

Proposed:

[mapk]

Just a heads up, from a code perspective, the updated button styles are a bit messy.

This probably applies to my last comment as well. I hear ya.

[ItsJonQ]

@mapk No worries! I was able to make the changes. How is this?

It shows the inner/outer borders + border radius, as well as the spacing between each button.

[jorgefilipecosta]

From the code size, these changes seem correct. Awesome work here in record time 👍
Let's wait for an ok from @mapk and ship this change :)

[mapk]

Beautiful!!! LGTM Thank you, @ItsJonQ !