Fix Next Placement

newfold-labs · Jan 15, 2024 · 7b4ef77 · 7b4ef77
1 parent 4671e14
commit 7b4ef77
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git 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 ) }
 					/>
 				</div>
-				{ customerInput ? (
-					<div className={ 'nfd-sg-input-box__info' }>
-						<div className={ 'nfd-sg-input-box__info-text' }>
-							{ __( 'Detail', 'wp-module-onboarding' ) }
+				<div className={ 'nfd-sg-input-box_bottom' }>
+					{ customerInput ? (
+						<div className={ 'nfd-sg-input-box__info' }>
+							<div className={ 'nfd-sg-input-box__info-text' }>
+								{ __( 'Detail', 'wp-module-onboarding' ) }
+							</div>
+							{ renderDetails() }
 						</div>
-						{ renderDetails() }
-					</div>
-				) : (
-					<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
-				) }
+					) : (
+						<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
+					) }
+					{ customChildren && children }
+				</div>
 			</label>
 		</div>
 	);

diff --git 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
@@ -69,16 +69,18 @@ const SiteGenSiteDetails = () => {
 						customerInput={ customerInput }
 						setIsValidInput={ setIsValidInput }
 						setCustomerInput={ setCustomerInput }
-					/>
-					{ isLargeViewport && (
-						<div className={ 'nfd-sg-site-details-endrow' }>
-							<NextButtonSiteGen
-								className={ 'nfd-sg-site-details--next-btn' }
-								text={ content.buttonText }
-								disabled={ ! isValidInput }
-							/>
-						</div>
-					) }
+						customChildren={ true }
+					>
+						{ isLargeViewport && (
+							<div className={ 'nfd-sg-site-details-endrow' }>
+								<NextButtonSiteGen
+									className={ 'nfd-sg-site-details--next-btn' }
+									text={ content.buttonText }
+									disabled={ ! isValidInput }
+								/>
+							</div>
+						) }
+					</TextInputSiteGen>
 				</div>
 			</Animate>
 		</CommonLayout>

diff --git 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;