Merge pull request #381 from newfold-labs/enhance/fix-dark-mode

Fixing `Little` Things.

src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss

@@ -5,7 +5,7 @@
 		color: var(--nfd-onboarding-secondary);
 		width: 80px;
 		height: 50px;
-		font-size: 15px;
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 		border-radius: 8px;
 		padding: 16px;
 
@@ -17,5 +17,6 @@
 				color: var(--nfd-onboarding-secondary);
 			}
 		}
+
 	}
 }

src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss

@@ -1,11 +1,10 @@
 .nfd-onboarding-button {
 
 	&--site-gen-next {
-		width: 164px;
 		height: 50px;
 		display: flex;
 		cursor: pointer;
-		margin-top: 24px;
+		padding: 0 16px;
 		text-align: center;
 		border-radius: 8px;
 		align-items: center;
@@ -15,18 +14,16 @@
 		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 
 		@media (min-width: 2600px ) {
-			width: 250px;
 			height: 76px;
 		}
 
 		@media (max-width: #{ ($break-small) }) {
-			width: 100px;
-			height: 30px;
 			margin-top: 10px;
+			font-size: 16px;
 		}
 
 		&--disabled {
-			background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.4);
+			background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.6) !important;
 
 			&:hover {
 				cursor: not-allowed;

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -4,12 +4,17 @@ $background-color: var(--nfd-onboarding-card-background);
 
 	margin: 8px;
 	max-width: 90vw;
-	padding: 24px 12px;
+	padding: 24px 16px;
 	border-radius: 12px;
 	background-color: $background-color;
 	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
 	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);
 
+	@media (max-width: #{ ($break-large) }) {
+		margin: 12px;
+		padding: 12px 6px;
+	}
+
 	&__title {
 		color: var(--nfd-onboarding-primary);
 		margin: 16px;

src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js

@@ -1,13 +1,39 @@
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { Fill } from '@wordpress/components';
-import { FOOTER_SITEGEN, FOOTER_START } from '../../../../../constants';
+import { useViewportMatch } from '@wordpress/compose';
+
 import ToggleDarkMode from '../../../ToggleDarkMode';
+import { store as nfdOnboardingStore } from '../../../../store';
+import {
+	FOOTER_SITEGEN,
+	FOOTER_START,
+	FOOTER_END,
+} from '../../../../../constants';
+import NextButtonSiteGen from '../../../Button/NextButtonSiteGen';
 
 const SiteGenFooter = () => {
+	const isLargeViewport = useViewportMatch( 'small' );
+	const { footerNavEnabled } = useSelect( ( select ) => {
+		return {
+			footerNavEnabled:
+				select( nfdOnboardingStore ).getFooterNavEnabled(),
+		};
+	} );
+
 	return (
 		<>
 			<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_START }` }>
 				<ToggleDarkMode />
 			</Fill>
+			{ ! isLargeViewport && (
+				<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_END }` }>
+					<NextButtonSiteGen
+						text={ __( 'Next', 'wp-module-onboarding' ) }
+						disabled={ ! footerNavEnabled }
+					/>
+				</Fill>
+			) }
 		</>
 	);
 };

src/OnboardingSPA/components/Footer/stylesheet.scss

@@ -14,9 +14,24 @@
 	&__end {
 		position: absolute;
 		right: 25px;
+		bottom: 25px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		@media (max-width: #{ ($break-small) }) {
+			right: 16px;
+			bottom: 20px;
+		}
 	}
 
 	&--background {
 		background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.75);
 	}
+
+	@media (max-width: #{ ($break-small) }) {
+		backdrop-filter: blur(2px);
+		background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5);
+		border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25);
+	}
 }

src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss

@@ -1,5 +1,6 @@
 .ai-heading {
 
+	width: 100%;
 	display: flex;
 	margin-bottom: 20px;
 	align-items: center;
@@ -18,7 +19,7 @@
 		margin: 10px;
 		line-height: 1.5;
 		font-weight: 500;
-		font-size: 1.2rem;
 		color: var(--nfd-onboarding-primary);
+		font-size: clamp(1.2rem, 1.1rem + 0.273vw, 2.5rem);
 	}
 }

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss

