Update compact card link targets

Automattic · Sep 27, 2024 · 1c356e0 · 1c356e0
1 parent 4a73ddf
commit 1c356e0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/client/me/help/main.jsx b/client/me/help/main.jsx
@@ -6,6 +6,7 @@ import {
 } from '@automattic/calypso-products';
 import { CompactCard, Gridicon } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
+import { Icon, external } from '@wordpress/icons';
 import debugModule from 'debug';
 import { localize } from 'i18n-calypso';
 import { PureComponent } from 'react';
@@ -145,7 +146,12 @@ class Help extends PureComponent {
 					<Gridicon icon="video" size={ 36 } />
 					<div className="help__support-link-section">
 						<h2 className="help__support-link-title">
-							{ this.props.translate( 'Video tutorials' ) }
+							{ this.props.translate( 'Video tutorials' ) }{ ' ' }
+							<Icon
+								icon={ external }
+								size={ 16 }
+								className="help__support-link-title__external-icon"
+							/>
 						</h2>
 						<p className="help__support-link-content">
 							{ this.props.translate(
@@ -157,7 +163,7 @@ class Help extends PureComponent {
 				<CompactCard
 					className="help__support-link"
 					href="https://wordpress.com/learn/courses?ref=wpcom-help-more-resources"
-					target="_blank"
+					showLinkIcon={ false }
 				>
 					<Gridicon icon="mail" size={ 36 } />
 					<div className="help__support-link-section">
@@ -170,7 +176,7 @@ class Help extends PureComponent {
 				<CompactCard
 					className="help__support-link"
 					href="https://learn.wordpress.com"
-					target="_blank"
+					showLinkIcon={ false }
 				>
 					<Gridicon icon="list-ordered" size={ 36 } />
 					<div className="help__support-link-section">
@@ -192,7 +198,7 @@ class Help extends PureComponent {
 				className="help__support-link"
 				href={ localizeUrl( 'https://wordpress.com/webinars/' ) }
 				onClick={ this.trackCoursesButtonClick }
-				target="_blank"
+				showLinkIcon={ false }
 			>
 				<Gridicon icon="chat" size={ 36 } />
 				<div className="help__support-link-section">

diff --git a/client/me/help/style.scss b/client/me/help/style.scss
@@ -56,6 +56,11 @@
 	color: var(--color-neutral-70);
 	font-size: $font-body;
 	font-weight: 600;
+
+	.help__support-link-title__external-icon {
+		vertical-align: text-bottom;
+		fill: currentColor;
+	}
 }
 
 .help__support-link-content {