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

Merge pull request #3144 from woocommerce/PCP-4222-items-with-and-without-modal-are-not-aligned-correctly

Browse source 
Settings UI: Tighten up the payment methods footer and modal styling (4222)
This commit is contained in:
Emili Castells 2025-02-25 11:38:50 +01:00 • committed by GitHub
commit 326ac452be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
View file

@ -63,6 +63,10 @@
&:hover { &:hover {
transform: rotate(45deg); transform: rotate(45deg);
} }
&.components-button {
height: auto;
}
} }
.ppcp--method-icon { .ppcp--method-icon {
@ -79,6 +83,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: auto; margin-top: auto;
min-height: 24px;
} }
} }
} }

11
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
View file

@ -73,7 +73,6 @@
gap: 8px; gap: 8px;
&--save { &--save {
margin-top: -4px;
align-items: flex-end; align-items: flex-end;
} }
@ -87,7 +86,7 @@
&__field-rows { &__field-rows {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 18px;
&--acdc { &--acdc {
gap: 18px; gap: 18px;
@ -98,19 +97,11 @@
} }
.components-radio-control { .components-radio-control {
.components-flex {
gap: 18px;
}
label { label {
@include font(14, 20, 400); @include font(14, 20, 400);
color: $color-black; color: $color-black;
} }
&__option {
gap: 18px;
}
&__input { &__input {
border-color: $color-gray-700; border-color: $color-gray-700;
margin-right: 0; margin-right: 0;

6
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js
View file

@ -100,14 +100,16 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
case 'radio': case 'radio':
return ( return (
<> <>
<div className="ppcp-r-modal__field-row">
<strong className="ppcp-r-modal__content-title"> <strong className="ppcp-r-modal__content-title">
{ field.label } { field.label }
</strong> </strong>
{ field.description && ( { field.description && (
<p className="ppcp-r-modal__description"> <span className="ppcp-r-modal__field-description">
{ field.description } { field.description }
</p> </span>
) } ) }
</div>
<div className="ppcp-r-modal__field-row"> <div className="ppcp-r-modal__field-row">
<RadioControl <RadioControl
selected={ settings[ key ] } selected={ settings[ key ] }