Fix mobile app modal UI (#52201)

* Fix mobile app modal UI

* Add changelog

* Fix mobile style

plugins/woocommerce/changelog/fix-mobile-app-modal-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix mobile app modal UI

plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/index.tsx

@@ -115,8 +115,21 @@ export const MobileAppModal = () => {
 		state,
 		isRetryingMagicLinkSend,
 		magicLinkRequestStatus,
+		completeAppInstallationStep,
 	] );
 
+	const clearQueryString = useCallback( () => {
+		// clear the search params that we use so that the URL is clean
+		updateQueryString(
+			{
+				jetpackState: undefined,
+				mobileAppModal: undefined,
+			},
+			undefined,
+			Object.fromEntries( searchParams.entries() )
+		);
+	}, [ searchParams ] );
+
 	return (
 		<>
 			{ guideIsOpen && (
@@ -125,21 +138,19 @@ export const MobileAppModal = () => {
 						updateOptions( {
 							woocommerce_admin_dismissed_mobile_app_modal: 'yes',
 						} );
-						// clear the search params that we use so that the URL is clean
+						clearQueryString();
-						updateQueryString(
-							{
-								jetpackState: undefined,
-								mobileAppModal: undefined,
-							},
-							undefined,
-							Object.fromEntries( searchParams.entries() )
-						);
 					} }
 					className={ 'woocommerce__mobile-app-welcome-modal' }
 					pages={ [
 						{
 							content: (
-								<ModalIllustrationLayout body={ pageContent } />
+								<ModalIllustrationLayout
+									body={ pageContent }
+									onDismiss={ () => {
+										clearQueryString();
+										setGuideIsOpen( false );
+									} }
+								/>
 							),
 						},
 					] }

plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/layouts/ModalIllustrationLayout.tsx

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Button, Icon } from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -10,8 +12,10 @@ import Illustration from '../illustrations/intro-devices-desktop.png';
 
 export const ModalIllustrationLayout = ( {
 	body,
+	onDismiss,
 }: {
 	body: React.ReactNode;
+	onDismiss: () => void;
 } ) => {
 	return (
 		<div className="mobile-app-modal-layout">
@@ -25,6 +29,15 @@ export const ModalIllustrationLayout = ( {
 					) }
 				/>
 			</div>
+			<Button
+				variant="tertiary"
+				className="woocommerce__mobile-app-welcome-modal__close-button"
+				label={ __( 'Close', 'woocommerce' ) }
+				icon={ <Icon icon={ closeSmall } viewBox="6 4 12 14" /> }
+				iconSize={ 16 }
+				size={ 16 }
+				onClick={ onDismiss }
+			></Button>
 		</div>
 	);
 };

plugins/woocommerce/client/admin/client/homescreen/mobile-app-modal/style.scss

@@ -16,6 +16,11 @@
 	// Overrides the default modal max-height.
 	max-height: unset;
 
+	@media only screen and (max-width: $break-mobile) {
+		min-width: 100%;
+		max-height: 100%;
+	}
+
 	.components-modal__header {
 		height: 0;
 
@@ -35,6 +40,10 @@
 			grid-template-columns: 3fr 2fr;
 			min-height: 575px;
 
+			@media only screen and (max-width: $break-mobile) {
+				grid-template-columns: 1fr;
+			}
+
 			.mobile-app-modal-content {
 				display: flex;
 
@@ -47,10 +56,13 @@
 					.modal-layout-header {
 						.modal-header > h1 {
 							line-height: normal;
+							margin: 24px 0 0;
 						}
 					}
 					.modal-layout-body {
 						flex-grow: 1;
+						margin-bottom: 16px;
+
 						.modal-subheader {
 							margin-top: 16px;
 							margin-bottom: 24px;
@@ -58,6 +70,7 @@
 								font-weight: 400;
 								color: #757575;
 								line-height: 1.6rem;
+								margin: 0;
 							}
 						}
 					}
@@ -95,13 +108,17 @@
 				background-repeat: no-repeat;
 				background-image: url("data:image/svg+xml,%3Csvg width='341' height='421' viewBox='0 0 341 421' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-258.536 396.856L-329.719 373.412C-338.484 370.525 -343.249 361.08 -340.362 352.315L-271.987 144.717C-269.1 135.952 -259.655 131.187 -250.89 134.074L-179.707 157.519C-69.5553 193.799 49.1512 133.914 85.431 23.7615L99.9575 -20.3434C102.844 -29.1081 112.29 -33.8731 121.054 -30.9864L328.652 37.3885C337.417 40.2752 342.182 49.7205 339.295 58.4852L324.769 102.59C244.953 344.925 -16.2016 476.672 -258.536 396.856Z' fill='%237F54B3'/%3E%3C/svg%3E");
 
-				padding-top: 36px;
+				padding-top: 74px;
 				overflow: clip;
 
 				img {
 					margin-right: -24px;
 					width: 100%;
 				}
+
+				@media only screen and (max-width: $break-mobile) {
+					display: none;
+				}
 			}
 		}
 	}
@@ -113,6 +130,25 @@
 	.fill-theme-color {
 		fill: var(--wp-admin-theme-color);
 	}
+
+	.components-button.woocommerce__mobile-app-welcome-modal__close-button {
+		width: 24px;
+		height: 24px;
+		min-width: 24px;
+		position: absolute;
+		right: 16px;
+		top: 16px;
+		margin: 0;
+		padding: 0;
+
+		svg {
+			fill: #fff;
+
+			@media only screen and (max-width: $break-mobile) {
+				fill: $gray-900;
+			}
+		}
+	}
 }
 .woo-icon {
 	height: 48px;
@@ -280,3 +316,4 @@ button.components-button.send-magic-link-button {
 		}
 	}
 }
+