Update Studio CLI settings toggle copy and layout

apps/studio/src/modules/user-settings/components/studio-cli-toggle.tsx

@@ -1,10 +1,7 @@
 import { FormToggle } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { LearnMoreLink } from 'src/components/learn-more';
-import { isMac } from 'src/lib/app-globals';
-import { SettingsFormField } from 'src/modules/user-settings/components/settings-form-field';
 
 type StudioCLIToggleProps = {
 	value: boolean;
@@ -15,53 +12,34 @@ export function StudioCliToggle( { value, onChange }: StudioCLIToggleProps ) {
 	const { __ } = useI18n();
 
 	return (
-		<SettingsFormField label={ __( 'Studio CLI' ) }>
-			<div className="flex justify-start items-start gap-2">
-				<FormToggle
-					className="mt-0.5"
-					id="studio-cli-toggle"
-					checked={ value }
-					onChange={ ( event ) => onChange( event.target.checked ) }
-				/>
-				<div className="flex flex-col">
-					<label htmlFor="studio-cli-toggle">
-						{ isMac()
-							? createInterpolateElement(
-									sprintf(
-										/* translators: %s is the name of the WordPress Studio CLI command ("studio") */
-										__( 'Enable the <code>%s</code> command in the terminal.' ),
-										'studio'
-									),
-									{ code: <code /> }
-							  )
-							: createInterpolateElement(
-									sprintf(
-										/* translators: %s is the name of the WordPress Studio CLI command ("studio") */
-										__( 'Enable the <code>%s</code> command in the terminal. <learn_more_link />' ),
-										'studio'
-									),
-									{
-										code: <code />,
-										learn_more_link: <LearnMoreLink docsLinksKey="docsCli" />,
-									}
-							  ) }
-					</label>
-					{ isMac() && (
-						<div className="a8c-body-small text-a8c-gray-700">
-							{ createInterpolateElement(
-								__(
-									'Toggling this option will prompt you for admin privileges to install or uninstall the Studio CLI for use in the terminal. <learn_more_link />'
-								),
-								{
-									learn_more_link: (
-										<LearnMoreLink docsLinksKey="docsCli" className="a8c-body-small" />
-									),
-								}
-							) }
-						</div>
+		<div className="flex justify-start items-start gap-2">
+			<FormToggle
+				className="mt-0.5"
+				id="studio-cli-toggle"
+				checked={ value }
+				onChange={ ( event ) => onChange( event.target.checked ) }
+			/>
+			<div className="flex flex-col gap-1">
+				<label htmlFor="studio-cli-toggle" className="font-semibold">
+					{ __( 'Studio CLI for terminal' ) }
+				</label>
+				<div className="a8c-body-small text-frame-text-secondary">
+					{ createInterpolateElement(
+						__(
+							'Use the <code>studio</code> command in any terminal to manage sites, run WP-CLI commands, and control your local environment. <learn_more_link />'
+						),
+						{
+							code: <code className="bg-black/10 rounded px-1 py-0.5 text-xs" />,
+							learn_more_link: (
+								<LearnMoreLink
+									docsLinksKey="docsCli"
+									className="a8c-body-small !text-frame-theme"
+								/>
+							),
+						}
 					) }
 				</div>
 			</div>
-		</SettingsFormField>
+		</div>
 	);
 }

apps/studio/src/modules/user-settings/components/tests/user-settings.test.tsx

@@ -132,7 +132,7 @@ describe( 'UserSettings', () => {
 				expect( screen.getByText( 'General' ) ).toHaveAttribute( 'aria-selected', 'true' );
 				expect( screen.getByText( 'Language' ) ).toBeInTheDocument();
 				expect( screen.getByText( 'Terminal application' ) ).toBeInTheDocument();
-				expect( screen.getByText( 'Studio CLI' ) ).toBeInTheDocument();
+				expect( screen.getByText( 'Studio CLI for terminal' ) ).toBeInTheDocument();
 			} );
 
 			await user.click( screen.getByText( 'Account' ) );