Merge pull request #394 from newfold-labs/fix-dynamic-bg

Fix Dynamic BG
newfold-labs · Jan 1, 2024 · a1fc1f2 · a1fc1f2
2 parents e913362 + 59d66fd
commit a1fc1f2
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
@@ -9,23 +9,31 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect, useContext } from '@wordpress/element';
 // eslint-disable-next-line  @wordpress/no-unsafe-wp-apis
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
-// import bgAiImg from '../../static/images/ai_bg.png';
+// Needs to explicitly imported to be added dynamically
+import aiBg from '../../static/images/sitegen/ai_bg.png';
+import { ThemeContext } from '../ThemeContextProvider';
+import { THEME_DARK } from '../../../constants';
 
-function useHTMLClass( className ) {
+function useHTMLClass( className, isDarkMode ) {
 	useEffect( () => {
+		const lightBg = '#ededed';
 		// 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 = aiBg;
+		mainImage.onload = () => {
+			if (
+				document.querySelector( '.nfd-onboarding-skeleton--sitegen' )
+			) {
+				document.querySelector(
+					'.nfd-onboarding-skeleton--sitegen'
+				).style.background = isDarkMode ? `url('${ aiBg }')` : lightBg;
+			}
+		};
 
 		const element =
 			document && document.querySelector( `html:not(.${ className })` );
@@ -36,7 +44,7 @@ function useHTMLClass( className ) {
 		return () => {
 			element.classList.toggle( className );
 		};
-	}, [ className ] );
+	}, [ className, isDarkMode ] );
 }
 
 function NewfoldInterfaceSkeleton(
@@ -56,8 +64,11 @@ function NewfoldInterfaceSkeleton(
 	ref
 ) {
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
-
-	useHTMLClass( 'nfd-interface-interface-skeleton__html-container' );
+	const { theme } = useContext( ThemeContext );
+	useHTMLClass(
+		'nfd-interface-interface-skeleton__html-container',
+		theme === THEME_DARK
+	);
 
 	const defaultLabels = {
 		/* translators: accessibility text for the nav bar landmark region. */

diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss
@@ -181,9 +181,9 @@ html.nfd-interface-interface-skeleton__html-container {
 .nfd-onboarding-skeleton {
 
 	&--sitegen {
-		background: var(--sitegen-background);
-		background-repeat: no-repeat;
-		background-size: cover;
+		background: var(--sitegen-background-low);
+		background-repeat: no-repeat !important;
+		background-size: cover !important;
 
 		.nfd-interface-interface-skeleton__footer {
 			display: flex;

diff --git a/src/OnboardingSPA/static/images/ai_bg.png → ...ardingSPA/static/images/sitegen/ai_bg.png b/src/OnboardingSPA/static/images/ai_bg.png → ...ardingSPA/static/images/sitegen/ai_bg.png
diff --git a/...OnboardingSPA/static/images/ai_bg_low.png → ...ngSPA/static/images/sitegen/ai_bg_low.png b/...OnboardingSPA/static/images/ai_bg_low.png → ...ngSPA/static/images/sitegen/ai_bg_low.png
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
@@ -303,7 +303,7 @@ body {
 
 	.nfd-onboarding-sitegen-light {
 
-		--sitegen-background: #ededed;
+		--sitegen-background-low: #ededed;
 		--nfd-onboarding-primary: #000;
 		--nfd-onboarding-primary-rgb: 0, 0, 0;
 		--nfd-onboarding-hover: #c3c4c7;
@@ -345,6 +345,6 @@ body {
 		--nfd-onboarding-editor-header-background: var(--nfd-onboarding-preview-favorite-background);
 		--nfd-onboarding-favorite-fill: #ef4a71;
 		--nfd-onboarding-button-background: #363e4459;
-		--sitegen-background: url(../static/images/ai_bg.png);
+		--sitegen-background-low: url(../static/images/sitegen/ai_bg_low.png);
 	}
 }
diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
@@ -37,8 +37,6 @@ body {
 	--site-features-wishlist: url(../static/icons/site-features/wishlist.svg);
 	--site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg);
 
-	--sitegen-background: url(../static/images/ai_bg.png);
-	--sitegen-background-high-res: url(../static/images/ai_bg.png);
 	--sitegen-ai-icon: url(../static/icons/sitegen/sitegen-ai-icon.svg);
 	--sitegen-image-upload-icon: url(../static/icons/sitegen/image-upload.svg);
 	--sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif);