Woocommerce-services: [WC 4.4 beta1] Create shipping label notice layout is a bit cramped

[juliaamosova]

Description:

The message, the Create shipping label button and the close icon of the Create shipping label notice on the order page feel a bit cramped:

Steps to reproduce:

I tested using WooCommerce 4.4 beta1 and WordPress 5.5-RC1-48681.

1. Start OBW.
2. Enter the US address in the Store details section during OBW.
3. On the Tell us about your business page, select checkbox next to Install recommended free business features so that WC Services could be installed.
4. Complete OBW.
5. Place an order on the site.
6. Navigate to the order page and see the notice letting you know that you can create a shipping label with the cramped layout.

Expected behavior:

I think more space (padding) between the text, button, and the exit icon will make it for a nicer experience. Alternatively, the Create shipping label button can be placed under the message and centered.

Environment:

OS: macOS Catalina 10.15.5
Browser: Chrome 84.0.4147.89 (Official Build) (64-bit)

[c-shultz]

Thanks for the report! Just a note that the fix for this will be in the wc-admin repo. We'll plan on taking care of it.

[juliaamosova]

Sounds good, thanks @c-shultz!

[elizaan36]

Yeah, I noticed this in the past couple days as well, thanks for creating this issue. Not sure if something's changed since the prompt was released.🤔

We'll have to tweak the layout of the prompt a bit because there needs to be padding between the text, button, and close icon. Keeping in mind smaller screen sizes as well.

In addition to the expected behavior notes Julia shared above, here the primary action should stay fixed on the right of the card rather than moving with the text.

Here the close icon shouldn't overlap the button.

[harriswong]

@elizaan36 Do we also need to change the "Create shipping label" blue button to red?

[elizaan36]

No, it's blue here because it's in the wp-admin view so the button should be consistent with WordPress elements.

[harriswong]

Here is how it would look like after the patch:

[harriswong]

Mouse over the button will result:

I am going to remove this red hover as well.

[elizaan36]

Looks perfect Harris, except one small thing. Can we move the text down so the padding is equal top and bottom to make the text vertically centered in the card. Thinking about the error message if there is one, it should move the other text up so that it's always vertically centered.

This is what the padding looks like now:

Should be equal top and bottom for all the elements in the banner, including illustration, text, and actions.

Great about removing the red hover state.

[harriswong]

@elizaan36 I have updated the margins/paddings to make the text vertically aligned. Removed the hover red effect. Also the error message is aligned.

[harriswong]

Created an issue(https://github.com/woocommerce/woocommerce-admin/issues/4938) in woocommerce-admin to track.
Created a PR in woocommerce-admin repository: https://github.com/woocommerce/woocommerce-admin/pull/4948.

[harriswong]

Merged. Closing.