diff --git a/assets/js/components/user-input/UserInputPreview.js b/assets/js/components/user-input/UserInputPreview.js index e6df2de00b2..f91fbc2c8e5 100644 --- a/assets/js/components/user-input/UserInputPreview.js +++ b/assets/js/components/user-input/UserInputPreview.js @@ -277,7 +277,7 @@ export default function UserInputPreview( props ) { diff --git a/assets/js/components/user-input/util/constants.js b/assets/js/components/user-input/util/constants.js index 3ffec3f3be2..022da600966 100644 --- a/assets/js/components/user-input/util/constants.js +++ b/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' ), diff --git a/assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss b/assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss index 08c9cdbc99e..e3001439606 100644 --- a/assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss +++ b/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%; } } diff --git a/assets/sass/components/settings/_googlesitekit-settings-user-input.scss b/assets/sass/components/settings/_googlesitekit-settings-user-input.scss index 25f4d928b91..bc93624dbbf 100644 --- a/assets/sass/components/settings/_googlesitekit-settings-user-input.scss +++ b/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 { diff --git a/assets/sass/components/sign-in-with-google/_googlesitekit-sign-in-with-google-setup-module.scss b/assets/sass/components/sign-in-with-google/_googlesitekit-sign-in-with-google-setup-module.scss index 8d5421ec9df..a38d8e30241 100644 --- a/assets/sass/components/sign-in-with-google/_googlesitekit-sign-in-with-google-setup-module.scss +++ b/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; diff --git a/assets/sass/components/user-input/googlesitekit-user-input-controls.scss b/assets/sass/components/user-input/googlesitekit-user-input-controls.scss index c774cbbcb59..a9100dbb40a 100644 --- a/assets/sass/components/user-input/googlesitekit-user-input-controls.scss +++ b/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; - } } } diff --git a/assets/sass/components/user-input/googlesitekit-user-input-module.scss b/assets/sass/components/user-input/googlesitekit-user-input-module.scss index 0a513315ca7..34faed2010b 100644 --- a/assets/sass/components/user-input/googlesitekit-user-input-module.scss +++ b/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; diff --git a/assets/sass/components/user-input/googlesitekit-user-input-questions.scss b/assets/sass/components/user-input/googlesitekit-user-input-questions.scss index 1ad299d52f2..884440771e9 100644 --- a/assets/sass/components/user-input/googlesitekit-user-input-questions.scss +++ b/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; diff --git a/assets/sass/config/_variables.scss b/assets/sass/config/_variables.scss index 64deafeb7fe..7f367fdd8b4 100644 --- a/assets/sass/config/_variables.scss +++ b/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;