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;