diff --git a/plugins/woocommerce-admin/changelogs/fix-7347_wcpay_get_started_alignment b/plugins/woocommerce-admin/changelogs/fix-7347_wcpay_get_started_alignment new file mode 100644 index 00000000000..0d22f06aca2 --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/fix-7347_wcpay_get_started_alignment @@ -0,0 +1,4 @@ +Significance: patch +Type: Fix + +Fixes action button mis-alignment within card footer. #7412 diff --git a/plugins/woocommerce-admin/packages/onboarding/CHANGELOG.md b/plugins/woocommerce-admin/packages/onboarding/CHANGELOG.md index 3b1e870f4b9..62f050e0723 100644 --- a/plugins/woocommerce-admin/packages/onboarding/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/onboarding/CHANGELOG.md @@ -1,3 +1,7 @@ +# Unreleased + +- Update WCPayCard CSS to handle @wordpress/card updates. #7412 + # 2.1.0 - Fix commonjs module build, allow package to be built in isolation. #7286 diff --git a/plugins/woocommerce-admin/packages/onboarding/src/components/WCPayCard/WCPayCard.scss b/plugins/woocommerce-admin/packages/onboarding/src/components/WCPayCard/WCPayCard.scss index bdaaae88f30..c21e835ff68 100644 --- a/plugins/woocommerce-admin/packages/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/plugins/woocommerce-admin/packages/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -1,27 +1,30 @@ -.woocommerce-task-payment-wcpay { +.woocommerce-task-payments .woocommerce-task-payment-wcpay { .woocommerce-task-payment-wcpay__description { font-size: 16px; margin-bottom: $gap-large; } - > .components-card__header { + .components-card__header { margin-bottom: $gap-small; + justify-content: flex-start; + padding: 25px; .woocommerce-pill { margin-left: $gap-small; } } - > .components-card__footer { + .components-card__footer { flex-direction: column; align-items: flex-start; .components-button { margin-top: $gap; + margin-left: 0; } } - > .components-card__body { + .components-card__body { h2 { margin: 0 0 20px 0; } @@ -37,9 +40,4 @@ color: #40464d; } } - - > h2 { - display: flex; - justify-content: flex-start; - } }