From 01c76ec393a0889d76d39329fd850b9cc1beae69 Mon Sep 17 00:00:00 2001
From: John Watkins <johnwatkins0@gmail.com>
Date: Thu, 2 Jul 2020 20:12:38 -0500
Subject: [PATCH] (#4972) Update done screen design

---
 assets/src/setup/pages/save/index.js   | 18 +++++++++---------
 assets/src/setup/pages/save/style.css  |  7 -------
 tests/e2e/specs/amp-onboarding/done.js |  9 ++++++++-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/src/setup/pages/save/index.js b/assets/src/setup/pages/save/index.js
index 05811e8d1b7..6b1be18180c 100644
--- a/assets/src/setup/pages/save/index.js
+++ b/assets/src/setup/pages/save/index.js
@@ -90,12 +90,6 @@ function Preview() {
 
 	return (
 		<>
-			<AMPInfo icon={ ( props ) => <IconMobile { ...props } /> }>
-				{ 'standard' === themeSupport
-					? __( 'Live view of your site', 'amp' )
-					: __( 'Live view of a page on your site using AMP mode', 'amp' )
-				}
-			</AMPInfo>
 			<Phone>
 				<iframe
 					className="done__preview-iframe"
@@ -110,6 +104,12 @@ function Preview() {
 					} }
 				/>
 			</Phone>
+			<AMPInfo icon={ ( props ) => <IconMobile { ...props } /> }>
+				{ 'standard' === themeSupport
+					? __( 'Live view of your site', 'amp' )
+					: __( 'Live view of a page on your site using AMP mode', 'amp' )
+				}
+			</AMPInfo>
 		</>
 	);
 }
@@ -192,7 +192,7 @@ export function Save() {
 							target="_blank"
 							rel="noreferrer"
 						>
-							{ __( 'Visit your site', 'amp' ) }
+							{ __( 'Visit', 'amp' ) }
 						</Button>
 					) }
 
@@ -212,7 +212,7 @@ export function Save() {
 									target="_blank"
 									rel="noreferrer"
 								>
-									{ __( 'Visit in Customizer', 'amp' ) }
+									{ __( 'Visit', 'amp' ) }
 								</Button>
 								<Button
 									isPrimary
@@ -220,7 +220,7 @@ export function Save() {
 									target="_blank"
 									rel="noreferrer"
 								>
-									{ __( 'Browse AMP Version', 'amp' ) }
+									{ __( 'Browse', 'amp' ) }
 								</Button>
 							</>
 						)
diff --git a/assets/src/setup/pages/save/style.css b/assets/src/setup/pages/save/style.css
index 1140d0f0fee..9ba38e3ddee 100644
--- a/assets/src/setup/pages/save/style.css
+++ b/assets/src/setup/pages/save/style.css
@@ -16,19 +16,12 @@
 	}
 }
 
-.done__link-buttons a {
-	font-size: 14px;
-}
-
 .done__link-buttons a:not(:last-child) {
 	margin-right: 5px;
 }
 
 
 .done__preview-container {
-	border: 2px solid #e8e8e8;
-	border-radius: 8px;
-	padding: 37px;
 	text-align: center;
 
 	@media screen and (max-width: 1279px) {
diff --git a/tests/e2e/specs/amp-onboarding/done.js b/tests/e2e/specs/amp-onboarding/done.js
index 77c8a1c0d6c..233f7a60650 100644
--- a/tests/e2e/specs/amp-onboarding/done.js
+++ b/tests/e2e/specs/amp-onboarding/done.js
@@ -15,7 +15,9 @@ describe( 'Done', () => {
 		testCloseButton( { exists: false } );
 
 		expect( page ).toMatchElement( 'h1', { text: 'Your site is ready' } );
+		expect( page ).toMatchElement( 'p', { text: /standard mode/i } );
 		expect( page ).toMatchElement( '.phone iframe' );
+		expect( page ).toMatchElement( 'a', { text: 'Visit' } );
 	} );
 
 	it( 'renders transitional mode done screen', async () => {
@@ -24,15 +26,20 @@ describe( 'Done', () => {
 		testCloseButton( { exists: false } );
 
 		expect( page ).toMatchElement( 'h1', { text: 'Congratulations!' } );
+		expect( page ).toMatchElement( 'p', { text: /transitional mode/i } );
 		expect( page ).toMatchElement( '.phone iframe' );
+		expect( page ).toMatchElement( 'a', { text: 'Visit' } );
 	} );
 
 	it( 'renders reader mode done screen', async () => {
-		await moveToDoneScreen( { mode: 'transitional' } );
+		await moveToDoneScreen( { mode: 'reader' } );
 
 		testCloseButton( { exists: false } );
 
 		expect( page ).toMatchElement( 'h1', { text: 'Congratulations!' } );
 		expect( page ).toMatchElement( '.phone iframe' );
+		expect( page ).toMatchElement( 'p', { text: /reader mode/i } );
+		expect( page ).toMatchElement( 'a', { text: 'Browse' } );
+		expect( page ).toMatchElement( 'a', { text: 'Visit' } );
 	} );
 } );