Studio: Open the site's URL from the Sync connect popup (#799)

* Make links open in sync modal --------- Co-authored-by: Kateryna Kodonenko <[email protected]>
Automattic · Jan 16, 2025 · fa48819 · fa48819
1 parent 3cebcaf
commit fa48819
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/sync-sites-modal-selector.tsx b/src/components/sync-sites-modal-selector.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { useOffline } from '../hooks/use-offline';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
+import { ArrowIcon } from './arrow-icon';
 import { Badge } from './badge';
 import Button from './button';
 import { CreateButton } from './connect-create-buttons';
@@ -206,11 +207,19 @@ function SiteItem( {
 				<div className={ cx( 'a8c-body truncate', ! isSyncable && 'text-a8c-gray-30' ) }>
 					{ site.name }
 				</div>
-				<div
-					className={ cx( 'a8c-body-small text-a8c-gray-30 truncate', isSelected && 'text-white' ) }
+				<Button
+					variant="link"
+					className={ cx(
+						'a8c-body-small truncate !p-0',
+						isSelected
+							? '!text-inherit hover:!text-inherit'
+							: '!text-a8c-gray-30 hover:!text-a8c-gray-30'
+					) }
+					onClick={ () => getIpcApi().openURL( site.url ) }
 				>
 					{ site.url.replace( /^https?:\/\//, '' ) }
-				</div>
+					<ArrowIcon />
+				</Button>
 			</div>
 			{ isSyncable && (
 				<div className="flex gap-2">