diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
index 5a607410f..7f813c969 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
@@ -7,6 +7,11 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
$box-shadow: var(--nfd-onboarding-light-gray-highlighted);
.checkbox-item {
+
+ .highlighted {
+ fill: var(--wp-admin-theme-color-darker-10);
+ }
+
margin: 12px;
padding: 16px;
margin-top: 16px;
@@ -80,7 +85,12 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
}
&-help {
- cursor: pointer;
+ fill: #666;
+
+ &:hover {
+ cursor: pointer;
+ fill: var(--wp-admin-theme-color-darker-10);
+ }
}
}
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
index 8733e1634..5c7489a20 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
@@ -29,7 +29,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
justify-content: center;
&__dot {
- background-color: #989EA7;
+ background-color: #989ea7;
width: 8px;
margin: 3px;
height: 8px;
@@ -71,6 +71,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
.live-preview {
&__container {
+
&-custom {
width: 100%;
overflow: hidden;
@@ -89,9 +90,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
width: 100%;
opacity: 0;
transition: 0.5s ease;
- background-color: rgba(28, 92, 186);
+ background-color:
+ rgb(var(--wp-admin-theme-color-darker-10--rgb))
- &__icon {
+ &__icon{
fill: $main-color-light;
font-size: 20px;
position: absolute;
@@ -111,4 +113,3 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
}
}
-
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
index e40d69b1c..83e49b569 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
@@ -110,7 +110,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
width: 100%;
opacity: 0;
transition: 0.5s ease;
- background-color: rgba(28, 92, 186);
+ background-color: rgb(var(--wp-admin-theme-color-darker-10--rgb));
&__icon {
fill: $main-color-light;
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/contents.js b/src/OnboardingSPA/pages/Steps/WhatNext/contents.js
new file mode 100644
index 000000000..89c641604
--- /dev/null
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/contents.js
@@ -0,0 +1,68 @@
+import { translations } from '../../../utils/locales/translations';
+import { __, sprintf } from '@wordpress/i18n';
+
+const getContents = ( brandName ) => {
+ return {
+ heading: __( 'Nice work: Your site is ready 🎉', 'wp-module-onboarding' ),
+ subheading: __( 'Move-in day begins! Let us know if you\'d like a hand.', 'wp-module-onboarding' ),
+ buttonText: __( 'Complete Setup', 'wp-module-onboarding' ),
+ tabs: [
+ {
+ name: __( 'tab1', 'wp-module-onboarding' ),
+ title: __( 'WHATS NEXT', 'wp-module-onboarding' ),
+ subtitle: __(
+ 'Add content, organize your menu and launch.',
+ 'wp-module-onboarding'
+ ),
+ text: sprintf(
+ /* translators: %s: Brand */
+ __(
+ "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with %s, we're always here to help!",
+ 'wp-module-onboarding'
+ ),
+ brandName
+ ),
+ imgType: 'wpadmin-img',
+ animationName: 'fade-in-right',
+ },
+ {
+ name: __( 'tab2', 'wp-module-onboarding' ),
+ title: __( 'HELP & RESOURCES', 'wp-module-onboarding' ),
+ subtitle: __(
+ "Next step or next level, we're your partner.",
+ 'wp-module-onboarding'
+ ),
+ text: sprintf(
+ /* translators: %s: Site */
+ __(
+ 'WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.',
+ 'wp-module-onboarding'
+ ),
+ translations( 'site' )
+ ),
+ imgType: 'help-img',
+ animationName: 'fade-in-up',
+ },
+ {
+ name: __( 'tab3', 'wp-module-onboarding' ),
+ title: __( 'HIRE OUR EXPERTS', 'wp-module-onboarding' ),
+ subtitle: __(
+ 'Make our great people your people.',
+ 'wp-module-onboarding'
+ ),
+ text: sprintf(
+ /* translators: %s: Site */
+ __(
+ "Pick your %s's unique design now and refine by customing your block templates, colors and fonts in the WordPress Site Editor.",
+ 'wp-module-onboarding'
+ ),
+ translations( 'site' )
+ ),
+ imgType: 'bluesky-img',
+ animationName: 'fade-in-left',
+ },
+ ],
+ };
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/index.js b/src/OnboardingSPA/pages/Steps/WhatNext/index.js
index 1ee8e805e..0f6c53372 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/index.js
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/index.js
@@ -1,18 +1,16 @@
-import CommonLayout from '../../../components/Layouts/Common';
-import { store as nfdOnboardingStore } from '../../../store';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
-import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
-import { __ } from '@wordpress/i18n';
-import {translations} from '../../../utils/locales/translations';
+import CommonLayout from '../../../components/Layouts/Common';
+import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
import CardHeader from '../../../components/CardHeader';
import NavCardButton from '../../../components/Button/NavCardButton';
-
import Tab from '../../../components/Tab';
-import tabContent from './tabContent.json';
import TabPanelHover from '../../../components/TabPanelHover';
+import { store as nfdOnboardingStore } from '../../../store';
+
import { SIDEBAR_LEARN_MORE } from '../../../../constants';
+import getContents from './contents';
const StepWhatNext = () => {
const { setIsDrawerOpened, setSidebarActiveView, setIsHeaderNavigationEnabled } =
@@ -24,33 +22,41 @@ const StepWhatNext = () => {
setIsHeaderNavigationEnabled( true );
}, [] );
+ const { brandName } = useSelect( ( select ) => {
+ return {
+ brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+ };
+ } );
+
+ const content = getContents( brandName );
+
return (
-
-