Merge pull request #414 from newfold-labs/hotfix/fix-minor-bugs

Fix minor visual bugs
newfold-labs · Jan 17, 2024 · 7739438 · 7739438
2 parents a73083b + bf1a76a
commit 7739438
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 58 deletions.
diff --git 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
@@ -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 }
-			<Icon
-				className={ 'nfd-onboarding-button--site-gen-next--icon' }
-				icon={ chevronRight }
-			/>
+			{ showChevronRight && (
+				<Icon
+					className={ 'nfd-onboarding-button--site-gen-next--icon' }
+					icon={ chevronRight }
+				/>
+			) }
 		</Button>
 	);
 };

diff --git 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
@@ -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 (
 		<>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_TOP }` }>

diff --git 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,25 +123,27 @@
 				&__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;
 							text-decoration: underline;
 						}
 
 						&__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
@@ -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
@@ -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
@@ -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
@@ -101,9 +101,9 @@ const SiteGenSiteDetails = () => {
 							customerInput={ customerInput }
 							setIsValidInput={ setIsValidInput }
 							setCustomerInput={ setCustomerInput }
-						/>
-						{ isLargeViewport && (
-							<>
+							customChildren={ true }
+						>
+							{ isLargeViewport && (
 								<div className={ 'nfd-sg-site-details-endrow' }>
 									<NextButtonSiteGen
 										className={
@@ -113,8 +113,8 @@ const SiteGenSiteDetails = () => {
 										disabled={ ! isValidInput }
 									/>
 								</div>
-							</>
-						) }
+							) }
+						</TextInputSiteGen>
 						<div className={ 'nfd-sg-site-details-walkThrough' }>
 							{ content.walkThroughText }
 							<span

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
@@ -16,7 +16,6 @@
 	}
 
 	&-endrow {
-		width: 100%;
 		display: flex;
 		justify-content: flex-end;
 		margin-top: 20px;

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
@@ -16,7 +16,7 @@
 				}
 
 				&__buttons {
-					width: 108%;
+					width: 99%;
 					display: flex;
 					padding: 16px;
 					flex-direction: row;

diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js b/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js
@@ -4,7 +4,7 @@ const getContents = () => {
 	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
@@ -40,7 +40,13 @@ const SiteGenWelcome = () => {
 						{ content.subHeading }
 					</p>
 				</div>
-				<NextButtonSiteGen text={ content.buttonText } />
+				<NextButtonSiteGen
+					className={
+						'nfd-onboarding-step--site-gen__welcome--button'
+					}
+					text={ content.buttonText }
+					showChevronRight={ false }
+				/>
 			</div>
 		</CommonLayout>
 	);

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