woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 10:55:00 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

💄 Fix the payment method item grid layout

Browse source
This commit is contained in:
Philipp Stracker 2025-01-24 17:01:03 +01:00
parent a43427ce29
commit 63185b39b7
No known key found for this signature in database
7 changed files with 39 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

14
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
View file

@ -11,21 +11,21 @@ const PaymentMethodItemBlock = ( {
isSelected,
} ) => {
return (
<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
<div className="ppcp-r-settings-block__payment-methods__item__inner">
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
<div className="ppcp--method-inner">
<div className="ppcp--method-title-wrapper">
<PaymentMethodIcon
icons={ [ paymentMethod.icon ] }
type={ paymentMethod.icon }
/>
<span className="ppcp-r-settings-block__payment-methods__item__title">
<span className="ppcp--method-title">
{ paymentMethod.itemTitle }
</span>
</div>
<p className="ppcp-r-settings-block__payment-methods__item__description">
<p className="ppcp--method-description">
{ paymentMethod.itemDescription }
</p>
<div className="ppcp-r-settings-block__payment-methods__item__footer">
<div className="ppcp--method-footer">
<ToggleControl
__nextHasNoMarginBottom={ true }
checked={ isSelected }
@ -33,7 +33,7 @@ const PaymentMethodItemBlock = ( {
/>
{ paymentMethod?.fields && onTriggerModal && (
<div
className="ppcp-r-settings-block__payment-methods__item__settings"
className="ppcp--method-settings"
onClick={ onTriggerModal }
>
{ data().getImage( 'icon-settings.svg' ) }

10
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
View file

@ -2,11 +2,7 @@ import SettingsBlock from '../SettingsBlock';
import PaymentMethodItemBlock from './PaymentMethodItemBlock';
import { usePaymentMethods } from '../../../data/payment/hooks';
const PaymentMethodsBlock = ( {
paymentMethods,
className = '',
onTriggerModal,
} ) => {
const PaymentMethodsBlock = ( { paymentMethods, onTriggerModal } ) => {
const { setPersistent } = usePaymentMethods();
if ( ! paymentMethods?.length ) {
@ -21,9 +17,7 @@ const PaymentMethodsBlock = ( {
};
return (
<SettingsBlock
className={ `ppcp-r-settings-block__payment-methods ${ className }` }
>
<SettingsBlock className="ppcp--grid ppcp-r-settings-block__payment-methods">
{ paymentMethods.map( ( paymentMethod ) => (
<PaymentMethodItemBlock
key={ paymentMethod.id }