Merge pull request #10183 from google/bug/10040-input-copy

Bug/10040 input copy

assets/js/components/user-input/UserInputPreview.js

@@ -277,7 +277,7 @@ export default function UserInputPreview( props ) {
 				<UserInputPreviewGroup
 					slug={ USER_INPUT_QUESTIONS_GOALS }
 					title={ __(
-						'What are your top goals for this site?',
+						'What are your top 3 goals for this site?',
 						'google-site-kit'
 					) }
 					values={ settings?.goals?.values || [] }

assets/js/components/user-input/UserInputQuestionInfo.js

@@ -56,7 +56,7 @@ export default function UserInputQuestionInfo( { slug, questionNumber } ) {
 		<Fragment>
 			<Cell
 				className="googlesitekit-user-input__question-instructions"
-				lgSize={ 5 }
+				lgSize={ 6 }
 				mdSize={ 8 }
 				smSize={ 4 }
 			>

assets/js/components/user-input/util/constants.js

@@ -91,36 +91,32 @@ export const USER_INPUT_PURPOSE_TO_CONVERSION_EVENTS_MAPPING = {
  * @return {Object} Questions object.
  */
 export function getUserInputQuestions() {
+	const description = __(
+		'Based on your answer, Site Kit will suggest the metrics you see on your dashboard to help you track how close you’re getting to your specific goals',
+		'google-site-kit'
+	);
+
 	return [
 		{
 			title: __(
 				'What is the main purpose of this site?',
 				'google-site-kit'
 			),
-			description: __(
-				'Based on your answer, Site Kit will tailor the metrics you see on your dashboard to help you track progress towards your specific goals',
-				'google-site-kit'
-			),
+			description,
 		},
 		{
 			title: __(
 				'How often do you create new content for this site?',
 				'google-site-kit'
 			),
-			description: __(
-				'Based on your answer, Site Kit will suggest new features for your dashboard related to content creation',
-				'google-site-kit'
-			),
+			description,
 		},
 		{
 			title: __(
-				'What are your top goals for this site?',
-				'google-site-kit'
-			),
-			description: __(
-				'Based on your answers, Site Kit will tailor the metrics and recommendations you see on your dashboard to help you make progress in these areas',
+				'What are your top 3 goals for this site?',
 				'google-site-kit'
 			),
+			description,
 		},
 	];
 }
@@ -142,14 +138,11 @@ export function getUserInputAnswers() {
 			),
 			sell_products: __( 'Sell products', 'google-site-kit' ),
 			provide_services: __( 'Provide services', 'google-site-kit' ),
-			monetize_content: __(
-				'Monetize content (with ads or affiliate links)',
-				'google-site-kit'
-			),
+			monetize_content: __( 'Monetize content', 'google-site-kit' ),
 			publish_blog: __( 'Publish a blog', 'google-site-kit' ),
 			publish_news: __( 'Publish news content', 'google-site-kit' ),
 			share_portfolio: __(
-				'Share a business card or portfolio to represent me or my company online',
+				'Portfolio or business card',
 				'google-site-kit'
 			),
 			other: __( 'Other', 'google-site-kit' ),
@@ -183,6 +176,7 @@ export function getUserInputAnswers() {
 				'Generate more revenue',
 				'google-site-kit'
 			),
+			generating_leads: __( 'Generate leads', 'google-site-kit' ),
 			help_better_rank: __(
 				'Help my content rank in a better position in Google search results',
 				'google-site-kit'
@@ -192,7 +186,7 @@ export function getUserInputAnswers() {
 				'google-site-kit'
 			),
 			encourage_to_post: __(
-				'Tips for generating and posting engaging content updates',
+				'Encouragement to post more frequently',
 				'google-site-kit'
 			),
 			other: __( 'Other', 'google-site-kit' ),

assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss

@@ -58,7 +58,7 @@
 				top: 0;
 			}
 
-			@media (min-width: $bp-wpdb3) {
+			@media (min-width: $bp-xxxlarge) {
 				max-width: 30%;
 			}
 		}

assets/sass/components/settings/_googlesitekit-settings-user-input.scss

@@ -36,6 +36,13 @@
 			overflow: hidden;
 			padding: 0;
 		}
+
+		.googlesitekit-user-input__select-options-wrapper {
+
+			@media (min-width: $bp-xxxlarge) {
+				padding-left: unset;
+			}
+		}
 	}
 
 	.googlesitekit-user-input__notification-text-loading {

assets/sass/components/sign-in-with-google/_googlesitekit-sign-in-with-google-setup-module.scss

@@ -20,7 +20,7 @@
 
 	.googlesitekit-setup-cta-banner__svg-wrapper--sign-in-with-google-setup-cta {
 
-		@media (min-width: $bp-wpdb3) {
+		@media (min-width: $bp-xxxlarge) {
 			height: 100%;
 			position: relative;
 		}
@@ -39,7 +39,7 @@
 				max-height: 274px;
 			}
 
-			@media (min-width: $bp-wpdb3) {
+			@media (min-width: $bp-xxxlarge) {
 				max-height: 300px;
 				position: absolute;
 				right: 0;

assets/sass/components/user-input/googlesitekit-user-input-controls.scss

@@ -39,10 +39,6 @@
 			font-size: $fs-body-md;
 			letter-spacing: $ls-s;
 			line-height: $lh-body-md;
-
-			@media (min-width: $bp-tablet) {
-				padding: 10px 0;
-			}
 		}
 	}
 

assets/sass/components/user-input/googlesitekit-user-input-module.scss

@@ -142,10 +142,17 @@
 
 	.googlesitekit-user-input__select-options-wrapper {
 		grid-row: span 2;
+
+		@media (min-width: $bp-desktop) {
+			grid-column-start: 9;
+		}
+		@media (min-width: $bp-xxxlarge) {
+			grid-column-start: 7;
+			padding-left: 60px;
+		}
 	}
 
 	p.googlesitekit-user-input__select-instruction {
-		border-bottom: 1px solid $c-mercury;
 		color: $c-surfaces-on-surface;
 		font-size: $fs-body-sm;
 		line-height: $lh-body-sm;

assets/sass/components/user-input/googlesitekit-user-input-questions.scss

@@ -54,6 +54,10 @@
 		display: flex;
 		flex-direction: column;
 
+		@media (min-width: $bp-xxxlarge) {
+			padding-right: 60px;
+		}
+
 		h1 {
 			color: $c-surfaces-on-surface;
 			font-size: $fs-title-sm;

assets/sass/config/_variables.scss

@@ -267,6 +267,7 @@ $width-wpAdminBarTablet: 783;
 $width-desktop: 960;
 $width-xlarge: 1280;
 $width-xxlarge: 1440;
+$width-xxxlarge: 1500;
 
 // Custom Media Breakpoints
 $bp-xsmallOnly: $width-xsmall - 1 + px;
@@ -278,6 +279,7 @@ $bp-wpAdminBarTablet: $width-wpAdminBarTablet + px;
 $bp-desktop: $width-desktop + px;
 $bp-xlarge: $width-xlarge + px;
 $bp-xxlarge: $width-xxlarge + px;
+$bp-xxxlarge: $width-xxxlarge + px;
 
 // Specific for WP Dashboard
 $bp-wpdb1: 800px;