diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/components/authorization.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/components/authorization.tsx
index f57ac74381624..67cbacfc3550a 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/components/authorization.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-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 (
{ benefits.map( ( benefit, index ) => (
@@ -11,9 +20,9 @@ const AuthorizationBenefits = ( { benefits }: { benefits: string[] } ) => {
key={ index }
>
-
+
-
{ benefit }
+
{ benefit.text }
) ) }
@@ -47,9 +56,20 @@ const Authorization = ( { onShareCredentialsClick, onAuthorizationClick }: Autho
{ translate( "Here's what else you're getting" ) }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/index.tsx
index e49859c710469..b133665b9cfb6 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/index.tsx
+++ b/client/landing/stepper/declarative-flow/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 = (
-
- { translate( "We couldn't complete the authorization." ) }
-
+
+ { translate( 'Get help' ) }
);
} else if ( isAuthorizationRejected ) {
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/style.scss
index edf1400ff39bd..5b7b66ce0ec2f 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/style.scss
+++ b/client/landing/stepper/declarative-flow/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/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/test/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/test/index.tsx
index 82291d296fe0b..d101e4613ca6e 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/test/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/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();