Wp-calypso: Store onboarding - Task list CTAs have different widths

[Garance91540]

Steps to reproduce

1. Starting at URL: https://wordpress.com/store/test1991256687048.blog
2. All CTAs ("Review Payments", "Review Taxes"...) have different sizes

What I expected

I expected all these CTAs to be the same size for a more consistent UI

Screenshot / Video

https://cld.wthms.co/Sh3Skc

[Garance91540]

Here's a proposed design solution

@davemart-in @sixhours how can I validate this design change decision?

[scruffian]

cc @Automattic/muriel, re the sea of pink buttons!

[Aurorum]

There's a PR in #33825 regarding the primary buttons. :)

[sixhours]

@Garance91540 I think this is an improvement, for sure. I'd be interested to see how fixed-width buttons work when the buttons get translated into other languages -- would the text wrap, making the buttons larger/taller? I don't think that's a problem, but something that should be tested during implementation.

[MichaelArestad]

I'm hesitant to make the buttons the same size for a couple reasons:

• Depending on the language, the string length may change and become too long (and likely wrap)
• It's hard to determine what "the" width should be since some actions might just be "Do it!" and others longer like "Connect your social accounts."

I do think it is much better visually, but I'm not sure how feasible it is to implement.

Perhaps, by making the buttons secondary, the jagged row of buttons won't be as noticeable?

[Garance91540]

I was wrongly focusing on this store set up screen only, not on all the primary CTAs. I do think it will be difficult to apply a set width to all content type!

@MichaelArestad I think your suggestion to set these CTAs as secondary will make the width inconsistency less noticeable, so will close this issue and defer to your solution!