@@ -1,10 +1,15 @@
 .nfd-onboarding-image-uploader {
 
 	&--with-text {
-		width: 600px;
+		width: 40vw;
 		margin: 16px;
 		border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
 
+		@media (max-width: #{ ($break-large) }) {
+			width: 80vw;
+			margin: 24px;
+		}
+
 		&--not-dashed {
 			border: 1.25px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
 			align-items: stretch;
@@ -92,7 +97,7 @@
 					width: 130px;
 					height: 100px;
 					object-fit: cover;
-					border-radius: 8px;
+					border-radius: 4px;
 				}
 
 				&__details {
@@ -105,7 +110,7 @@
 					&__filename {
 						margin: 0;
 						margin-bottom: 8px;
-						width: 300px;
+						width: 28vw;
 						font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1.75rem);
 					}
 
@@ -125,7 +130,6 @@
 						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
 						font-style: normal;
 						font-weight: 510;
-						margin-right: 24px;
 						color: var(--nfd-onboarding-primary);
 						background-color: transparent;
 						border: none;

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js

@@ -14,18 +14,18 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
-import bgAiImg from '../../static/images/ai_bg.png';
+// import bgAiImg from '../../static/images/ai_bg.png';
 
 function useHTMLClass( className ) {
 	useEffect( () => {
 		// eslint-disable-next-line no-undef
-		const mainImage = new Image();
-		mainImage.src = bgAiImg;
-		mainImage.onload = () => {
-			document.querySelector(
-				'.nfd-onboarding-skeleton--sitegen'
-			).style.backgroundImage = `url('${ bgAiImg }')`;
-		};
+		// const mainImage = new Image();
+		// mainImage.src = bgAiImg;
+		// mainImage.onload = () => {
+		// 	document.querySelector(
+		// 		'.nfd-onboarding-skeleton--sitegen'
+		// 	).style.backgroundImage = `url('${ bgAiImg }')`;
+		// };
 
 		const element =
 			document && document.querySelector( `html:not(.${ className })` );

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -181,7 +181,7 @@ html.nfd-interface-interface-skeleton__html-container {
 .nfd-onboarding-skeleton {
 
 	&--sitegen {
-		background-image: var(--sitegen-background);
+		background: var(--sitegen-background);
 		background-repeat: no-repeat;
 		background-size: cover;
 

src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss

@@ -1,7 +1,7 @@
 .nfd-onboarding-toggle__theme {
 	margin-left: 25px;
 	margin-top: 10px;
-	margin-bottom: 10px;
+	margin-bottom: 25px;
 
 	&__button {
 		width: 60px;
@@ -16,4 +16,9 @@
 			background: var(--sitegen-toggle-theme-icon-dark);
 		}
 	}
+
+	@media (max-width: #{ ($break-small) }) {
+		margin-left: 16px;
+		margin-bottom: 16px;
+	}
 }

src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss

@@ -31,13 +31,13 @@
 		}
 
 		&--header {
-			height: 80px;
+			height: 10vh;
 			width: 90vw;
 		}
 
 		&--body {
 			width: 90vw;
-			height: 500px;
+			height: 80vh;
 		}
 
 		&--footer {
@@ -48,12 +48,12 @@
 
 			&_left {
 				width: 55vw;
-				height: 300px;
+				height: 40vh;
 			}
 
 			&_right {
 				width: 33vw;
-				height: 300px;
+				height: 40vh;
 			}
 		}
 	}

src/OnboardingSPA/steps/SiteGen/Experience/stylesheet.scss

@@ -3,4 +3,8 @@
 	align-items: center;
 	flex-direction: column;
 	justify-content: center;
+
+	@media (max-width: #{ ($break-large) }) {
+		margin-bottom: 70px;
+	}
 }

src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

@@ -1,3 +1,4 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -12,6 +13,7 @@ import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
 
 const SiteGenSiteDetails = () => {
 	const content = getContents();
+	const isLargeViewport = useViewportMatch( 'small' );
 	const [ customerInput, setCustomerInput ] = useState();
 
 	const { currentData } = useSelect( ( select ) => {
@@ -22,6 +24,7 @@ const SiteGenSiteDetails = () => {
 	} );
 
 	const {
+		setFooterNavEnabled,
 		setIsHeaderEnabled,
 		setSidebarActiveView,
 		setHeaderActiveView,
@@ -36,14 +39,16 @@ const SiteGenSiteDetails = () => {
 		setDrawerActiveView( false );
 
 		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
-			setCustomerInput( currentData.sitegen.siteDetails.prompt );
+			return setCustomerInput( currentData.sitegen.siteDetails.prompt );
 		}
+		setFooterNavEnabled( false );
 	}, [] );
 
-	const checkAndNavigate = () => {
+	useEffect( () => {
+		setFooterNavEnabled( customerInput !== '' );
 		currentData.sitegen.siteDetails.prompt = customerInput;
 		setCurrentOnboardingData( currentData );
-	};
+	}, [ customerInput ] );
 
 	return (
 		<CommonLayout isCentered>
@@ -57,17 +62,18 @@ const SiteGenSiteDetails = () => {
 						customerInput={ customerInput }
 						setCustomerInput={ setCustomerInput }
 					/>
-					<div className={ 'nfd-sg-site-details-endrow' }>
-						<NextButtonSiteGen
-							className={ 'nfd-sg-site-details--next-btn' }
-							text={ content.buttonText }
-							callback={ checkAndNavigate }
-							disabled={
-								customerInput === undefined ||
-								customerInput === ''
-							}
-						/>
-					</div>
+					{ isLargeViewport && (
+						<div className={ 'nfd-sg-site-details-endrow' }>
+							<NextButtonSiteGen
+								className={ 'nfd-sg-site-details--next-btn' }
+								text={ content.buttonText }
+								disabled={
+									customerInput === undefined ||
+									customerInput === ''
+								}
+							/>
+						</div>
+					) }
 				</div>
 			</Animate>
 		</CommonLayout>

src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss

@@ -1,7 +1,13 @@
 .nfd-sg-site-details {
 
+	width: 40vw;
+
+	@media (max-width: #{ ($break-large) }) {
+		width: 80vw;
+	}
+
 	@media (max-width: #{ ($break-small) }) {
-		margin: 20px;
+		margin: 10px;
 	}
 
 	&-endrow {

src/OnboardingSPA/steps/SiteGen/SiteLogo/contents.js

@@ -14,6 +14,7 @@ const getContents = () => {
 		},
 		buttons: {
 			skip: __( 'Skip for now', 'wp-module-onboarding' ),
+			next: __( 'Next', 'wp-module-onboarding' ),
 		},
 	};
 };