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 7523ce3a0..eb779199b 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -69,16 +69,18 @@ const SiteGenSiteDetails = () => {
customerInput={ customerInput }
setIsValidInput={ setIsValidInput }
setCustomerInput={ setCustomerInput }
- />
- { isLargeViewport && (
-
-
-
- ) }
+ customChildren={ true }
+ >
+ { isLargeViewport && (
+
+
+
+ ) }
+
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
index 4ea61864c..1f6c0d4b2 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
@@ -11,7 +11,6 @@
}
&-endrow {
- width: 100%;
display: flex;
justify-content: flex-end;