Themes Marketplace: Add external icon to the "Preview demo site" butt…

…on (#94730)

* Add external icon to theme demo button

* Add style to icon

* Fix typo

client/my-sites/theme/main.jsx

@@ -600,9 +600,16 @@ class ThemeSheet extends Component {
 	}
 
 	renderScreenshot() {
-		const { isWpcomTheme, name: themeName, demoUrl, translate } = this.props;
+		const {
+			isWpcomTheme,
+			name: themeName,
+			demoUrl,
+			translate,
+			isExternallyManagedTheme,
+		} = this.props;
 		const screenshotFull = isWpcomTheme ? this.getFullLengthScreenshot() : this.props.screenshot;
 		const width = 735;
+		const isExternalLink = ! isWpcomTheme || isExternallyManagedTheme;
 		// Photon may return null, allow fallbacks
 		const photonSrc = screenshotFull && photon( screenshotFull, { width } );
 		const img = screenshotFull && (
@@ -632,6 +639,7 @@ class ThemeSheet extends Component {
 					{ this.shouldRenderPreviewButton() && (
 						<Button className="theme__sheet-preview-demo-site">
 							{ translate( 'Preview demo site' ) }
+							{ isExternalLink && <Icon icon={ external } size={ 16 } /> }
 						</Button>
 					) }
 					{ img }
@@ -649,6 +657,7 @@ class ThemeSheet extends Component {
 						} }
 					>
 						{ translate( 'Preview demo site' ) }
+						{ isExternalLink && <Icon icon={ external } size={ 16 } /> }
 					</Button>
 				) }
 				{ img }

client/my-sites/theme/style.scss

@@ -178,6 +178,15 @@ $button-border: 4px;
 			order: 1;
 		}
 	}
+
+	.theme__sheet-demo-button,
+	.theme__sheet-preview-demo-site {
+		svg {
+			vertical-align: text-bottom;
+			margin-left: 4px;
+			fill: currentColor;
+		}
+	}
 }
 
 .theme__sheet-columns.is-removed {
@@ -246,14 +255,6 @@ $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 {