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();