AP: Apply the design updates (#97087)

* Apply the design updates * Fix tests
Automattic · Dec 5, 2024 · f254f15 · f254f15
1 parent 0c61d33
commit f254f15
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/...repository/site-migration-application-password-authorization/components/authorization.tsx b/...repository/site-migration-application-password-authorization/components/authorization.tsx
@@ -1,8 +1,17 @@
 import { NextButton } from '@automattic/onboarding';
-import { check, Icon } from '@wordpress/icons';
+import { Icon, loop, backup, shield } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 
-const AuthorizationBenefits = ( { benefits }: { benefits: string[] } ) => {
+interface AuthorizationBenefitsItem {
+	icon: React.ReactElement;
+	text: string;
+}
+
+interface AuthorizationBenefitsProps {
+	benefits: AuthorizationBenefitsItem[];
+}
+
+const AuthorizationBenefits = ( { benefits }: AuthorizationBenefitsProps ) => {
 	return (
 		<div className="site-migration-application-password-authorization__benefits">
 			{ benefits.map( ( benefit, index ) => (
@@ -11,9 +20,9 @@ const AuthorizationBenefits = ( { benefits }: { benefits: string[] } ) => {
 					key={ index }
 				>
 					<div className="site-migration-application-password-authorization__benefits-item-icon">
-						<Icon icon={ check } size={ 20 } />
+						<Icon icon={ benefit.icon } size={ 20 } />
 					</div>
-					<span>{ benefit }</span>
+					<span>{ benefit.text }</span>
 				</div>
 			) ) }
 		</div>
@@ -47,9 +56,20 @@ const Authorization = ( { onShareCredentialsClick, onAuthorizationClick }: Autho
 				<h3>{ translate( "Here's what else you're getting" ) }</h3>
 				<AuthorizationBenefits
 					benefits={ [
-						translate( 'Uninterrupted service throughout the entire migration experience.' ),
-						translate( 'Unmatched reliability with 99.999% uptime and unmetered traffic.' ),
-						translate( 'Round-the-clock security monitoring and DDoS protection.' ),
+						{
+							icon: loop,
+							text: translate(
+								'Uninterrupted service throughout the entire migration experience.'
+							),
+						},
+						{
+							icon: backup,
+							text: translate( 'Unmatched reliability with 99.999% uptime and unmetered traffic.' ),
+						},
+						{
+							icon: shield,
+							text: translate( 'Round-the-clock security monitoring and DDoS protection.' ),
+						},
 					] }
 				/>
 			</div>

diff --git a/...ow/internals/steps-repository/site-migration-application-password-authorization/index.tsx b/...ow/internals/steps-repository/site-migration-application-password-authorization/index.tsx
@@ -5,6 +5,7 @@ import DocumentHead from 'calypso/components/data/document-head';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import Notice from 'calypso/components/notice';
+import NoticeAction from 'calypso/components/notice/notice-action';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -68,15 +69,14 @@ const SiteMigrationApplicationPasswordsAuthorization: Step = function ( { naviga
 	let notice = undefined;
 	if ( isStoreApplicationPasswordError ) {
 		notice = (
-			<Notice status="is-error" showDismiss={ false }>
-				{ translate( "We couldn't complete the authorization." ) }
-				<button
-					className="button navigation-link step-container__navigation-link has-underline is-borderless site-migration-application-password-authorization__contact-me-button"
-					type="button"
-					onClick={ contactMe }
-				>
-					{ translate( 'Please contact me.' ) }
-				</button>
+			<Notice
+				status="is-warning"
+				showDismiss={ false }
+				text={ translate(
+					'We ran into a problem connecting to your site. Please try again or let us know so we can help you out.'
+				) }
+			>
+				<NoticeAction onClick={ contactMe }>{ translate( 'Get help' ) }</NoticeAction>
 			</Notice>
 		);
 	} else if ( isAuthorizationRejected ) {

diff --git a/...w/internals/steps-repository/site-migration-application-password-authorization/style.scss b/...w/internals/steps-repository/site-migration-application-password-authorization/style.scss
@@ -38,14 +38,14 @@
 		.site-migration-application-password-authorization__benefits-item-icon {
 			width: 42px;
 			height: 42px;
-			background-color: var(--studio-wordpress-blue-10);
+			background-color: var(--studio-gray-5);
 			border-radius: 4px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			flex-shrink: 0;
 			svg {
-				fill: var(--studio-wordpress-blue-50);
+				fill: var(--studio-gray-70);
 			}
 		}
 	}

diff --git a/...ternals/steps-repository/site-migration-application-password-authorization/test/index.tsx b/...ternals/steps-repository/site-migration-application-password-authorization/test/index.tsx
@@ -79,7 +79,7 @@ describe( 'SiteMigrationApplicationPasswordAuthorization', () => {
 		const initialEntry = `/step?from=${ sourceUrl }&authorizationUrl=${ encodedAuthorizationUrl }&user_login=test&password=test`;
 		render( {}, { initialEntry } );
 
-		const errorMessage = await findByText( /We couldn't complete the authorization./ );
+		const errorMessage = await findByText( /Get help/ );
 
 		await waitFor( () => {
 			expect( errorMessage ).toBeVisible();