fix: express checkouts links consistency (#7198)

Automattic · Sep 14, 2023 · 502d50c · 502d50c
1 parent 0c2de49
commit 502d50c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 37 deletions.
diff --git a/changelog/fix-express-checkouts-links-consistency b/changelog/fix-express-checkouts-links-consistency
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+express checkout links UI consistency & area increase
diff --git a/client/settings/express-checkout/apple-google-pay-item.tsx b/client/settings/express-checkout/apple-google-pay-item.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { Button, CheckboxControl } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
 import React from 'react';
 
@@ -150,13 +150,14 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 						</div>
 					</div>
 					<div className="express-checkout__link">
-						<a
+						<Button
 							href={ getPaymentMethodSettingsUrl(
 								'payment_request'
 							) }
+							isSecondary
 						>
 							{ __( 'Customize', 'woocommerce-payments' ) }
-						</a>
+						</Button>
 					</div>
 				</div>
 			</div>

diff --git a/client/settings/express-checkout/link-item.tsx b/client/settings/express-checkout/link-item.tsx
@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+import { Button, CheckboxControl, VisuallyHidden } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
 
 /**
@@ -154,26 +154,18 @@ const LinkExpressCheckoutItem = (): React.ReactElement => {
 								</div>
 							</div>
 							<div className="express-checkout__link">
-								{
-									/* eslint-disable jsx-a11y/anchor-has-content */
-									interpolateComponents( {
-										mixedString: __(
-											'{{linkDocs}}Read more{{/linkDocs}}',
-											'woocommerce-payments'
-										),
-										components: {
-											linkDocs: (
-												<a
-													target="_blank"
-													rel="noreferrer"
-													/* eslint-disable-next-line max-len */
-													href="https://woocommerce.com/document/woopayments/payment-methods/link-by-stripe/"
-												/>
-											),
-										},
-									} )
-									/* eslint-enable jsx-a11y/anchor-has-content */
-								}
+								<Button
+									target="_blank"
+									rel="noreferrer"
+									/* eslint-disable-next-line max-len */
+									href="https://woocommerce.com/document/woopayments/payment-methods/link-by-stripe/"
+									isSecondary
+								>
+									{ __(
+										'Read more',
+										'woocommerce-payments'
+									) }
+								</Button>
 							</div>
 						</div>
 					</div>

diff --git a/client/settings/express-checkout/style.scss b/client/settings/express-checkout/style.scss
@@ -135,18 +135,8 @@
 			}
 
 			&__link {
-				padding: 12px;
-				border: 1px solid #007cba;
-				border-radius: 2px;
-				font-size: 12px;
-				height: 18px;
 				align-self: center;
 
-				a {
-					text-decoration: none;
-					white-space: nowrap;
-				}
-
 				@include breakpoint( '<660px' ) {
 					align-self: flex-start;
 					margin-top: 20px;

diff --git a/client/settings/express-checkout/woopay-item.tsx b/client/settings/express-checkout/woopay-item.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+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';
@@ -162,16 +162,17 @@ const WooPayExpressCheckoutItem = (): React.ReactElement => {
 							</div>
 
 							<div className="express-checkout__link">
-								<a
+								<Button
 									href={ getPaymentMethodSettingsUrl(
 										'woopay'
 									) }
+									isSecondary
 								>
 									{ __(
 										'Customize',
 										'woocommerce-payments'
 									) }
-								</a>
+								</Button>
 							</div>
 						</div>
 					</div>