diff --git a/assets/css/admin.css b/assets/css/admin.css index 28ff0430c73..6933589f7f7 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -38,6 +38,8 @@ width: 2rem; background-size: contain; background-repeat: no-repeat; + border-radius: 2px; + outline: 1px solid rgba( 0, 0, 0, 0.25 ); } .payment-method__brand--amex { diff --git a/assets/images/cards/amex.svg b/assets/images/cards/amex.svg index c8e4e512e6e..292e48811f0 100644 --- a/assets/images/cards/amex.svg +++ b/assets/images/cards/amex.svg @@ -1 +1,4 @@ - + + + + diff --git a/assets/images/cards/apple-pay.svg b/assets/images/cards/apple-pay.svg index 15fd0e88633..7104010533d 100644 --- a/assets/images/cards/apple-pay.svg +++ b/assets/images/cards/apple-pay.svg @@ -1 +1,4 @@ - + + + + diff --git a/assets/images/cards/diners.svg b/assets/images/cards/diners.svg index 2f4d127d639..f585af26c5d 100644 --- a/assets/images/cards/diners.svg +++ b/assets/images/cards/diners.svg @@ -1 +1,6 @@ - + + + + + + diff --git a/assets/images/cards/discover.svg b/assets/images/cards/discover.svg index 4e18e896761..db205b2f836 100644 --- a/assets/images/cards/discover.svg +++ b/assets/images/cards/discover.svg @@ -1 +1,5 @@ - \ No newline at end of file + + + + + diff --git a/assets/images/cards/google-pay.svg b/assets/images/cards/google-pay.svg index efddd35cf29..816af35ad41 100644 --- a/assets/images/cards/google-pay.svg +++ b/assets/images/cards/google-pay.svg @@ -1 +1,8 @@ - + + + + + + + + diff --git a/assets/images/cards/jcb.svg b/assets/images/cards/jcb.svg index 473c198b249..ae366edf606 100644 --- a/assets/images/cards/jcb.svg +++ b/assets/images/cards/jcb.svg @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/assets/images/cards/mastercard.svg b/assets/images/cards/mastercard.svg index b77d93d3041..706560ad233 100644 --- a/assets/images/cards/mastercard.svg +++ b/assets/images/cards/mastercard.svg @@ -1,6 +1,13 @@ - - - - + + + + + + + + + + + diff --git a/assets/images/cards/unionpay.svg b/assets/images/cards/unionpay.svg index aecfc0a0ada..69308a567a1 100644 --- a/assets/images/cards/unionpay.svg +++ b/assets/images/cards/unionpay.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/assets/images/cards/visa.svg b/assets/images/cards/visa.svg index 04eeda0e51e..9592cb31f8c 100644 --- a/assets/images/cards/visa.svg +++ b/assets/images/cards/visa.svg @@ -1,7 +1,4 @@ - - - - - + + diff --git a/assets/images/payment-methods/affirm.svg b/assets/images/payment-methods/affirm.svg index 7ad4f7063ef..aeba8456121 100644 --- a/assets/images/payment-methods/affirm.svg +++ b/assets/images/payment-methods/affirm.svg @@ -1,16 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/assets/images/payment-methods/afterpay.svg b/assets/images/payment-methods/afterpay.svg index 75cb2eda73b..a769af42cdd 100644 --- a/assets/images/payment-methods/afterpay.svg +++ b/assets/images/payment-methods/afterpay.svg @@ -1,18 +1,16 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/assets/images/payment-methods/bancontact.svg b/assets/images/payment-methods/bancontact.svg index 3ba9d37fae0..02697acc46e 100644 --- a/assets/images/payment-methods/bancontact.svg +++ b/assets/images/payment-methods/bancontact.svg @@ -1 +1,16 @@ - + + + + + + + + + + + + + + + + diff --git a/assets/images/payment-methods/bank-debit.svg b/assets/images/payment-methods/bank-debit.svg index 70da5aff715..b73ffa02428 100644 --- a/assets/images/payment-methods/bank-debit.svg +++ b/assets/images/payment-methods/bank-debit.svg @@ -1 +1,4 @@ - + + + + diff --git a/assets/images/payment-methods/cc.svg b/assets/images/payment-methods/cc.svg index 8c7fd884aa1..6945a5a9801 100644 --- a/assets/images/payment-methods/cc.svg +++ b/assets/images/payment-methods/cc.svg @@ -1,26 +1,30 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + + + + + + + diff --git a/assets/images/payment-methods/eps.svg b/assets/images/payment-methods/eps.svg index d6cf1ed1c36..33833b9e501 100644 --- a/assets/images/payment-methods/eps.svg +++ b/assets/images/payment-methods/eps.svg @@ -1 +1,7 @@ - + + + + + + + diff --git a/assets/images/payment-methods/giropay.svg b/assets/images/payment-methods/giropay.svg index 6fd516dff4f..8d455e3abee 100644 --- a/assets/images/payment-methods/giropay.svg +++ b/assets/images/payment-methods/giropay.svg @@ -1 +1,8 @@ - + + + + + + + + diff --git a/assets/images/payment-methods/ideal.svg b/assets/images/payment-methods/ideal.svg index f5a43bf2693..8ddcf64e013 100644 --- a/assets/images/payment-methods/ideal.svg +++ b/assets/images/payment-methods/ideal.svg @@ -1 +1,10 @@ - + + + + + + + + + + diff --git a/assets/images/payment-methods/jcb.svg b/assets/images/payment-methods/jcb.svg index 473c198b249..7d46e540cd1 100644 --- a/assets/images/payment-methods/jcb.svg +++ b/assets/images/payment-methods/jcb.svg @@ -1 +1,21 @@ - + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/payment-methods/klarna.svg b/assets/images/payment-methods/klarna.svg index 948f281a04b..9b6bb3e044a 100644 --- a/assets/images/payment-methods/klarna.svg +++ b/assets/images/payment-methods/klarna.svg @@ -1,11 +1,4 @@ - - - - - - - - - + + diff --git a/assets/images/payment-methods/link.svg b/assets/images/payment-methods/link.svg index b73f37ba96e..04a4d14086e 100644 --- a/assets/images/payment-methods/link.svg +++ b/assets/images/payment-methods/link.svg @@ -1 +1,4 @@ - + + + + diff --git a/assets/images/payment-methods/p24.svg b/assets/images/payment-methods/p24.svg index 26734fd7aeb..73468b0cad1 100644 --- a/assets/images/payment-methods/p24.svg +++ b/assets/images/payment-methods/p24.svg @@ -1 +1,7 @@ - + + + + + + + diff --git a/assets/images/payment-methods/sepa-debit.svg b/assets/images/payment-methods/sepa-debit.svg index d0fcfb0498b..5d36b2d8dad 100644 --- a/assets/images/payment-methods/sepa-debit.svg +++ b/assets/images/payment-methods/sepa-debit.svg @@ -1 +1,6 @@ - + + + + + + diff --git a/assets/images/payment-methods/sofort.svg b/assets/images/payment-methods/sofort.svg index ca40bc3c61a..a7b6199281b 100644 --- a/assets/images/payment-methods/sofort.svg +++ b/assets/images/payment-methods/sofort.svg @@ -1 +1,6 @@ - + + + + + + diff --git a/assets/images/payment-methods/woopay.svg b/assets/images/payment-methods/woopay.svg index a516fe11fd5..4398c382d43 100644 --- a/assets/images/payment-methods/woopay.svg +++ b/assets/images/payment-methods/woopay.svg @@ -1,14 +1,7 @@ - - - - - - - - - - - - + + + + + diff --git a/changelog/fix-7183-unify-pm-icon-design b/changelog/fix-7183-unify-pm-icon-design new file mode 100644 index 00000000000..c15bdfde5df --- /dev/null +++ b/changelog/fix-7183-unify-pm-icon-design @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Unify payment method icon design diff --git a/client/components/payment-methods-list/payment-method.scss b/client/components/payment-methods-list/payment-method.scss index ae75df340a3..a020b7562cb 100644 --- a/client/components/payment-methods-list/payment-method.scss +++ b/client/components/payment-methods-list/payment-method.scss @@ -136,9 +136,7 @@ } &__icon { - border-radius: 2px; flex: 0 0 63.69px; - height: 40px; margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow align-self: center; diff --git a/client/connect-account-page/payment-methods.tsx b/client/connect-account-page/payment-methods.tsx index 12c7e9ac3ab..9add778d558 100644 --- a/client/connect-account-page/payment-methods.tsx +++ b/client/connect-account-page/payment-methods.tsx @@ -6,38 +6,39 @@ import React from 'react'; /** * Internal dependencies */ -import AmericanExpress from 'assets/images/cards/amex.svg?asset'; -import ApplePay from 'assets/images/cards/apple-pay.svg?asset'; -import DinersClub from 'assets/images/cards/diners.svg?asset'; -import GooglePay from 'assets/images/cards/google-pay.svg?asset'; -import JCB from 'assets/images/cards/jcb.svg?asset'; -import MasterCard from 'assets/images/cards/mastercard.svg?asset'; -import UnionPay from 'assets/images/cards/unionpay.svg?asset'; -import Visa from 'assets/images/cards/visa.svg?asset'; -import WooPay from 'assets/images/payment-methods/woopay.svg?asset'; -import Affirm from 'assets/images/payment-methods/affirm.svg?asset'; -import AfterPay from 'assets/images/payment-methods/afterpay.svg?asset'; + import strings from './strings'; import './style.scss'; +import { + AffirmIcon, + AfterpayIcon, + AmericanExpressIcon, + ApplePayIcon, + DinersClubIcon, + GooglePayIcon, + JCBIcon, + MastercardIcon, + UnionPayIcon, + VisaIcon, + WooIcon, +} from 'wcpay/payment-methods-icons'; const PaymentMethods: React.FC = () => { return ( <>

{ strings.paymentMethods }

- Visa - MasterCard - American Express - { wcpaySettings.isWooPayStoreCountryAvailable && ( - WooPay - ) } - Apple Pay - Google Pay - DinersClub - UnionPay - JCB - Affirm - AfterPay + + + + { wcpaySettings.isWooPayStoreCountryAvailable && } + + + + + + + & more.
diff --git a/client/connect-account-page/style.scss b/client/connect-account-page/style.scss index 8f68b6b8c41..3ace23ad4cd 100644 --- a/client/connect-account-page/style.scss +++ b/client/connect-account-page/style.scss @@ -79,8 +79,6 @@ img { height: 24px; - border: 1px solid $gray-300; - border-radius: 2px; } span { diff --git a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap index 188d8dd52ee..443845e8b54 100644 --- a/client/connect-account-page/test/__snapshots__/index.test.tsx.snap +++ b/client/connect-account-page/test/__snapshots__/index.test.tsx.snap @@ -118,42 +118,52 @@ exports[`ConnectAccountPage should render correctly 1`] = ` > Visa MasterCard American Express Apple Pay Google Pay DinersClub UnionPay JCB Affirm AfterPay @@ -439,46 +449,57 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = ` > Visa MasterCard American Express WooPay Apple Pay Google Pay DinersClub UnionPay JCB Affirm AfterPay @@ -718,42 +739,52 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = ` > Visa MasterCard American Express Apple Pay Google Pay DinersClub UnionPay JCB Affirm AfterPay diff --git a/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap index f4a0e2195bc..a4e345f9709 100644 --- a/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap +++ b/client/multi-currency/multi-currency-settings/enabled-currencies-list/test/__snapshots__/index.js.snap @@ -372,10 +372,11 @@ exports[`Multi-Currency enabled currencies list Remove currency modal renders co
  • giropay
  • Sofort
  • SEPA Direct Debit ( { + className, + ...props +} ) => ( + { +); + +export const AffirmIcon = iconComponent( + AffirmAsset, + __( 'Affirm', 'woocommerce-payments' ) +); +export const AfterpayIcon = iconComponent( + AfterpayAsset, + __( 'Afterpay', 'woocommerce-payments' ) +); +export const AmericanExpressIcon = iconComponent( + AmexAsset, + __( 'American Express', 'woocommerce-payments' ) +); +export const ApplePayIcon = iconComponent( + ApplePayAsset, + __( 'Apple Pay', 'woocommerce-payments' ) +); +export const BancontactIcon = iconComponent( + BancontactAsset, + __( 'Bancontact', 'woocommerce-payments' ) +); +export const BankDebitIcon = iconComponent( + BankDebitAsset, + __( 'BECS Direct Debit', 'woocommerce-payments' ) +); +export const CreditCardIcon = iconComponent( + CreditCardAsset, + __( 'Credit card / Debit card', 'woocommerce-payments' ) +); +export const DinersClubIcon = iconComponent( + DinersClubAsset, + __( 'Diners Club', 'woocommerce-payments' ) +); +export const EpsIcon = iconComponent( + EpsAsset, + __( 'BECS Direct Debit', 'woocommerce-payments' ) +); +export const GiropayIcon = iconComponent( + GiropayAsset, + __( 'Giropay', 'woocommerce-payments' ) +); +export const GooglePayIcon = iconComponent( + GooglePayAsset, + __( 'Google Pay', 'woocommerce-payments' ) +); +export const IdealIcon = iconComponent( + IdealAsset, + __( 'iDEAL', 'woocommerce-payments' ) +); +export const JCBIcon = iconComponent( + JCBAsset, + __( 'JCB', 'woocommerce-payments' ) +); +export const KlarnaIcon = iconComponent( + KlarnaAsset, + __( 'Klarna', 'woocommerce-payments' ) +); +export const LinkIcon = iconComponent( + LinkAsset, + __( 'Link', 'woocommerce-payments' ) +); +export const MastercardIcon = iconComponent( + MasterCardAsset, + __( 'Mastercard', 'woocommerce-payments' ) +); +export const P24Icon = iconComponent( + P24Asset, + __( 'Przelewy24 (P24)', 'woocommerce-payments' ) +); +export const SepaIcon = iconComponent( + SepaAsset, + __( 'SEPA Direct Debit', 'woocommerce-payments' ) +); +export const SofortIcon = iconComponent( + SofortAsset, + __( 'Sofort', 'woocommerce-payments' ) +); +export const UnionPayIcon = iconComponent( + UnionPayAsset, + __( 'UnionPay', 'woocommerce-payments' ) +); +export const VisaIcon = iconComponent( + VisaAsset, + __( 'Visa', 'woocommerce-payments' ) +); +export const WooIcon = iconComponent( + WooAsset, + __( 'WooPay', 'woocommerce-payments' ) +); diff --git a/client/payment-methods-map.tsx b/client/payment-methods-map.tsx index a78bb550f56..c7b6a795dbc 100644 --- a/client/payment-methods-map.tsx +++ b/client/payment-methods-map.tsx @@ -7,23 +7,22 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import CreditCardIcon from 'assets/images/payment-methods/cc.svg?asset'; -import BancontactIcon from 'assets/images/payment-methods/bancontact.svg?asset'; -import EpsIcon from 'assets/images/payment-methods/eps.svg?asset'; -import GiropayIcon from 'assets/images/payment-methods/giropay.svg?asset'; -import SofortIcon from 'assets/images/payment-methods/sofort.svg?asset'; -import SepaIcon from 'assets/images/payment-methods/sepa-debit.svg?asset'; -import P24Icon from 'assets/images/payment-methods/p24.svg?asset'; -import IdealIcon from 'assets/images/payment-methods/ideal.svg?asset'; -import BankDebitIcon from 'assets/images/payment-methods/bank-debit.svg?asset'; -import AffirmIcon from 'assets/images/payment-methods/affirm.svg?asset'; -import AfterpayIcon from 'assets/images/payment-methods/afterpay.svg?asset'; -import JCBIcon from 'assets/images/payment-methods/jcb.svg?asset'; -import KlarnaIcon from 'assets/images/payment-methods/klarna.svg?asset'; -const iconComponent = ( src: string, alt: string ): ReactImgFuncComponent => ( - props -) => {; +import { + AffirmIcon, + AfterpayIcon, + BancontactIcon, + BankDebitIcon, + CreditCardIcon, + EpsIcon, + GiropayIcon, + IdealIcon, + JCBIcon, + KlarnaIcon, + P24Icon, + SepaIcon, + SofortIcon, +} from 'wcpay/payment-methods-icons'; export interface PaymentMethodMapEntry { id: string; @@ -35,8 +34,6 @@ export interface PaymentMethodMapEntry { stripe_key: string; allows_manual_capture: boolean; allows_pay_later: boolean; - setup_required?: boolean; - setup_tooltip?: string; } const PaymentMethodInformationObject: Record< @@ -59,7 +56,7 @@ const PaymentMethodInformationObject: Record< 'Let your customers pay with major credit and debit cards without leaving your store.', 'woocommerce-payments' ), - icon: iconComponent( CreditCardIcon, 'Credit Card' ), + icon: CreditCardIcon, currencies: [], stripe_key: 'card_payments', allows_manual_capture: true, @@ -75,7 +72,7 @@ const PaymentMethodInformationObject: Record< 'Bulk Electronic Clearing System — Accept secure bank transfer from Australia.', 'woocommerce-payments' ), - icon: iconComponent( BankDebitIcon, 'BECS Direct Debit' ), + icon: BankDebitIcon, currencies: [ 'AUD' ], stripe_key: 'au_becs_debit_payments', allows_manual_capture: false, @@ -91,7 +88,7 @@ const PaymentMethodInformationObject: Record< 'Bancontact is a bank redirect payment method offered by more than 80% of online businesses in Belgium.', 'woocommerce-payments' ), - icon: iconComponent( BancontactIcon, 'Bancontact' ), + icon: BancontactIcon, currencies: [ 'EUR' ], stripe_key: 'bancontact_payments', allows_manual_capture: false, @@ -107,7 +104,7 @@ const PaymentMethodInformationObject: Record< 'Accept your payment with EPS — a common payment method in Austria.', 'woocommerce-payments' ), - icon: iconComponent( EpsIcon, 'EPS' ), + icon: EpsIcon, currencies: [ 'EUR' ], stripe_key: 'eps_payments', allows_manual_capture: false, @@ -123,7 +120,7 @@ const PaymentMethodInformationObject: Record< 'Expand your business with giropay — Germany’s second most popular payment system.', 'woocommerce-payments' ), - icon: iconComponent( GiropayIcon, 'giropay' ), + icon: GiropayIcon, currencies: [ 'EUR' ], stripe_key: 'giropay_payments', allows_manual_capture: false, @@ -139,7 +136,7 @@ const PaymentMethodInformationObject: Record< 'Expand your business with iDEAL — Netherlands’s most popular payment method.', 'woocommerce-payments' ), - icon: iconComponent( IdealIcon, 'iDEAL' ), + icon: IdealIcon, currencies: [ 'EUR' ], stripe_key: 'ideal_payments', allows_manual_capture: false, @@ -155,7 +152,7 @@ const PaymentMethodInformationObject: Record< 'Accept payments with Przelewy24 (P24), the most popular payment method in Poland.', 'woocommerce-payments' ), - icon: iconComponent( P24Icon, 'Przelewy24 (P24)' ), + icon: P24Icon, currencies: [ 'EUR', 'PLN' ], stripe_key: 'p24_payments', allows_manual_capture: false, @@ -171,7 +168,7 @@ const PaymentMethodInformationObject: Record< 'Reach 500 million customers and over 20 million businesses across the European Union.', 'woocommerce-payments' ), - icon: iconComponent( SepaIcon, 'SEPA Direct Debit' ), + icon: SepaIcon, currencies: [ 'EUR' ], stripe_key: 'sepa_debit_payments', allows_manual_capture: false, @@ -187,7 +184,7 @@ const PaymentMethodInformationObject: Record< 'Accept secure bank transfers from Austria, Belgium, Germany, Italy, Netherlands, and Spain.', 'woocommerce-payments' ), - icon: iconComponent( SofortIcon, 'Sofort' ), + icon: SofortIcon, currencies: [ 'EUR' ], stripe_key: 'sofort_payments', allows_manual_capture: false, @@ -204,7 +201,7 @@ const PaymentMethodInformationObject: Record< 'Allow customers to pay over time with Affirm. Available to all customers paying in %s.', 'woocommerce-payments' ), - icon: iconComponent( AffirmIcon, 'Affirm' ), + icon: AffirmIcon, currencies: [ 'USD', 'CAD' ], stripe_key: 'affirm_payments', allows_manual_capture: false, @@ -221,7 +218,7 @@ const PaymentMethodInformationObject: Record< 'Allow customers to pay over time with Afterpay. Available to all customers paying in %s.', 'woocommerce-payments' ), - icon: iconComponent( AfterpayIcon, 'Afterpay' ), + icon: AfterpayIcon, currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP', 'EUR' ], stripe_key: 'afterpay_clearpay_payments', allows_manual_capture: false, @@ -237,7 +234,7 @@ const PaymentMethodInformationObject: Record< 'Let your customers pay with JCB, the only international payment brand based in Japan.', 'woocommerce-payments' ), - icon: iconComponent( JCBIcon, 'JCB' ), + icon: JCBIcon, currencies: [ 'JPY' ], stripe_key: 'jcb_payments', allows_manual_capture: false, @@ -254,7 +251,7 @@ const PaymentMethodInformationObject: Record< 'Allow customers to pay over time with Klarna. Available to all customers paying in %s.', 'woocommerce-payments' ), - icon: iconComponent( KlarnaIcon, 'Klarna' ), + icon: KlarnaIcon, currencies: [ 'EUR', 'GBP', 'USD', 'DKK', 'NOK', 'SEK' ], stripe_key: 'klarna_payments', allows_manual_capture: false, diff --git a/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap b/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap index 197b0e6a555..46c0f843bb3 100644 --- a/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap +++ b/client/payment-methods/test/__snapshots__/activation-modal.test.js.snap @@ -84,8 +84,8 @@ exports[`Activation Modal matches the snapshot 1`] = ` class="payment-confirm-illustration__illustrations" > Credit Card Credit Card ( <>
    - WooPay +

    { __( @@ -77,10 +79,10 @@ const methods = { <>

    - Apple Pay +
    - Google Pay +

    diff --git a/client/settings/express-checkout-settings/index.scss b/client/settings/express-checkout-settings/index.scss index 256f77588f8..0cac66fa77f 100644 --- a/client/settings/express-checkout-settings/index.scss +++ b/client/settings/express-checkout-settings/index.scss @@ -41,12 +41,10 @@ } &__icon { - border-radius: 2px; display: flex; width: 64px; height: 40px; margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow - box-shadow: 0 0 0 1px #ddd; background: #fff; svg { diff --git a/client/settings/express-checkout/apple-google-pay-item.tsx b/client/settings/express-checkout/apple-google-pay-item.tsx index dd9f8f0c078..2b70c9d0f73 100644 --- a/client/settings/express-checkout/apple-google-pay-item.tsx +++ b/client/settings/express-checkout/apple-google-pay-item.tsx @@ -10,10 +10,9 @@ import React from 'react'; * Internal dependencies */ import { getPaymentMethodSettingsUrl } from '../../utils'; -import ApplePay from 'assets/images/cards/apple-pay.svg?asset'; -import GooglePay from 'assets/images/cards/google-pay.svg?asset'; import { usePaymentRequestEnabledSettings } from 'wcpay/data'; import { PaymentRequestEnabledSettingsHook } from './interfaces'; +import { ApplePayIcon, GooglePayIcon } from 'wcpay/payment-methods-icons'; const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => { const [ @@ -41,7 +40,7 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {

    - Apple Pay +
    { __( 'Apple Pay', 'woocommerce-payments' ) } @@ -96,7 +95,7 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
    - Google Pay +
    { __( 'Google Pay', 'woocommerce-payments' ) } diff --git a/client/settings/express-checkout/link-item.tsx b/client/settings/express-checkout/link-item.tsx index f0efbf901ee..ee3102affd6 100644 --- a/client/settings/express-checkout/link-item.tsx +++ b/client/settings/express-checkout/link-item.tsx @@ -16,9 +16,9 @@ import { } from 'wcpay/data'; import './style.scss'; import { HoverTooltip } from 'components/tooltip'; -import LinkIcon from 'assets/images/payment-methods/link.svg?asset'; import NoticeOutlineIcon from 'gridicons/dist/notice-outline'; import { EnabledMethodIdsHook } from './interfaces'; +import { LinkIcon } from 'wcpay/payment-methods-icons'; const LinkExpressCheckoutItem = (): React.ReactElement => { const availablePaymentMethodIds = useGetAvailablePaymentMethodIds() as Array< @@ -95,7 +95,7 @@ const LinkExpressCheckoutItem = (): React.ReactElement => {
    - Link +
    { __( diff --git a/client/settings/express-checkout/style.scss b/client/settings/express-checkout/style.scss index 3854f058277..65d43ab7bd9 100644 --- a/client/settings/express-checkout/style.scss +++ b/client/settings/express-checkout/style.scss @@ -76,11 +76,9 @@ } &__icon { - border-radius: 2px; flex: 0 0 63.69px; height: 40px; margin: 1px 17px 1px 1px; // 1px to accommodate for box-shadow - box-shadow: 0 0 0 1px #ddd; @include breakpoint( '>660px' ) { display: flex; diff --git a/client/settings/express-checkout/woopay-item.tsx b/client/settings/express-checkout/woopay-item.tsx index 26f19ecebf2..ca5a71f02cf 100644 --- a/client/settings/express-checkout/woopay-item.tsx +++ b/client/settings/express-checkout/woopay-item.tsx @@ -5,7 +5,6 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Button, CheckboxControl, VisuallyHidden } from '@wordpress/components'; -import WooIcon from 'assets/images/payment-methods/woo.svg?asset'; import interpolateComponents from '@automattic/interpolate-components'; import { getPaymentMethodSettingsUrl } from '../../utils'; import { useContext } from '@wordpress/element'; @@ -24,6 +23,7 @@ import NoticeOutlineIcon from 'gridicons/dist/notice-outline'; import WooPayIncompatibilityNotice from '../settings-warnings/incompatibility-notice'; import { WooPayEnabledSettingsHook } from './interfaces'; +import { WooIcon } from 'wcpay/payment-methods-icons'; const WooPayExpressCheckoutItem = (): React.ReactElement => { const [ enabledMethodIds ] = useEnabledPaymentMethodIds() as Array< @@ -86,7 +86,7 @@ const WooPayExpressCheckoutItem = (): React.ReactElement => {
    - WooPay +
    { __( diff --git a/client/settings/payment-method-icon/index.js b/client/settings/payment-method-icon/index.js index cbce74a0892..95f782bd640 100644 --- a/client/settings/payment-method-icon/index.js +++ b/client/settings/payment-method-icon/index.js @@ -23,8 +23,7 @@ const PaymentMethodIcon = ( { name, showName } ) => { return ( diff --git a/client/settings/payment-method-icon/style.scss b/client/settings/payment-method-icon/style.scss index 5be6b1064cb..b41235e17af 100644 --- a/client/settings/payment-method-icon/style.scss +++ b/client/settings/payment-method-icon/style.scss @@ -16,11 +16,4 @@ width: 38px; height: auto; } - - &.has-icon-border { - svg { - box-shadow: 0 0 0 1px #ddd; - border-radius: 2px; - } - } } diff --git a/client/style.scss b/client/style.scss index ad0e6c76768..fa062a1fc2a 100644 --- a/client/style.scss +++ b/client/style.scss @@ -169,3 +169,12 @@ .components-tooltip { display: none; } + +img { + &.payment-method__icon { + outline: 1px solid rgba( 0, 0, 0, 0.25 ); + outline-offset: -1px; + border-radius: 3px; + display: block; + } +}