diff --git a/src/OnboardingSPA/components/AdminBar/stylesheet.scss b/src/OnboardingSPA/components/AdminBar/stylesheet.scss index 4768b72e5..09101c279 100644 --- a/src/OnboardingSPA/components/AdminBar/stylesheet.scss +++ b/src/OnboardingSPA/components/AdminBar/stylesheet.scss @@ -16,8 +16,9 @@ $light-grey : #a0a5aa; &__wplogo { color: var(--nfd-onboarding-white); - font-size: 16px; display: flex; + font-size: 16px; + font-weight: 510; align-items: center; svg { @@ -35,8 +36,9 @@ $light-grey : #a0a5aa; align-items: center; &__greeting { - color: $light-grey; + color: var(--nfd-onboarding-white); font-size: 16px; + font-weight: 510; margin-right: 5px; } diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js index 1bfbe9627..da30df9cb 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js @@ -10,6 +10,7 @@ const NextButtonSiteGen = ( { className, callback = null, disabled = false, + showChevronRight = true, } ) => { const navigate = useNavigate(); const { nextStep } = useSelect( ( select ) => { @@ -37,10 +38,12 @@ const NextButtonSiteGen = ( { } } > { text } - + { showChevronRight && ( + + ) } ); }; diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss index 41463214d..b4d93c286 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss @@ -5,6 +5,7 @@ display: flex; cursor: pointer; padding: 0 16px; + padding-left: 22px; text-align: center; border-radius: 8px; align-items: center; diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index df5b3e2ee..c72b80a37 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -36,7 +36,9 @@ const SiteGenHeader = () => { const currentStepIndex = findIndex( allSteps, { path: currentStep?.path, } ); - const progress = ( currentStepIndex / allSteps.length ) * 100; + const progress = Math.abs( + ( ( currentStepIndex - 1 ) / ( allSteps.length - 1 ) ) * 100 + ); return ( <> diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss index 1782a6ac9..3d39b7e1f 100644 --- a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-onboarding-image-uploader { &--with-text { - width: 40vw; + width: 36vw; margin: 16px; border: 1.25px dashed var(--nfd-onboarding-site-logo-border); @@ -15,7 +15,7 @@ align-items: stretch; } border-radius: 8px; - padding: 24px; + padding: 30px; display: flex; flex-direction: column; justify-content: center; @@ -123,17 +123,19 @@ &__reset { width: 100%; display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: column; + justify-content: center; &__button { - font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); - font-style: normal; + padding: 0; + width: 40px; + height: 40px; + border: none; font-weight: 510; + font-style: normal; + background-color: #ff0e9099; color: var(--nfd-onboarding-primary); - background-color: transparent; - border: none; - padding: 0; + font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); &:hover { cursor: pointer; @@ -141,7 +143,7 @@ } &__icon { - fill: var(--nfd-onboarding-primary); + fill: rgb(255, 14, 144); } } } diff --git a/src/OnboardingSPA/components/ProgressBar/stylesheet.scss b/src/OnboardingSPA/components/ProgressBar/stylesheet.scss index bb8490289..5365e4189 100644 --- a/src/OnboardingSPA/components/ProgressBar/stylesheet.scss +++ b/src/OnboardingSPA/components/ProgressBar/stylesheet.scss @@ -6,8 +6,9 @@ height: 16px; &__progress { - background-color: var(--nfd-onboarding-progress-bar-fill); height: 16px; + transition: width 2s ease-in-out; + background-color: var(--nfd-onboarding-progress-bar-fill); } } } diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss index 2e10027f6..9dc5ff0a5 100644 --- a/src/OnboardingSPA/components/StartOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss @@ -65,17 +65,14 @@ } &__heading { - color: var(--nfd-onboarding-primary); - width: 96%; - margin: 50px 0 50px; - line-height: 1; &__title { - font-weight: 500; - text-align: center; - color: var(--nfd-onboarding-primary); + font-weight: 600; font-size: 20px; line-height: 20px; + text-align: center; + margin-bottom: 10px; + color: var(--nfd-onboarding-primary); @media (max-width: #{ ($break-large) }) { margin: 8px; diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index 8055dba22..59756e436 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -5,10 +5,12 @@ import { useRef, useEffect, useState, memo } from '@wordpress/element'; const TextInputSiteGen = ( { hint, height, + children, placeholder, customerInput, setIsValidInput, setCustomerInput, + customChildren = false, } ) => { const textareaRef = useRef( null ); const [ analysisScore, setAnalysisScore ] = useState( 0 ); @@ -85,16 +87,19 @@ const TextInputSiteGen = ( { onChange={ ( e ) => onTextChange( e ) } /> - { customerInput ? ( -
-
- { __( 'Detail', 'wp-module-onboarding' ) } +
+ { customerInput ? ( +
+
+ { __( 'Detail', 'wp-module-onboarding' ) } +
+ { renderDetails() }
- { renderDetails() } -
- ) : ( -

{ hint }

- ) } + ) : ( +

{ hint }

+ ) } + { customChildren && children } +
); diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss index c13ecdb00..230a568db 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss @@ -33,7 +33,6 @@ $selected-detail: #1de082; } &__hint { - margin-top: 30px; font-weight: 300; font-size: 0.87rem; padding: 0 1.5px; @@ -44,7 +43,6 @@ $selected-detail: #1de082; &__info { display: flex; - margin-top: 30px; align-items: center; &-text { @@ -56,8 +54,8 @@ $selected-detail: #1de082; } &-icon { - width: 10px; - height: 6px; + width: 12px; + height: 6.5px; margin: 3px; border-radius: 6px; animation: fadeIn 100ms ease-in; @@ -69,6 +67,14 @@ $selected-detail: #1de082; } } } + + &_bottom { + display: flex; + margin-top: 30px; + flex-direction: row; + align-items: center; + justify-content: space-between; + } } } diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 5fecea1b9..eea7362b0 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -101,9 +101,9 @@ const SiteGenSiteDetails = () => { customerInput={ customerInput } setIsValidInput={ setIsValidInput } setCustomerInput={ setCustomerInput } - /> - { isLargeViewport && ( - <> + customChildren={ true } + > + { isLargeViewport && (
{ disabled={ ! isValidInput } />
- - ) } + ) } +
{ content.walkThroughText } { return { heading: __( 'Website Creator for WordPress', 'wp-module-onboarding' ), subHeading: __( - 'Tell our AI engine what kind of site you want to make and let it handle the content and design for you.', + 'Tell our AI engine what kind of site you want to make and let it handle the content and design for you', 'wp-module-onboarding' ), buttonText: __( 'Get Started', 'wp-module-onboarding' ), diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js index ec3ff5b54..fd27e5533 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js @@ -40,7 +40,13 @@ const SiteGenWelcome = () => { { content.subHeading }

- + ); diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss index 3c8a39c87..11b3a18d6 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss @@ -31,12 +31,12 @@ } &__heading { + padding: 0; + width: 100%; display: flex; + align-items: center; flex-direction: row; - width: 100%; - padding: 0; justify-content: center; - align-items: center; &__image { height: 36px; @@ -60,29 +60,35 @@ } &__text { - color: var(--nfd-onboarding-primary); - font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem); + line-height: 1; + font-weight: 510; margin-left: 15px; white-space: normal; - line-height: 1; + letter-spacing: 0.8px; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem); } } &__sub-heading { + padding: 0; width: 100%; margin: 10px; - padding: 0; - margin-bottom: 40px; + margin-bottom: 50px; &__text { - text-align: center; - color: var(--nfd-onboarding-primary); - font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); margin: 0; padding: 0; + text-align: center; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.727rem + 0.5114vw, 2rem); } } } + + &--button { + padding: 0 35px; + } } }