diff --git a/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg b/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg new file mode 100644 index 000000000..51ead20b6 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-advanced-cards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg b/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg index 9224d4e5a..ca46628f6 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg @@ -1,5 +1,10 @@ - - - - + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg b/modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg index 9e5fb0dfb..758ab1722 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg @@ -1,6 +1,5 @@ - - - - - + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-blik.svg b/modules/ppcp-settings/images/icon-button-payment-method-blik.svg index bd15da33d..42506a264 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-blik.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-blik.svg @@ -1,35 +1,36 @@ - - - - - - - - - - - - + + + + + + + + + + + + + + - - - + + - + - + - + - + - - + + - + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-cards-big.svg b/modules/ppcp-settings/images/icon-button-payment-method-cards-big.svg new file mode 100644 index 000000000..705089b70 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-cards-big.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-cards.svg b/modules/ppcp-settings/images/icon-button-payment-method-cards.svg index 1bfbf6601..353a41a67 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-cards.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-cards.svg @@ -1,52 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-eps.svg b/modules/ppcp-settings/images/icon-button-payment-method-eps.svg index a4c8ec7fd..52f1666ce 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-eps.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-eps.svg @@ -1,9 +1,14 @@ - - - - - - - - + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-fastlane-big.svg b/modules/ppcp-settings/images/icon-button-payment-method-fastlane-big.svg new file mode 100644 index 000000000..cbb6e27dd --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-fastlane-big.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg b/modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg index 393acf4cf..5cbc706a0 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg b/modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg index db81d0ae5..eaeab16ba 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg @@ -1,11 +1,9 @@ - - - - - - - - - - + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-ideal.svg b/modules/ppcp-settings/images/icon-button-payment-method-ideal.svg index 41abfec1c..1801ec8f9 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-ideal.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-ideal.svg @@ -1,20 +1,18 @@ - - - - - - - - - - - - - + + + + + + + + + + + - - + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-paypal-big.svg b/modules/ppcp-settings/images/icon-button-payment-method-paypal-big.svg new file mode 100644 index 000000000..116764d31 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-paypal-big.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-paypal.svg b/modules/ppcp-settings/images/icon-button-payment-method-paypal.svg index 610c8f474..5838f28b3 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-paypal.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-paypal.svg @@ -1,15 +1,13 @@ - - - - - - - - + + + + + + - - + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-venmo.svg b/modules/ppcp-settings/images/icon-button-payment-method-venmo.svg index eeea95077..574b19c4a 100644 --- a/modules/ppcp-settings/images/icon-button-payment-method-venmo.svg +++ b/modules/ppcp-settings/images/icon-button-payment-method-venmo.svg @@ -1,5 +1,9 @@ - - - - + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-paypal.svg b/modules/ppcp-settings/images/icon-button-paypal.svg index 17e9d9108..47613faf6 100644 --- a/modules/ppcp-settings/images/icon-button-paypal.svg +++ b/modules/ppcp-settings/images/icon-button-paypal.svg @@ -1,3 +1,4 @@ + diff --git a/modules/ppcp-settings/images/icon-settings.svg b/modules/ppcp-settings/images/icon-settings.svg new file mode 100644 index 000000000..25c4ff352 --- /dev/null +++ b/modules/ppcp-settings/images/icon-settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index 9febb1e47..613403b67 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -11,6 +11,9 @@ $color-gray-400: #CCCCCC; $color-gray-300: #EBEBEB; $color-gray-200: #E0E0E0; $color-gray: #646970; +$color-text-tertiary: #505050; +$color-text-text: #070707; +$color-border:#AEAEAE; $shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15); $shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1); diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss index e33085763..027016760 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss @@ -5,7 +5,6 @@ button.components-button, a.components-button { } &:disabled { - background-color: $color-gray-500; color: $color-white; } @@ -16,16 +15,20 @@ button.components-button, a.components-button { &.is-primary { @include font(13, 20, 400); - color:$color-white; + + &:not(:disabled) { + background-color: $color-blueberry; + } } &.is-secondary:not(:disabled) { - border-color:$color-blueberry; - background-color:$color-white; - color:$color-blueberry; - &:hover{ - background-color:$color-white; - background:none; + border-color: $color-blueberry; + background-color: $color-white; + color: $color-blueberry; + + &:hover { + background-color: $color-white; + background: none; } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss index f548ab12f..05418743e 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss @@ -3,12 +3,20 @@ &__radio-value { @include hide-input-field; - &:checked { - + .ppcp-r__radio-presentation { - background: $color-white; - width: 20px; - height: 20px; - border: 6px solid $color-blueberry; + &:checked + .ppcp-r__radio-presentation { + position: relative; + + &::before { + content: ''; + width: 12px; + height: 12px; + border-radius: 12px; + background-color: $color-blueberry; + display: block; + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; } } } @@ -104,7 +112,7 @@ select { .components-base-control__field { display: flex; flex-direction: column; - gap: 8px; + gap: 0; margin: 0; } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss index 49ba73db5..3ca44193c 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss @@ -1,46 +1,75 @@ +.ppcp-r-payment-method-item-list { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + .ppcp-r-payment-method-item { display: flex; - align-items: center; + align-items: flex-start; + width: calc(100% / 3 - 32px / 3); + border: 1px solid $color-gray-300; + padding: 16px; + border-radius: 8px; + min-height: 200px; - &:not(:last-child) { - padding-bottom: 32px; + @media screen and (max-width: 767px) { + width: calc(50% - 8px); } - &:not(:first-child) { - border-top: 1px solid $color-gray-400; - padding-top: 32px; + @media screen and (max-width: 480px) { + width: 100%; } - &__checkbox-wrap { - position: relative; + &__wrap { + display: flex; + flex-direction: column; + height: 100%; + } + + &__title-wrap { display: flex; align-items: center; - - .ppcp-r__checkbox { - margin-right: 24px; - } - } - - &__icon-wrap { - margin-right: 18px; + margin: 0 0 8px 0; + gap: 12px; } &__content { - padding-right: 24px; - p { margin: 0; + color: $color-text-tertiary; + @include font(13, 20, 400); } + + margin: 0 0 12px 0; } &__title { - @include font(16, 20, 600); + @include font(13, 20, 500); color: $color-black; - margin: 0 0 8px 0; display: block; } + &__settings-button { + line-height: 0; + transition: 0.2s ease-out transform; + transform: rotate(0deg); + zoom: 1.005; + + &:hover { + transform: rotate(45deg); + cursor: pointer; + } + } + button.is-secondary { @include small-button; } + + &__footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss index 41455053a..4274a370a 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss @@ -3,18 +3,6 @@ @import './button'; @import './fields'; - &__container { - max-width: 100%; - width: 400px; - - &--small { - padding: 0 50px; - @media screen and (max-width: 480px){ - padding:0; - } - } - } - .components-modal { &__header { height: 52px; @@ -26,8 +14,23 @@ } &__content { + margin-top: 60px; + padding:0 24px 28px 24px; + } + } + + &__container { + width: 352px; + max-width: 100%; + } + + .has-size-small { + .ppcp-r-modal__container { + max-width: 252px; + } + + .components-modal__content { margin-top: 48px; - padding: 0 50px 48px 50px; } } @@ -37,23 +40,30 @@ align-items: center; gap: 8px; border-bottom: 1px solid $color-gray-500; - padding-bottom: 12px; - margin-bottom: 24px; + padding-bottom: 18px; + margin-bottom: 18px; } &__title { - @include font(16, 20, 600); + @include font(14, 20, 600); color: $color-black; } &__content { - width: 400px; - max-width: 100%; + padding: 0; } - &__inverted-toggle-control { - .components-form-toggle { - order: 1; + .components-toggle-control { + gap: 8px; + margin: 0; + + label { + @include font(13, 20, 400); + color: $color-text-text; + } + + .components-form-toggle__track { + border-color: $color-border; } } @@ -63,7 +73,7 @@ gap: 8px; &--save { - margin-top: 24px; + margin-top: -4px; align-items: flex-end; } @@ -81,15 +91,28 @@ &--acdc { gap: 18px; + + .ppcp-r-modal__field-row--save { + margin-top: 2px; + } } } .ppcp-r-modal__field-row--save button.is-primary { @include small-button; + width: 100%; + justify-content: center; + padding: 6px 12px; + } + + .ppcp-r__radio-content { + label { + @include font(13, 20, 400); + } } &__content-title { - @include font(14, 20, 600); + @include font(13, 20, 600); color: $color-black; display: block; margin: 0 0 4px 0; @@ -97,7 +120,7 @@ &__description { @include font(14, 20, 400); - margin: 0 0 24px 0; color: $color-black; + margin: 0 0 12px 0; } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss index 51380f052..9338e5ccd 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss @@ -10,7 +10,7 @@ box-shadow: 0 -1px 0 0 $color-gray-400 inset; margin-bottom: 48px; gap: 12px; - + overflow: auto; .components-button { padding: 16px 20px; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js index 8c4878f6f..dbe9c6971 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js @@ -2,7 +2,9 @@ import { Button } from '@wordpress/components'; import PaymentMethodIcon from './PaymentMethodIcon'; import { PayPalCheckbox } from './Fields'; import { useState } from '@wordpress/element'; +import { ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import data from '../../utils/data'; const PaymentMethodItem = ( props ) => { const [ paymentMethodState, setPaymentMethodState ] = useState(); @@ -21,36 +23,37 @@ const PaymentMethodItem = ( props ) => { return ( <>
-
- -
+
+
-
-
{ props.title } +
+

{ props.description }

+
+ + handleCheckboxState( newValue ) + } + /> +
setModalIsVisible( true ) } + > + { Modal && data().getImage( 'icon-settings.svg' ) } +
+
- { Modal && ( - - ) }
{ Modal && modalIsVisible && ( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js index 3fa1e3aae..df9f0374d 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js @@ -3,20 +3,17 @@ import PaymentMethodIcon from './PaymentMethodIcon'; const PaymentMethodModal = ( props ) => { let className = 'ppcp-r-modal'; - let classNameContainer = 'ppcp-r-modal__container'; + const classNameContainer = 'ppcp-r-modal__container'; if ( props?.className ) { className += ' ' + props.className; } - if ( props?.container && props.container === 'small' ) { - classNameContainer += ' ppcp-r-modal__container--small'; - } - return ( props.setModalIsVisible( false ) } + size={ props?.size } >
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js index 82095d9dd..82a65ccf6 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js @@ -14,7 +14,7 @@ const ModalAcdc = ( { setModalIsVisible } ) => { return ( { 'woocommerce-paypal-payments' ) } /> -
-
+