From c4bc33532ec955f5b14fb1846908b2ad5d76d7ea Mon Sep 17 00:00:00 2001
From: valterlorran <valterlorran@hotmail.com>
Date: Wed, 3 Jul 2024 18:15:31 -0300
Subject: [PATCH] Site Migration: Add the possibility of exiting the
 Instructions step in the Assisted Migration flow (#92289)

* Add an exit to the Do-it-for-me dead-end page

* remove extra space

* Remove unused Button import

---------

Co-authored-by: Mark Biek <mark.biek@automattic.com>
---
 .../importer-migrate-message/index.tsx        | 23 +++++++++++++------
 .../importer-migrate-message/style.scss       |  4 ++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/index.tsx
index 094d9358f05095..4af111f6387800 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/index.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@automattic/components';
 import { useLocale } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
 import { createInterpolateElement } from '@wordpress/element';
@@ -15,6 +14,8 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { UserData } from 'calypso/lib/user/user';
 import { useSelector } from 'calypso/state';
 import { getCurrentUser } from 'calypso/state/current-user/selectors';
+import FlowCard from '../components/flow-card';
+import { redirect } from '../import/util';
 import { useSubmitMigrationTicket } from './hooks/use-submit-migration-ticket';
 
 const ImporterMigrateMessage: Step = () => {
@@ -93,12 +94,20 @@ const ImporterMigrateMessage: Step = () => {
 						{ __( `We'll help you with the domain changes after the migration is completed.` ) }
 					</div>
 					<div className="migration-message__actions">
-						<Button primary transparent href={ `/home/${ siteSlug }` }>
-							{ __( 'Let me explore' ) }
-						</Button>
-						<Button primary transparent href="/support">
-							{ __( 'Help me learn' ) }
-						</Button>
+						<FlowCard
+							title={ __( 'Let me explore' ) }
+							text={ __(
+								'Discover more features and options available on WordPress.com on your own.'
+							) }
+							onClick={ () => redirect( `/home/${ siteSlug }` ) }
+						/>
+						<FlowCard
+							title={ __( 'Help me learn' ) }
+							text={ __(
+								'Access guides and tutorials to better understand how to use WordPress.com.'
+							) }
+							onClick={ () => redirect( '/support' ) }
+						/>
 					</div>
 				</>
 			}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
index 465d43de99413a..7a8af02171adf7 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss
@@ -57,7 +57,7 @@
 
 	.migration-message__actions {
 		display: flex;
-		gap: 2em;
-		margin-top: 3em; /* could also work with padding-top */
+		justify-content: center;
+		margin: 0 -10px;
 	}
 }