(#4972) Update done screen design

ampproject · Jul 3, 2020 · 01c76ec · 01c76ec
1 parent bb518c3
commit 01c76ec
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git 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,15 +212,15 @@ export function Save() {
 									target="_blank"
 									rel="noreferrer"
 								>
-									{ __( 'Visit in Customizer', 'amp' ) }
+									{ __( 'Visit', 'amp' ) }
 								</Button>
 								<Button
 									isPrimary
 									href={ previewPermalink }
 									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
@@ -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
@@ -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' } );
 	} );
 } );