diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js index a51302957..cf49123d8 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js @@ -28,6 +28,7 @@ const HeadingWithSubHeading = ( { title, subtitle } ) => { width: '20px', height: '20px', marginBottom: '-2px', + marginRight: '2px', backgroundImage: 'var(--nfd-onboarding-icon)', backgroundSize: 'contain', } } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index ac1433532..1a2771c4e 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -5,6 +5,10 @@ import Sidebar from '../../Sidebar'; import ToggleDarkMode from '../../ToggleDarkMode'; import { ThemeProvider } from '../../ThemeContextProvider'; import themeToggleHOC from '../themeToggleHOC'; +import { store as nfdOnboardingStore } from '../../../store'; +import { useSelect } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; +import classNames from 'classnames'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -14,10 +18,23 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( ); const SiteGen = () => { + const { newfoldBrand } = useSelect( ( select ) => { + return { + newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), + }; + }, [] ); + + useEffect( () => { + document.body.classList.add( `nfd-brand-${ newfoldBrand }` ); + }, [ newfoldBrand ] ); + return ( } content={ } sidebar={ }