Design updates for Embedded Components

[dmallory42]

Fixes #9360

Changes proposed in this Pull Request

Note: we should hold off on merging this until the dev/include-connect-js PR is merged, and then target development.

This PR contains updates to the embedded onboarding flow to match the i4 designs: xO8YdpKfaVoP2d8NvweZ5I-fi-1095_43454

• Adds a border under the navbar.
• Updates the color and text of the button text on the nav bar to use theme colors.
• Update to the logo.
• Add left and right padding to add more separation
• Update the Stripe modal to use the Woo purple

Testing instructions

• Launch a new site with this branch using Jurassic Ninja (quick link)
• Go to the WCPay Dev Tools on the new JN site and enable the Embedded KYC checkbox, then save the change.
• Start a new onboarding. You should see the Embedded KYC as part of the MOX flow.
• Verify the page looks as expected, and the designs match the figma.

Screenshots:

---

• Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Post merge

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[oaratovskyi]

@dmallory42 I've modified logo and the cancel button for the continue KYC page as well! Tried to refactor it, but it's tricky, so a bit of code duplication.

[timmy5685]

@dmallory42 - i don't know if this is related but when I create a store using the JN link above - the connect page is showing the sandbox mode notification at the top of the page before I do anything.

Is that expected? The Stripe flow is also showing test mode - so maybe it's the way you set the JN to work?

Aside from that - when I try to run through the flow and complete the Stripe OTP step - I get a session expired message and can't proceed. When I click add information again the window pops for a second and then takes me right back here.

[mordeth]

i don't know if this is related but when I create a store using the JN link above - the connect page is showing the sandbox mode notification at the top of the page before I do anything.

Is that expected? The Stripe flow is also showing test mode - so maybe it's the way you set the JN to work?

@timmy5685 The behavior you’re observing is expected due to the presence of the Dev Tools plugin, which is enabled by default on all JN sites created from the GitHub link and forces sandbox/dev mode. If you disable the Dev Tools plugin, both the sandbox mode and the notification should disappear.

[timmy5685]

ok - thanks for confirming @mordeth!

So that is also what is causing the expired session issue?

[dmallory42]

So that is also what is causing the expired session issue?

No, I don't think so - I'm looking into this one 🙂 do you remember if you left the page open for a while when you saw that error, by any chance?

[dmallory42]

Just to confirm, we merged a PR last week that should address any session issues. Please let us know if you spot anything like that again.

[oaratovskyi]

Just to confirm, we merged a PR last week that should address any session issues. Please let us know if you spot anything like that again.

cc @timmy5685

[oaratovskyi]

@orcunomattic could you please take a look and review it design-wise? 🙏

[orcungogus]

@oaratovskyi, the MOX + Stripe Embedded Onboarding screens look great!

My only comment (as I mentioned on Slack) is on a color update request for button, text link and inline text link elements used in the MOX flow, as well as the header top header we use for both MOX and Stripe Embedded Onboarding:

The other color change request (if possible) I have is for the "Continue" CTA on the Stripe authentication pop-up: it was a blue button (in color) previously, if we can revert it back to that WITHOUT affecting the top header area (which we switched to <Woo Purple 50>), that would be great, I am not sure if those two are connected:

[oaratovskyi]

@orcunomattic thanks for the review!
About the change requests, let me share what I've explored:

color update request for button, text link and inline text link elements used in the MOX flow, as well as the header top header we use for both MOX and Stripe Embedded Onboarding

The thing is that currently the order of the colors are next:

• --wp-components-color-accent not set
• --wp-admin-theme-color Gutenberg Blue
• #3858E9 Gutenberg blueberry
  Our Embedded Stripe KYC ignores the theme color and is always Gutenberg Blueberry.
  I've updated the MOX to ignore the theme color too (image 1). For the focus of CTA button I used Gutenberg Blueberry 10% darker (image 2). Does it look good to you?
  
  

I thought about the consequence of this change: we have Gutenberg Blue CTA on the connect page and all other WooCommerce places and MOX + Stripe KYC having Gutenberg Blueberry. Could you confirm it's fine for now?

The other color change request (if possible) I have is for the "Continue" CTA on the Stripe authentication pop-up: it was a blue button (in color) previously, if we can revert it back to that WITHOUT affecting the top header area (which we switched to <Woo Purple 50>), that would be great, I am not sure if those two are connected

Unfortunately, they are connected. primaryColor variable sets both.

[oaratovskyi]

@timmy5685 As I've implemented @orcunomattic suggestions - merging this one and preparing the final build for you to test 🚀
p.s. will wrangle any tweaks if needed in the follow-up PR

[timmy5685]

@orcunomattic for the CTA focus - I think it should be dark blueberry #1D35B4, right? Checking the style guide and I think that's what I'm seeing.

[oaratovskyi]

for the CTA focus - I think it should be dark blueberry #1D35B4, right? Checking the style guide and I think that's what I'm seeing.

@timmy5685 @orcunomattic I wrangled a PR to address this #9481