fix get apps link for studio on mobile (#98281)

Automattic · Jan 14, 2025 · 82bd8a4 · 82bd8a4
1 parent 167ecbd
commit 82bd8a4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/client/blocks/get-apps/apps-config.ts → client/blocks/get-apps/apps-config.tsx b/client/blocks/get-apps/apps-config.ts → client/blocks/get-apps/apps-config.tsx
@@ -1,6 +1,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { localizeUrl } from '@automattic/i18n-utils';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, Substitution } from 'i18n-calypso';
 import Apple from 'calypso/assets/images/icons/apple-logo.svg';
 import DesktopAppLogo from 'calypso/assets/images/icons/desktop-app-logo.svg';
 import Linux from 'calypso/assets/images/icons/linux-logo.svg';
@@ -34,6 +34,7 @@ export interface DesktopAppConfig {
 	logoName: string;
 	title: string;
 	subtitle: string;
+	link: Substitution;
 	platforms: Partial< Record< PlatformType, PlatformConfig > >;
 	isPrimary?: boolean;
 }
@@ -103,6 +104,11 @@ export const createWordPressDesktopConfig = (
 		subtitle: translate(
 			'The full WordPress.com experience packaged as an app for your laptop or desktop.'
 		),
+		link: translate( 'Visit {{a}}desktop.wordpress.com{{/a}} on your desktop.', {
+			components: {
+				a: <a href="https://desktop.wordpress.com" />,
+			},
+		} ),
 		platforms: {
 			[ PlatformType.MacIntel ]: {
 				...platformConfigs[ PlatformType.MacIntel ],
@@ -144,6 +150,11 @@ export const createWordPressStudioConfig = (
 		logoName: 'studio-app-logo',
 		title: translate( 'Studio by WordPress.com' ),
 		subtitle: translate( 'A fast, free way to develop locally with WordPress.' ),
+		link: translate( 'Visit {{a}}developer.wordpress.com/studio{{/a}} on your desktop.', {
+			components: {
+				a: <a href="https://developer.wordpress.com/studio/" />,
+			},
+		} ),
 		isPrimary: true,
 		platforms: {
 			[ PlatformType.MacIntel ]: {

diff --git a/client/blocks/get-apps/desktop-download-options.tsx b/client/blocks/get-apps/desktop-download-options.tsx
@@ -39,15 +39,7 @@ export const DesktopDownloadOptions: React.FC< Props > = ( {
 	const translate = useTranslate();
 
 	if ( isMobile ) {
-		return (
-			<div className="get-apps__desktop-link">
-				{ translate( 'Visit {{a}}desktop.wordpress.com{{/a}} on your desktop.', {
-					components: {
-						a: <a href="https://desktop.wordpress.com" />,
-					},
-				} ) }
-			</div>
-		);
+		return <div className="get-apps__desktop-link">{ appConfig.link }</div>;
 	}
 
 	return (

diff --git a/client/blocks/get-apps/style.scss b/client/blocks/get-apps/style.scss
@@ -74,10 +74,6 @@ main.get-apps {
 	}
 
 	.get-apps__desktop-link {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 3px;
 		font-size: $font-body-extra-small;
 	}