Reader Onboarding: Add "Step 2" Initial Styling (#95414)

* Add preview column

* Fix lint issues

* Fix code idention

client/reader/onboarding/index.tsx

@@ -26,20 +26,22 @@ const ReaderOnboarding = () => {
 		task?.actionDispatch?.();
 	};
 
+	const taskOneCompleted = followedTags ? followedTags.length > 2 : false;
+
 	const tasks: Task[] = [
 		{
 			id: 'select-interests',
 			title: translate( 'Select some of your interests' ),
 			actionDispatch: () => setIsInterestsModalOpen( true ),
-			completed: followedTags ? followedTags.length > 2 : false,
+			completed: taskOneCompleted,
 			disabled: false,
 		},
 		{
 			id: 'discover-sites',
 			title: translate( "Discover and subscribe to sites you'll love" ),
 			actionDispatch: () => setIsDiscoverModalOpen( true ),
 			completed: false,
-			disabled: false,
+			disabled: ! taskOneCompleted,
 		},
 	];
 

client/reader/onboarding/subscribe-modal/index.tsx

@@ -1,6 +1,6 @@
 import { LoadingPlaceholder } from '@automattic/components';
 import { useQuery } from '@tanstack/react-query';
-import { Modal } from '@wordpress/components';
+import { Modal, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
@@ -9,6 +9,8 @@ import wpcom from 'calypso/lib/wp';
 import { getReaderFollowedTags } from 'calypso/state/reader/tags/selectors';
 import { curatedBlogs } from '../curated-blogs';
 
+import './style.scss';
+
 interface SubscribeModalProps {
 	isOpen: boolean;
 	onClose: () => void;
@@ -101,36 +103,64 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 		return sortedRecommendations.slice( 0, 6 );
 	}, [ followedTagSlugs, apiRecommendedSites ] );
 
+	const headerActions = (
+		<>
+			<Button onClick={ onClose } variant="link">
+				{ __( 'Cancel' ) }
+			</Button>
+		</>
+	);
+
 	return (
 		isOpen && (
-			<Modal onRequestClose={ onClose } isFullScreen>
-				<h2>{ __( "Discover sites that you'll love" ) }</h2>
-				<p>
-					{ __( 'Preview sites by clicking below, then subscribe to any site that inspires you.' ) }
-				</p>
-				{ isLoading && <LoadingPlaceholder /> }
-				{ ! isLoading && combinedRecommendations.length === 0 && (
-					<p>{ __( 'No recommendations available at the moment.' ) }</p>
-				) }
-				{ ! isLoading && combinedRecommendations.length > 0 && (
-					<div className="subscribe-modal__recommended-sites">
-						{ combinedRecommendations.map( ( site: CardData ) => (
-							<ConnectedReaderSubscriptionListItem
-								key={ site.feed_ID }
-								feedId={ site.feed_ID }
-								siteId={ site.site_ID }
-								site={ site }
-								url={ site.site_URL }
-								showLastUpdatedDate={ false }
-								showNotificationSettings={ false }
-								showFollowedOnDate={ false }
-								followSource="reader-onboarding-modal"
-								disableSuggestedFollows
-							/>
-						) ) }
+			<Modal
+				onRequestClose={ onClose }
+				isFullScreen
+				className="subscribe-modal"
+				headerActions={ headerActions }
+				isDismissible={ false }
+			>
+				<div className="subscribe-modal__content">
+					<div className="subscribe-modal__site-list-column">
+						<h2 className="subscribe-modal__title">{ __( "Discover sites that you'll love" ) }</h2>
+						<p>
+							{ __(
+								'Preview sites by clicking below, then subscribe to any site that inspires you.'
+							) }
+						</p>
+						{ isLoading && <LoadingPlaceholder /> }
+						{ ! isLoading && combinedRecommendations.length === 0 && (
+							<p>{ __( 'No recommendations available at the moment.' ) }</p>
+						) }
+						{ ! isLoading && combinedRecommendations.length > 0 && (
+							<div className="subscribe-modal__recommended-sites">
+								{ combinedRecommendations.map( ( site: CardData ) => (
+									<ConnectedReaderSubscriptionListItem
+										key={ site.feed_ID }
+										feedId={ site.feed_ID }
+										siteId={ site.site_ID }
+										site={ site }
+										url={ site.site_URL }
+										showLastUpdatedDate={ false }
+										showNotificationSettings={ false }
+										showFollowedOnDate={ false }
+										followSource="reader-onboarding-modal"
+										disableSuggestedFollows
+									/>
+								) ) }
+							</div>
+						) }
+						<p>{ __( 'Load more recommendations' ) }</p>
+						<Button className="subscribe-modal__continue-button is-primary" onClick={ onClose }>
+							{ __( 'Continue' ) }
+						</Button>
+					</div>
+					<div className="subscribe-modal__preview-column">
+						<div className="subscribe-modal__preview-placeholder">
+							{ __( 'Select a blog to preview its posts' ) }
+						</div>
 					</div>
-				) }
-				<p>{ __( 'Load more recommendations' ) }</p>
+				</div>
 			</Modal>
 		)
 	);

client/reader/onboarding/subscribe-modal/style.scss

@@ -0,0 +1,67 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.subscribe-modal {
+	&__title {
+		font-family: Recoleta, sans-serif;
+		font-size: 2.25rem;
+		font-weight: 400;
+		line-height: 1.2;
+		margin-bottom: 16px;
+		text-wrap: balance;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		@include break-medium {
+			flex-direction: row;
+		}
+	}
+
+	&__site-list-column {
+		flex: 1;
+		padding: 30px;
+
+		@include break-medium {
+			max-width: 450px;
+		}
+
+		.subscribe-modal__continue-button {
+			width: 100%;
+			justify-content: center;
+		}
+
+		p {
+			text-wrap: balance;
+		}
+	}
+
+	&__preview-column {
+		flex: 1;
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+
+		@include break-medium {
+			display: flex;
+		}
+	}
+
+	&__recommended-sites {
+		margin-bottom: 24px;
+	}
+
+	&__preview-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-grow: 1;
+		background-color: #e0e0e0;
+		font-style: italic;
+		border: 1px solid #ccc;
+		border-radius: 6px; /* stylelint-disable-line scales/radii */
+	}
+}