Use Core Modal and Button component styles (#96267)

Automattic · Nov 14, 2024 · 288ee60 · 288ee60
1 parent ecc4164
commit 288ee60
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 11 deletions.
diff --git a/client/sites/settings/site/visibility/launch-confirmation-modal.tsx b/client/sites/settings/site/visibility/launch-confirmation-modal.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@automattic/components';
 import styled from '@emotion/styled';
-import { Modal } from '@wordpress/components';
+import { Modal, Button } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
 
 const ActionButtons = styled.div( {
@@ -23,22 +22,19 @@ export function LaunchConfirmationModal( {
 	const modalTitle = translate( "You're about to launch this website" );
 
 	return (
-		<Modal
-			className="site-settings__launch-confirmation-modal"
-			title={ modalTitle }
-			onRequestClose={ closeModal }
-		>
+		<Modal title={ modalTitle } onRequestClose={ closeModal } size="medium">
 			{ message && <p>{ message }</p> }
 			<p>{ translate( 'Ready to launch?' ) }</p>
 			<ActionButtons>
 				<Button
+					variant="secondary"
 					onClick={ () => {
 						closeModal();
 					} }
 				>
 					{ translate( 'Cancel' ) }
 				</Button>
-				<Button primary onClick={ onConfirmation }>
+				<Button variant="primary" onClick={ onConfirmation }>
 					{ translate( 'Launch site' ) }
 				</Button>
 			</ActionButtons>

diff --git a/client/sites/settings/site/visibility/styles.scss b/client/sites/settings/site/visibility/styles.scss
@@ -21,6 +21,3 @@
 	white-space: nowrap;
 }
 
-.site-settings__launch-confirmation-modal {
-	max-width: 60%;
-}