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;
+ }
}
}