diff --git a/changelog/fix-woopay-component-spacing b/changelog/fix-woopay-component-spacing new file mode 100644 index 00000000000..0939c834ad9 --- /dev/null +++ b/changelog/fix-woopay-component-spacing @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix WooPay component spacing. diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss index a6aa37953b3..3e400b6bfff 100644 --- a/client/checkout/blocks/style.scss +++ b/client/checkout/blocks/style.scss @@ -118,8 +118,6 @@ button.wcpay-stripelink-modal-trigger:hover { } #remember-me { - margin: 36px 0 0 0; - h2 { font-size: 18px; font-weight: 600; diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js index f6c8902a514..51217c7aa30 100644 --- a/client/checkout/woopay/index.js +++ b/client/checkout/woopay/index.js @@ -46,8 +46,6 @@ const renderSaveUserSection = () => { checkoutPageSaveUserContainer, paymentOptions.nextSibling ); - - paymentOptions.classList.add( 'is-woopay' ); } } diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js index f0563246552..45295c5c170 100644 --- a/client/components/woopay/save-user/checkout-page-save-user.js +++ b/client/components/woopay/save-user/checkout-page-save-user.js @@ -26,7 +26,6 @@ import request from '../../../checkout/utils/request'; import useSelectedPaymentMethod from '../hooks/use-selected-payment-method'; import { recordUserEvent } from 'tracks'; import './style.scss'; -import { compare } from 'compare-versions'; const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { const errorId = 'invalid-woopay-phone-number'; @@ -57,12 +56,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { ); const viewportWidth = window.document.documentElement.clientWidth; const viewportHeight = window.document.documentElement.clientHeight; - const wooCommerceVersionString = window.wcSettings?.wcVersion; - const wcVersionGreaterThan91 = compare( - wooCommerceVersionString, - '9.1', - '>=' - ); useEffect( () => { if ( ! isBlocksCheckout ) { @@ -291,10 +284,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { } return ( - +
{ id="save_user_in_woopay" value="true" className={ `save-details-checkbox ${ - wcVersionGreaterThan91 - ? 'without-margin-right' - : '' - } ${ isBlocksCheckout ? 'wc-block-components-checkbox__input' : '' diff --git a/client/components/woopay/save-user/container.js b/client/components/woopay/save-user/container.js index 470103044ac..7a032fe795f 100644 --- a/client/components/woopay/save-user/container.js +++ b/client/components/woopay/save-user/container.js @@ -3,19 +3,11 @@ */ import { __ } from '@wordpress/i18n'; -const Container = ( { - children, - isBlocksCheckout, - wcVersionGreaterThan91, -} ) => { +const Container = ( { children, isBlocksCheckout } ) => { if ( ! isBlocksCheckout ) return children; return ( <> -
+

{ __( 'Save my info' ) }

{ children }
diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index 8561cd4e62b..0e07ed4d611 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -7,37 +7,6 @@ } } -.is-mobile, -.is-small { - .woopay-save-new-user-container.wc-version-greater-than-91::after { - background: currentColor; - box-shadow: -50vw 0 0 0 currentColor, 50vw 0 0 0 currentColor; - content: ''; - height: 1px; - opacity: 0.11; - width: 100%; - margin-top: 22px; - } -} - -.is-medium, -.is-large { - .woopay-save-new-user-container.wc-version-greater-than-91 { - border-bottom: 1px solid hsla( 0, 0%, 7%, 0.11 ); - margin-bottom: 48px; - } -} - -@media ( max-width: 600px ) { - .is-mobile, - .is-small { - .wc-block-components-form - .wc-block-components-checkout-step.is-woopay::after { - height: 0; - } - } -} - .woopay-save-new-user-container { .save-details { .wc-block-components-text-input input:-webkit-autofill { @@ -45,15 +14,6 @@ } } - &.wc-version-greater-than-91 { - @media ( min-width: 601px ), - ( min-width: 566px ) and ( max-width: 568px ) { - .save-details { - margin-bottom: 48px; - } - } - } - .save-details-header { display: flex; align-items: flex-start; @@ -87,10 +47,6 @@ text-indent: 0; } - input:not( .without-margin-right ) { - margin-right: $gap-small; - } - span { @include breakpoint( '>960px' ) { margin-right: 1.25rem;