From 8e305deb48f8f305bf33c30f3dfdaecca32b7c94 Mon Sep 17 00:00:00 2001
From: Dusty Reagan <dusty@dustyreagan.com>
Date: Fri, 6 Sep 2024 14:25:44 -0500
Subject: [PATCH] Themes Marketplace: Add external icon to external theme demo
 buttons (#94300)

* Add external icon to external theme demo buttons

* Use current color on SVG
---
 client/my-sites/theme/main.jsx   | 4 ++++
 client/my-sites/theme/style.scss | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
index 28f53036c6986..040eb97625e1e 100644
--- a/client/my-sites/theme/main.jsx
+++ b/client/my-sites/theme/main.jsx
@@ -21,6 +21,7 @@ import {
 } from '@automattic/design-picker';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import { localize, getLocaleSlug } from 'i18n-calypso';
 import photon from 'photon';
@@ -759,6 +760,7 @@ class ThemeSheet extends Component {
 			! isWPForTeamsSite &&
 			! this.shouldRenderForStaging() &&
 			( ! this.hasWpOrgThemeUpsellBanner() || ! isLoggedIn );
+		const isExternalLink = ! this.props.isWpcomTheme || this.props.isExternallyManagedTheme;
 
 		return (
 			<div className="theme__sheet-header">
@@ -785,6 +787,7 @@ class ThemeSheet extends Component {
 						/>
 						{ this.shouldRenderPreviewButton() && ! isLivePreviewSupported && (
 							<Button
+								className="theme__sheet-demo-button"
 								onClick={ ( e ) => {
 									this.previewAction( e, 'link', 'actions' );
 								} }
@@ -792,6 +795,7 @@ class ThemeSheet extends Component {
 								{ translate( 'Demo site', {
 									context: 'The button to open the demo site of individual theme',
 								} ) }
+								{ isExternalLink && <Icon icon={ external } size={ 16 } /> }
 							</Button>
 						) }
 					</div>
diff --git a/client/my-sites/theme/style.scss b/client/my-sites/theme/style.scss
index c4893f845a875..30a6ece056f90 100644
--- a/client/my-sites/theme/style.scss
+++ b/client/my-sites/theme/style.scss
@@ -234,6 +234,14 @@ $button-border: 4px;
 			top: auto;
 			margin-right: 0 !important;
 		}
+
+		.theme__sheet-demo-button {
+			svg {
+				vertical-align: text-bottom;
+				margin-left: 4px;
+				fill: currentColor;
+			}
+		}
 	}
 
 	.theme__sheet-main-info-title {